@oracle/oraclejet-preact 14.1.5 → 14.1.6

package/cjs/PRIVATE_Message/__tests__/MessageSummary.spec.js

@@ -1,13 +1,13 @@
-/* @oracle/oraclejet-preact: 14.1.5 */
+/* @oracle/oraclejet-preact: 14.1.6 */
 'use strict';
 
 var jsxRuntime = require('preact/jsx-runtime');
 var preact = require('@testing-library/preact');
 var chai = require('chai');
-var MessageSummary = require('../../MessageSummary-1e52ac99.js');
+var MessageSummary = require('../../MessageSummary-079e4290.js');
 require("identity-obj-proxy");
 require('../../utils/UNSAFE_classNames.js');
-require('../../classNames-6fde8385.js');
+require('../../classNames-b5a9df09.js');
 
 describe('Test MessageSummary component', () => {
     it('text', async function () {

package/cjs/PRIVATE_Message/__tests__/MessageTimestamp.spec.js

@@ -1,18 +1,18 @@
-/* @oracle/oraclejet-preact: 14.1.5 */
+/* @oracle/oraclejet-preact: 14.1.6 */
 'use strict';
 
 var jsxRuntime = require('preact/jsx-runtime');
 var preact = require('@testing-library/preact');
 var chai = require('chai');
-var MessageTimestamp = require('../../MessageTimestamp-a3770857.js');
-var MessageFormattingUtils = require('../../MessageFormattingUtils-c94f7a53.js');
+var MessageTimestamp = require('../../MessageTimestamp-27dd0d9e.js');
+var MessageFormattingUtils = require('../../MessageFormattingUtils-19acf058.js');
 require("identity-obj-proxy");
 require('../../utils/UNSAFE_classNames.js');
-require('../../classNames-6fde8385.js');
+require('../../classNames-b5a9df09.js');
 require('../../utils/UNSAFE_getLocale.js');
 require('../../utils/UNSAFE_stringUtils.js');
-require('../../stringUtils-247811c6.js');
-require('../../Message.types-8d31665a.js');
+require('../../stringUtils-ceb87e47.js');
+require('../../Message.types-1bf43224.js');
 require('../../utils/UNSAFE_arrayUtils.js');
 
 const todaysDate = new Date();

package/cjs/PRIVATE_Message/__tests__/MessageUtils.spec.js

@@ -1,18 +1,18 @@
-/* @oracle/oraclejet-preact: 14.1.5 */
+/* @oracle/oraclejet-preact: 14.1.6 */
 'use strict';
 
 var jsxRuntime = require('preact/jsx-runtime');
 var chai = require('chai');
-var MessageUtils = require('../../MessageUtils-a1fcfc6e.js');
+var MessageUtils = require('../../MessageUtils-fd46058f.js');
 require('../../utils/UNSAFE_logger.js');
-require('../../_curry1-a14e4710.js');
-require('../../_curry2-2b493ed4.js');
+require('../../_curry1-b198128d.js');
+require('../../_curry2-29bebe59.js');
 require('../../utils/UNSAFE_soundUtils.js');
-require('../../MessageFormattingUtils-c94f7a53.js');
+require('../../MessageFormattingUtils-19acf058.js');
 require('../../utils/UNSAFE_getLocale.js');
 require('../../utils/UNSAFE_stringUtils.js');
-require('../../stringUtils-247811c6.js');
-require('../../Message.types-8d31665a.js');
+require('../../stringUtils-ceb87e47.js');
+require('../../Message.types-1bf43224.js');
 require('../../utils/UNSAFE_arrayUtils.js');
 
 describe('Test MessageUtils', () => {

package/cjs/PRIVATE_Message/__tests__/MessagesManager.spec.js

@@ -1,16 +1,16 @@
-/* @oracle/oraclejet-preact: 14.1.5 */
+/* @oracle/oraclejet-preact: 14.1.6 */
 'use strict';
 
 var jsxRuntime = require('preact/jsx-runtime');
 var preact = require('@testing-library/preact');
 var chai = require('chai');
-var MessagesManager = require('../../MessagesManager-ce7a6c8e.js');
+var MessagesManager = require('../../MessagesManager-c5b65212.js');
 require('preact');
 require('preact/hooks');
 require('../../PRIVATE_TransitionGroup.js');
-require('../../tslib.es6-4644506a.js');
+require('../../tslib.es6-942e45a7.js');
 require('../../hooks/UNSAFE_useAnimation.js');
-require('../../useAnimation-30910011.js');
+require('../../useAnimation-285d5114.js');
 require('../../hooks/UNSAFE_useMessagesContext.js');
 
 const DATA = [

package/cjs/PRIVATE_Message.js

@@ -1,4 +1,4 @@
-/* @oracle/oraclejet-preact: 14.1.5 */
+/* @oracle/oraclejet-preact: 14.1.6 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -9,55 +9,55 @@ var hooks = require('preact/hooks');
 require('./UNSAFE_Flex.js');
 var utils_PRIVATE_timer = require('./utils/PRIVATE_timer.js');
 require('./utils/UNSAFE_classNames.js');
-var MessageCloseButton = require('./MessageCloseButton-c57bb752.js');
-var classNames = require('./classNames-6fde8385.js');
-var MessageDetail = require('./MessageDetail-d4776885.js');
-var MessageFormattingUtils = require('./MessageFormattingUtils-c94f7a53.js');
-var MessageStartIcon = require('./MessageStartIcon-d6efa0ad.js');
-var MessageSummary = require('./MessageSummary-1e52ac99.js');
-var MessageTimestamp = require('./MessageTimestamp-a3770857.js');
-var MessageUtils = require('./MessageUtils-a1fcfc6e.js');
-var Flex = require('./Flex-63a59c1e.js');
-var MessagesManager = require('./MessagesManager-ce7a6c8e.js');
-var Message_types = require('./Message.types-8d31665a.js');
-require('./tslib.es6-4644506a.js');
+var MessageCloseButton = require('./MessageCloseButton-cd3d1b65.js');
+var classNames = require('./classNames-b5a9df09.js');
+var MessageDetail = require('./MessageDetail-c3aa3da3.js');
+var MessageFormattingUtils = require('./MessageFormattingUtils-19acf058.js');
+var MessageStartIcon = require('./MessageStartIcon-59b06e6a.js');
+var MessageSummary = require('./MessageSummary-079e4290.js');
+var MessageTimestamp = require('./MessageTimestamp-27dd0d9e.js');
+var MessageUtils = require('./MessageUtils-fd46058f.js');
+var Flex = require('./Flex-f0986956.js');
+var MessagesManager = require('./MessagesManager-c5b65212.js');
+var Message_types = require('./Message.types-1bf43224.js');
+require('./tslib.es6-942e45a7.js');
 require('./utils/UNSAFE_interpolations/dimensions.js');
 require('./utils/UNSAFE_arrayUtils.js');
 require('./utils/UNSAFE_size.js');
-require('./_curry1-a14e4710.js');
+require('./_curry1-b198128d.js');
 require('./utils/UNSAFE_mergeInterpolations.js');
-require('./_curry3-139befa2.js');
-require('./_curry2-2b493ed4.js');
-require('./_has-85ac73af.js');
+require('./_curry3-61f88672.js');
+require('./_curry2-29bebe59.js');
+require('./_has-f1803a3e.js');
 require('./utils/UNSAFE_interpolations/boxalignment.js');
-require('./keys-fd3d0c12.js');
+require('./keys-99928221.js');
 require('./utils/UNSAFE_interpolations/flexbox.js');
-require('./flexbox-58400f0a.js');
+require('./flexbox-b9d170fe.js');
 require('./utils/UNSAFE_interpolations/flexitem.js');
-require('./flexitem-79a2dbd0.js');
+require('./flexitem-b82cec9d.js');
 require('./UNSAFE_Button.js');
-require('./Button-afebd03c.js');
+require('./Button-3c7dbdd5.js');
 require('./UNSAFE_BaseButton.js');
-require('./BaseButton-3f86eb92.js');
+require('./BaseButton-085a1254.js');
 require('./hooks/UNSAFE_usePress.js');
 require('./hooks/UNSAFE_useHover.js');
 require('./hooks/UNSAFE_useToggle.js');
 require('./hooks/UNSAFE_useActive.js');
 require('preact/compat');
 require('./utils/PRIVATE_clientHints.js');
-require('./clientHints-bbe555e6.js');
+require('./clientHints-9b5bdfee.js');
 require('./hooks/UNSAFE_useTabbableMode.js');
 require('preact');
 require('./utils/UNSAFE_mergeProps.js');
-require('./index-941f2dde.js');
-require('./index-276f57ae.js');
+require('./index-0aad6ef7.js');
+require('./index-8485188b.js');
 require('./UNSAFE_Icon.js');
-require('./Icon-fb406179.js');
+require('./Icon-00c9c8e3.js');
 require('./hooks/UNSAFE_useTooltip.js');
 require('./hooks/UNSAFE_useId.js');
 require('./UNSAFE_Floating.js');
-require('./Floating-6e7f5043.js');
-require('./index-2420687f.js');
+require('./Floating-84d57873.js');
+require('./index-df53472d.js');
 require('./hooks/UNSAFE_useUser.js');
 require('./UNSAFE_Environment.js');
 require('./UNSAFE_Layer.js');
@@ -67,19 +67,19 @@ require('./hooks/UNSAFE_useOutsideClick.js');
 require('./hooks/UNSAFE_useFocus.js');
 require('./hooks/UNSAFE_useTouch.js');
 require('./hooks/UNSAFE_useAnimation.js');
-require('./useAnimation-30910011.js');
+require('./useAnimation-285d5114.js');
 require('./hooks/UNSAFE_useTheme.js');
 require('./utils/UNSAFE_getLocale.js');
 require('./utils/UNSAFE_stringUtils.js');
-require('./stringUtils-247811c6.js');
+require('./stringUtils-ceb87e47.js');
 require('./utils/UNSAFE_logger.js');
 require('./utils/UNSAFE_soundUtils.js');
 require('./PRIVATE_TransitionGroup.js');
 require('./hooks/UNSAFE_useMessagesContext.js');
 
 const messageStartIconStyles = {
-  base: "_1yychl2",
-  toast: "s0fbqn"
+  base: "_1s5ulds",
+  toast: "_1xyodt3"
 };
 /**
  * Component for rendering custom icon/content for start icon in Message
@@ -100,10 +100,10 @@ function MessageCustomStartIcon({
 }
 
 const messageHeaderStyles = {
-  base: "_1xs72ke",
-  banner: "pg9o8z",
+  base: "oianow",
+  banner: "_6z3d37",
   inline: undefined,
-  toast: "_3lsug5"
+  toast: "_18hr4d3"
 };
 /**
  * A component that styles the header for the message component
@@ -157,15 +157,15 @@ function isSeverityIconNeeded(severity) {
 
 const messageStyles = {
   base: {
-    banner: "umjkp0",
-    toast: "j7anqb"
+    banner: "_13v783y",
+    toast: "_189gjjq"
   },
-  section: "j6u1cj",
+  section: "_1hemuls",
   // TODO: Replace with Flex and View components to handle padding and flex
   content: {
-    base: "_1mdzhv1",
-    banner: "e1x9ol",
-    toast: "_10ctwfh"
+    base: "_6pd7xe",
+    banner: "_17xwfde",
+    toast: "mifng2"
   }
 };
 /**

package/cjs/PRIVATE_Message.js.map

@@ -1 +1 @@
-{"version":3,"file":"PRIVATE_Message.js","sources":["../../src/PRIVATE_Message/MessageCustomStartIcon.tsx","../../src/PRIVATE_Message/MessageHeader.tsx","../../src/PRIVATE_Message/Message.tsx","../../src/PRIVATE_Message/index.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 */\n\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { ComponentChildren } from 'preact';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { MessageRendererDataItem } from './Message.types';\n\nconst messageStartIconStyles = {\n  base: cssProps`${{\n    marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x)',\n    alignSelf: 'flex-start',\n    display: 'flex'\n  }}`,\n  toast: cssProps`${{\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-message-toast-start-icon-size)',\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-message-toast-start-icon-size)'\n  }}`\n};\n\n/**\n * Props for the StartIcon component\n */\ntype Props<K, D> = {\n  /**\n   * The data item for rendering the start icon\n   */\n  item: MessageRendererDataItem<K, D>;\n\n  /**\n   * A custom renderer for rendering the start icon\n   */\n  renderer: (item: MessageRendererDataItem<K, D>) => ComponentChildren;\n};\n\n/**\n * Component for rendering custom icon/content for start icon in Message\n */\nfunction MessageCustomStartIcon<K, D>({ item, renderer }: Props<K, D>) {\n  const classes = classNames([\n    messageStartIconStyles.base,\n    // for now only toast has support for custom icon\n    messageStartIconStyles.toast\n  ]);\n  return (\n    <div class={classes} role=\"presentation\">\n      {renderer(item)}\n    </div>\n  );\n}\n\nexport { MessageCustomStartIcon };\n","/**\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 } from 'preact';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { MessageVariant } from './Message.types';\n\nconst messageHeaderStyles = {\n  base: cssProps`${{\n    boxSizing: 'border-box',\n\n    // TODO: Replace with Flex and ResponsiveProps when creating oj-c-message-banner\n    display: 'flex',\n    flexWrap: 'wrap',\n    flexDirection: 'row',\n    '@media screen and (max-width: 599.9px)': {\n      flexDirection: 'column'\n    }\n  }}`,\n  banner: cssProps`${{\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-summary-line-height)'\n  }}`,\n  inline: undefined,\n  toast: cssProps`${{\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-message-toast-start-icon-size)'\n  }}`\n};\n\n/**\n * Props for the MessageHeader component\n */\ntype MessageHeaderProps = {\n  variant?: MessageVariant;\n  children?: ComponentChildren;\n};\n/**\n * A component that styles the header for the message component\n * @param param0 Props\n * @returns MessageHeader component instance\n */\nexport function MessageHeader({ children, variant = 'banner' }: MessageHeaderProps) {\n  const rootClasses = classNames([messageHeaderStyles.base, messageHeaderStyles[variant]]);\n  return (\n    <div role=\"presentation\" class={rootClasses}>\n      {children}\n    </div>\n  );\n}\n","/**\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 { cssProps } from '@oracle/oraclejet-cssprops';\nimport { ComponentChildren, Ref, VNode } from 'preact';\nimport { useCallback, useEffect, useRef } from 'preact/hooks';\nimport { Flex } from '../UNSAFE_Flex';\nimport { MessageToastItem } from '../UNSAFE_MessageToast';\nimport { Timer } from '../utils/PRIVATE_timer';\nimport { classNames as cx } from '../utils/UNSAFE_classNames';\nimport { Item } from '../utils/UNSAFE_dataProvider';\nimport { MessageRendererDataItem, MessageSeverity } from './Message.types';\nimport { MessageCloseButton } from './MessageCloseButton';\nimport { MessageCustomStartIcon } from './MessageCustomStartIcon';\nimport { MessageDetail } from './MessageDetail';\nimport { isValidValueForProp } from './MessageFormattingUtils';\nimport { MessageHeader } from './MessageHeader';\nimport { MessageStartIcon } from './MessageStartIcon';\nimport { MessageSummary } from './MessageSummary';\nimport { MessageTimestamp } from './MessageTimestamp';\nimport { playSound, severityBasedStyleClass } from './MessageUtils';\n\n// TODO: Refactor Message Item types\n// https://jira.oraclecorp.com/jira/browse/JET-54215\n\n/**\n * An object representing a single message in Message component.\n */\nexport type MessageItem = {\n  /**\n   * Defines whether or not to include the close icon for the message\n   *\n   * @default 'on'\n   */\n  closeAffordance?: 'on' | 'off';\n\n  /**\n   * Defines the detail text of the message\n   */\n  detail?: string;\n\n  /**\n   * Defines the severity of the message\n   */\n  severity?: MessageSeverity;\n\n  /**\n   * Defines the sound to be played when opening the message\n   */\n  sound?: 'default' | 'none' | string;\n\n  /**\n   * Defines the primary text of the message\n   */\n  summary?: string;\n\n  /**\n   * Defines the timestamp for the message in ISO format\n   */\n  timestamp?: string;\n};\n\n/**\n * Props for the Message Component\n */\ntype Props<Key, Data> = {\n  /**\n   * A ref object for holding reference to this component\n   */\n  messageRef?: Ref<HTMLDivElement>;\n\n  /**\n   * The index of the current message instance\n   */\n  index?: number;\n\n  /**\n   * The message item with all the necessary data in it\n   */\n  item: Item<Key, Data>;\n\n  /**\n   * A renderer that renders the close button in the message.\n   */\n  closeButtonRenderer?: (title: string, onAction: (event?: Event) => void) => VNode;\n\n  /**\n   * A custom renderer for rendering the detail content\n   */\n  detailRenderer?: (item: MessageRendererDataItem<Key, Data>) => ComponentChildren;\n\n  /**\n   * A custom renderer for rendering the start icon\n   */\n  iconRenderer?: (item: MessageRendererDataItem<Key, Data>) => ComponentChildren;\n\n  /**\n   * Triggered when a user tries to close a message through UI interaction. The parent\n   * should listen to this event and remove the corresponding message item from the data\n   * which would then result in the message to be removed from the DOM. If the parent\n   * fails to remove the message item from the data, then no change will be done in the\n   * UI by the component.\n   */\n  onClose?: (item: Item<Key, Data>) => void;\n\n  /**\n   * A message can be a Banner message or Toast message.\n   *\n   * Furthermore, a Banner message can have a different look and feel. For example, when using page-level\n   * messaging the messages need to be rendered from edge to edge without any outline. On the other\n   * hand, when they are being used in a section of a page or a dialog, they need to be rendered\n   * with an outline. This attribute can be used to specify where the component is being used so that\n   * it will render the messages accordingly.\n   */\n  variant?: 'pageBanner' | 'sectionBanner' | 'toast';\n\n  /**\n   * Translations resources\n   */\n  translations?: {\n    /**\n     * Label for the message close button\n     */\n    close?: string;\n\n    /**\n     * Text for 'error' severity level\n     */\n    error?: string;\n\n    /**\n     * Text for 'warning' severity level\n     */\n    warning?: string;\n\n    /**\n     * Text for 'info' severity level\n     */\n    info?: string;\n\n    /**\n     * Text for 'confirmation' severity level\n     */\n    confirmation?: string;\n  };\n};\n\n/**\n * Determines the base variant of the message - banner or toast\n *\n * @param variant The message variant\n * @returns The base variant\n */\nfunction getBaseVariant(variant: 'pageBanner' | 'sectionBanner' | 'toast') {\n  if (variant === 'pageBanner' || variant === 'sectionBanner') {\n    return 'banner';\n  }\n  return 'toast';\n}\n\n/**\n * Determines if a severity icon is needed based on the component severity\n *\n * @param severity The component severity\n * @returns Whether or not to render the severity icon\n */\nfunction isSeverityIconNeeded(\n  severity: MessageSeverity\n): severity is Exclude<MessageSeverity, 'none'> {\n  const isValidSeverity = isValidValueForProp(severity, 'severity');\n  return isValidSeverity && severity !== 'none';\n}\n\n/**\n * CSS styles for various components\n */\nconst messageStyles = {\n  base: {\n    banner: cssProps`${{\n      backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-background-color)',\n      borderBottom: '1px solid var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color)',\n\n      '&:focus-visible': {\n        outlineStyle: 'dotted',\n        outlineWidth: '1px',\n        outlineColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)',\n        outlineOffset: '1px'\n      }\n    }}`,\n    toast: cssProps`${{\n      backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-message-toast-background-color)',\n      borderRadius: '6px',\n      boxShadow: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-box-shadow-sm)',\n      width: 'fit-content',\n\n      '&:focus-visible': {\n        outlineStyle: 'dotted',\n        outlineWidth: '1px',\n        outlineColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)',\n        outlineOffset: '1px'\n      }\n    }}`\n  },\n  section: cssProps`${{\n    border: '1px solid var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color)',\n    borderRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-lg)'\n  }}`,\n  // TODO: Replace with Flex and View components to handle padding and flex\n  content: {\n    base: cssProps`${{\n      alignItems: 'center',\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexWrap: 'wrap',\n      paddingTop: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x)',\n      paddingBottom: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x)'\n    }}`,\n    banner: cssProps`${{\n      paddingInlineStart:\n        'var(--oj-c-PRIVATE-DO-NOT-USE-core-gutter-start, var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x))',\n      paddingInlineEnd:\n        'var(--oj-c-PRIVATE-DO-NOT-USE-core-gutter-end, var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x))'\n    }}`,\n    toast: cssProps`${{\n      paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x)',\n      paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x)'\n    }}`\n  }\n} as const;\n\n/**\n * Default timeout duration for autoTimeout in milliseconds\n */\nconst MIN_SECONDS = 5;\nconst DEFAULT_TIMEOUT = MIN_SECONDS * 1000;\n\n/**\n * Component that renders an individual message\n */\nfunction Message<K extends string | number = string | number, D extends MessageItem = MessageItem>({\n  closeButtonRenderer,\n  detailRenderer,\n  iconRenderer,\n  index = -1,\n  item,\n  onClose,\n  messageRef = () => {},\n  variant = 'pageBanner',\n  translations\n}: Props<K, D>) {\n  const { closeAffordance = 'on', severity = 'error', sound, summary, timestamp } = item.data;\n  const { autoTimeout = 'off' } = item.data as MessageToastItem;\n  const baseVariant = getBaseVariant(variant);\n\n  /**\n   * Handles clicking on the close icon of the message\n   */\n  const handleClose = useCallback(() => {\n    onClose?.(item);\n  }, [item, onClose]);\n\n  /**\n   * Handles closing the message on pressing Esc\n   */\n  const handleCloseOnEsc = useCallback(\n    (event: KeyboardEvent) => {\n      // Close the message only when closeAffordance is on\n      if (event.key === 'Escape' && closeAffordance === 'on') {\n        onClose?.(item);\n      }\n    },\n    [closeAffordance, item, onClose]\n  );\n\n  /**\n   * Set auto timeout for toast messages\n   */\n  const shouldTimeout = baseVariant === 'toast' && autoTimeout !== 'off';\n  const currentTimerRef = useRef<Timer>();\n  const timeout = typeof autoTimeout === 'number' ? autoTimeout : DEFAULT_TIMEOUT;\n  const timeoutDuration = autoTimeout === 'on' ? DEFAULT_TIMEOUT : timeout;\n\n  const startTimer = useCallback(() => {\n    if (currentTimerRef.current) return;\n\n    currentTimerRef.current = new Timer(handleClose, timeoutDuration);\n  }, [handleClose, timeoutDuration]);\n\n  const clearTimer = useCallback(() => {\n    if (!currentTimerRef.current) return;\n\n    currentTimerRef.current.clear();\n    currentTimerRef.current = undefined;\n  }, []);\n\n  const pauseTimer = useCallback(() => {\n    currentTimerRef.current?.pause();\n  }, []);\n\n  const resumeTimer = useCallback(() => {\n    currentTimerRef.current?.resume();\n  }, []);\n\n  useEffect(() => {\n    if (isValidValueForProp(sound)) {\n      // It is sufficient to check for the value to be a\n      // non-empty string. The playSound method takes care of the rest.\n      playSound(sound);\n    }\n\n    // on mount, start timer for toast messages if needed\n    if (shouldTimeout) {\n      startTimer();\n    }\n\n    return () => {\n      // clear out any pending timer\n      clearTimer();\n    };\n    // eslint-disable-next-line\n  }, []); // No deps to run this only on mount\n\n  const rootClasses = cx([\n    messageStyles.base[baseVariant],\n    // for now, we do not have severity based styling on toast. So, we ignore this class for toasts\n    variant !== 'toast' && severityBasedStyleClass(severity, baseVariant),\n    variant === 'sectionBanner' && messageStyles.section\n  ]);\n\n  const contentClasses = cx([messageStyles.content.base, messageStyles.content[baseVariant]]);\n\n  // We will be animating the root div, so add padding to an inner wrapper div so that\n  // when animating height looks smooth. If padding were to be added to the root\n  // div, the animation will not be smooth as height will never reach 0 due to the\n  // padding.\n  return (\n    <div\n      ref={messageRef}\n      class={rootClasses}\n      role=\"alert\"\n      aria-atomic=\"true\"\n      tabIndex={0}\n      onKeyUp={handleCloseOnEsc}\n      onfocusin={pauseTimer}\n      onfocusout={resumeTimer}>\n      <div class={contentClasses}>\n        {iconRenderer ? (\n          <MessageCustomStartIcon item={{ ...item, index }} renderer={iconRenderer} />\n        ) : isSeverityIconNeeded(severity) ? (\n          <MessageStartIcon severity={severity} variant={baseVariant} translations={translations} />\n        ) : null}\n        <Flex direction=\"column\" flex=\"1\" gap=\"--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x\">\n          <MessageHeader variant={baseVariant}>\n            <MessageSummary variant={baseVariant} text={summary} />\n            {isValidValueForProp(timestamp, 'timestamp') && variant !== 'toast' && (\n              <MessageTimestamp variant={baseVariant} value={timestamp!} />\n            )}\n          </MessageHeader>\n          <MessageDetail\n            variant={baseVariant}\n            item={{ ...item, index }}\n            renderer={detailRenderer}\n          />\n        </Flex>\n        {closeAffordance === 'on' && (\n          <MessageCloseButton\n            buttonRenderer={closeButtonRenderer}\n            title={translations?.close}\n            variant={baseVariant}\n            onAction={handleClose}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport { Message };\n","/**\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 */\nexport { Message } from './Message';\nexport { MessageCloseButton } from './MessageCloseButton';\nexport { MessageDetail } from './MessageDetail';\nexport { formatTimestamp, isValidValueForProp } from './MessageFormattingUtils';\nexport { MessagesManager } from './MessagesManager';\nexport { MessageStartIcon } from './MessageStartIcon';\nexport { MessageSummary } from './MessageSummary';\nexport { MessageTimestamp } from './MessageTimestamp';\nexport {\n  getRenderer,\n  getRendererWithoutIndex,\n  playSound,\n  throwError,\n  severityBasedStyleClass,\n  isSeverityIconNeeded\n} from './MessageUtils';\nexport type { MessageSeverity, MessageRendererDataItem } from './Message.types';\nexport { severities } from './Message.types';\n"],"names":["messageStartIconStyles","MessageCustomStartIcon","item","renderer","base","toast","_jsx","Object","assign","class","classes","role","children","messageHeaderStyles","inline","undefined","MessageHeader","variant","rootClasses","classNames","getBaseVariant","isSeverityIconNeeded","severity","isValidSeverity","messageStyles","content","MIN_SECONDS","DEFAULT_TIMEOUT","Message","closeButtonRenderer","detailRenderer","iconRenderer","index","onClose","messageRef","translations","closeAffordance","sound","summary","timestamp","data","baseVariant","handleClose","useCallback","handleCloseOnEsc","event","currentTimerRef","useRef","timeout","autoTimeout","timeoutDuration","startTimer","clearTimer","current","clear","pauseTimer","_a","pause","resumeTimer","resume","isValidValueForProp","shouldTimeout","section","contentClasses","cx"],"mappings":"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"}
+{"version":3,"file":"PRIVATE_Message.js","sources":["../../src/PRIVATE_Message/MessageCustomStartIcon.tsx","../../src/PRIVATE_Message/MessageHeader.tsx","../../src/PRIVATE_Message/Message.tsx","../../src/PRIVATE_Message/index.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 */\n\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { ComponentChildren } from 'preact';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { MessageRendererDataItem } from './Message.types';\n\nconst messageStartIconStyles = {\n  base: cssProps`${{\n    marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x)',\n    alignSelf: 'flex-start',\n    display: 'flex'\n  }}`,\n  toast: cssProps`${{\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-message-toast-start-icon-size)',\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-message-toast-start-icon-size)'\n  }}`\n};\n\n/**\n * Props for the StartIcon component\n */\ntype Props<K, D> = {\n  /**\n   * The data item for rendering the start icon\n   */\n  item: MessageRendererDataItem<K, D>;\n\n  /**\n   * A custom renderer for rendering the start icon\n   */\n  renderer: (item: MessageRendererDataItem<K, D>) => ComponentChildren;\n};\n\n/**\n * Component for rendering custom icon/content for start icon in Message\n */\nfunction MessageCustomStartIcon<K, D>({ item, renderer }: Props<K, D>) {\n  const classes = classNames([\n    messageStartIconStyles.base,\n    // for now only toast has support for custom icon\n    messageStartIconStyles.toast\n  ]);\n  return (\n    <div class={classes} role=\"presentation\">\n      {renderer(item)}\n    </div>\n  );\n}\n\nexport { MessageCustomStartIcon };\n","/**\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 } from 'preact';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { MessageVariant } from './Message.types';\n\nconst messageHeaderStyles = {\n  base: cssProps`${{\n    boxSizing: 'border-box',\n\n    // TODO: Replace with Flex and ResponsiveProps when creating oj-c-message-banner\n    display: 'flex',\n    flexWrap: 'wrap',\n    flexDirection: 'row',\n    '@media screen and (max-width: 599.9px)': {\n      flexDirection: 'column'\n    }\n  }}`,\n  banner: cssProps`${{\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-summary-line-height)'\n  }}`,\n  inline: undefined,\n  toast: cssProps`${{\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-message-toast-start-icon-size)'\n  }}`\n};\n\n/**\n * Props for the MessageHeader component\n */\ntype MessageHeaderProps = {\n  variant?: MessageVariant;\n  children?: ComponentChildren;\n};\n/**\n * A component that styles the header for the message component\n * @param param0 Props\n * @returns MessageHeader component instance\n */\nexport function MessageHeader({ children, variant = 'banner' }: MessageHeaderProps) {\n  const rootClasses = classNames([messageHeaderStyles.base, messageHeaderStyles[variant]]);\n  return (\n    <div role=\"presentation\" class={rootClasses}>\n      {children}\n    </div>\n  );\n}\n","/**\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 { cssProps } from '@oracle/oraclejet-cssprops';\nimport { ComponentChildren, Ref, VNode } from 'preact';\nimport { useCallback, useEffect, useRef } from 'preact/hooks';\nimport { Flex } from '../UNSAFE_Flex';\nimport { MessageToastItem } from '../UNSAFE_MessageToast';\nimport { Timer } from '../utils/PRIVATE_timer';\nimport { classNames as cx } from '../utils/UNSAFE_classNames';\nimport { Item } from '../utils/UNSAFE_dataProvider';\nimport { MessageRendererDataItem, MessageSeverity } from './Message.types';\nimport { MessageCloseButton } from './MessageCloseButton';\nimport { MessageCustomStartIcon } from './MessageCustomStartIcon';\nimport { MessageDetail } from './MessageDetail';\nimport { isValidValueForProp } from './MessageFormattingUtils';\nimport { MessageHeader } from './MessageHeader';\nimport { MessageStartIcon } from './MessageStartIcon';\nimport { MessageSummary } from './MessageSummary';\nimport { MessageTimestamp } from './MessageTimestamp';\nimport { playSound, severityBasedStyleClass } from './MessageUtils';\n\n// TODO: Refactor Message Item types\n// https://jira.oraclecorp.com/jira/browse/JET-54215\n\n/**\n * An object representing a single message in Message component.\n */\nexport type MessageItem = {\n  /**\n   * Defines whether or not to include the close icon for the message\n   *\n   * @default 'on'\n   */\n  closeAffordance?: 'on' | 'off';\n\n  /**\n   * Defines the detail text of the message\n   */\n  detail?: string;\n\n  /**\n   * Defines the severity of the message\n   */\n  severity?: MessageSeverity;\n\n  /**\n   * Defines the sound to be played when opening the message\n   */\n  sound?: 'default' | 'none' | string;\n\n  /**\n   * Defines the primary text of the message\n   */\n  summary?: string;\n\n  /**\n   * Defines the timestamp for the message in ISO format\n   */\n  timestamp?: string;\n};\n\n/**\n * Props for the Message Component\n */\ntype Props<Key, Data> = {\n  /**\n   * A ref object for holding reference to this component\n   */\n  messageRef?: Ref<HTMLDivElement>;\n\n  /**\n   * The index of the current message instance\n   */\n  index?: number;\n\n  /**\n   * The message item with all the necessary data in it\n   */\n  item: Item<Key, Data>;\n\n  /**\n   * A renderer that renders the close button in the message.\n   */\n  closeButtonRenderer?: (title: string, onAction: (event?: Event) => void) => VNode;\n\n  /**\n   * A custom renderer for rendering the detail content\n   */\n  detailRenderer?: (item: MessageRendererDataItem<Key, Data>) => ComponentChildren;\n\n  /**\n   * A custom renderer for rendering the start icon\n   */\n  iconRenderer?: (item: MessageRendererDataItem<Key, Data>) => ComponentChildren;\n\n  /**\n   * Triggered when a user tries to close a message through UI interaction. The parent\n   * should listen to this event and remove the corresponding message item from the data\n   * which would then result in the message to be removed from the DOM. If the parent\n   * fails to remove the message item from the data, then no change will be done in the\n   * UI by the component.\n   */\n  onClose?: (item: Item<Key, Data>) => void;\n\n  /**\n   * A message can be a Banner message or Toast message.\n   *\n   * Furthermore, a Banner message can have a different look and feel. For example, when using page-level\n   * messaging the messages need to be rendered from edge to edge without any outline. On the other\n   * hand, when they are being used in a section of a page or a dialog, they need to be rendered\n   * with an outline. This attribute can be used to specify where the component is being used so that\n   * it will render the messages accordingly.\n   */\n  variant?: 'pageBanner' | 'sectionBanner' | 'toast';\n\n  /**\n   * Translations resources\n   */\n  translations?: {\n    /**\n     * Label for the message close button\n     */\n    close?: string;\n\n    /**\n     * Text for 'error' severity level\n     */\n    error?: string;\n\n    /**\n     * Text for 'warning' severity level\n     */\n    warning?: string;\n\n    /**\n     * Text for 'info' severity level\n     */\n    info?: string;\n\n    /**\n     * Text for 'confirmation' severity level\n     */\n    confirmation?: string;\n  };\n};\n\n/**\n * Determines the base variant of the message - banner or toast\n *\n * @param variant The message variant\n * @returns The base variant\n */\nfunction getBaseVariant(variant: 'pageBanner' | 'sectionBanner' | 'toast') {\n  if (variant === 'pageBanner' || variant === 'sectionBanner') {\n    return 'banner';\n  }\n  return 'toast';\n}\n\n/**\n * Determines if a severity icon is needed based on the component severity\n *\n * @param severity The component severity\n * @returns Whether or not to render the severity icon\n */\nfunction isSeverityIconNeeded(\n  severity: MessageSeverity\n): severity is Exclude<MessageSeverity, 'none'> {\n  const isValidSeverity = isValidValueForProp(severity, 'severity');\n  return isValidSeverity && severity !== 'none';\n}\n\n/**\n * CSS styles for various components\n */\nconst messageStyles = {\n  base: {\n    banner: cssProps`${{\n      backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-background-color)',\n      borderBottom: '1px solid var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color)',\n\n      '&:focus-visible': {\n        outlineStyle: 'dotted',\n        outlineWidth: '1px',\n        outlineColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)',\n        outlineOffset: '1px'\n      }\n    }}`,\n    toast: cssProps`${{\n      backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-message-toast-background-color)',\n      borderRadius: '6px',\n      boxShadow: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-box-shadow-sm)',\n      width: 'fit-content',\n\n      '&:focus-visible': {\n        outlineStyle: 'dotted',\n        outlineWidth: '1px',\n        outlineColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)',\n        outlineOffset: '1px'\n      }\n    }}`\n  },\n  section: cssProps`${{\n    border: '1px solid var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color)',\n    borderRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-lg)'\n  }}`,\n  // TODO: Replace with Flex and View components to handle padding and flex\n  content: {\n    base: cssProps`${{\n      alignItems: 'center',\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexWrap: 'wrap',\n      paddingTop: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x)',\n      paddingBottom: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x)'\n    }}`,\n    banner: cssProps`${{\n      paddingInlineStart:\n        'var(--oj-c-PRIVATE-DO-NOT-USE-core-gutter-start, var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x))',\n      paddingInlineEnd:\n        'var(--oj-c-PRIVATE-DO-NOT-USE-core-gutter-end, var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x))'\n    }}`,\n    toast: cssProps`${{\n      paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x)',\n      paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x)'\n    }}`\n  }\n} as const;\n\n/**\n * Default timeout duration for autoTimeout in milliseconds\n */\nconst MIN_SECONDS = 5;\nconst DEFAULT_TIMEOUT = MIN_SECONDS * 1000;\n\n/**\n * Component that renders an individual message\n */\nfunction Message<K extends string | number = string | number, D extends MessageItem = MessageItem>({\n  closeButtonRenderer,\n  detailRenderer,\n  iconRenderer,\n  index = -1,\n  item,\n  onClose,\n  messageRef = () => {},\n  variant = 'pageBanner',\n  translations\n}: Props<K, D>) {\n  const { closeAffordance = 'on', severity = 'error', sound, summary, timestamp } = item.data;\n  const { autoTimeout = 'off' } = item.data as MessageToastItem;\n  const baseVariant = getBaseVariant(variant);\n\n  /**\n   * Handles clicking on the close icon of the message\n   */\n  const handleClose = useCallback(() => {\n    onClose?.(item);\n  }, [item, onClose]);\n\n  /**\n   * Handles closing the message on pressing Esc\n   */\n  const handleCloseOnEsc = useCallback(\n    (event: KeyboardEvent) => {\n      // Close the message only when closeAffordance is on\n      if (event.key === 'Escape' && closeAffordance === 'on') {\n        onClose?.(item);\n      }\n    },\n    [closeAffordance, item, onClose]\n  );\n\n  /**\n   * Set auto timeout for toast messages\n   */\n  const shouldTimeout = baseVariant === 'toast' && autoTimeout !== 'off';\n  const currentTimerRef = useRef<Timer>();\n  const timeout = typeof autoTimeout === 'number' ? autoTimeout : DEFAULT_TIMEOUT;\n  const timeoutDuration = autoTimeout === 'on' ? DEFAULT_TIMEOUT : timeout;\n\n  const startTimer = useCallback(() => {\n    if (currentTimerRef.current) return;\n\n    currentTimerRef.current = new Timer(handleClose, timeoutDuration);\n  }, [handleClose, timeoutDuration]);\n\n  const clearTimer = useCallback(() => {\n    if (!currentTimerRef.current) return;\n\n    currentTimerRef.current.clear();\n    currentTimerRef.current = undefined;\n  }, []);\n\n  const pauseTimer = useCallback(() => {\n    currentTimerRef.current?.pause();\n  }, []);\n\n  const resumeTimer = useCallback(() => {\n    currentTimerRef.current?.resume();\n  }, []);\n\n  useEffect(() => {\n    if (isValidValueForProp(sound)) {\n      // It is sufficient to check for the value to be a\n      // non-empty string. The playSound method takes care of the rest.\n      playSound(sound);\n    }\n\n    // on mount, start timer for toast messages if needed\n    if (shouldTimeout) {\n      startTimer();\n    }\n\n    return () => {\n      // clear out any pending timer\n      clearTimer();\n    };\n    // eslint-disable-next-line\n  }, []); // No deps to run this only on mount\n\n  const rootClasses = cx([\n    messageStyles.base[baseVariant],\n    // for now, we do not have severity based styling on toast. So, we ignore this class for toasts\n    variant !== 'toast' && severityBasedStyleClass(severity, baseVariant),\n    variant === 'sectionBanner' && messageStyles.section\n  ]);\n\n  const contentClasses = cx([messageStyles.content.base, messageStyles.content[baseVariant]]);\n\n  // We will be animating the root div, so add padding to an inner wrapper div so that\n  // when animating height looks smooth. If padding were to be added to the root\n  // div, the animation will not be smooth as height will never reach 0 due to the\n  // padding.\n  return (\n    <div\n      ref={messageRef}\n      class={rootClasses}\n      role=\"alert\"\n      aria-atomic=\"true\"\n      tabIndex={0}\n      onKeyUp={handleCloseOnEsc}\n      onfocusin={pauseTimer}\n      onfocusout={resumeTimer}>\n      <div class={contentClasses}>\n        {iconRenderer ? (\n          <MessageCustomStartIcon item={{ ...item, index }} renderer={iconRenderer} />\n        ) : isSeverityIconNeeded(severity) ? (\n          <MessageStartIcon severity={severity} variant={baseVariant} translations={translations} />\n        ) : null}\n        <Flex direction=\"column\" flex=\"1\" gap=\"--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x\">\n          <MessageHeader variant={baseVariant}>\n            <MessageSummary variant={baseVariant} text={summary} />\n            {isValidValueForProp(timestamp, 'timestamp') && variant !== 'toast' && (\n              <MessageTimestamp variant={baseVariant} value={timestamp!} />\n            )}\n          </MessageHeader>\n          <MessageDetail\n            variant={baseVariant}\n            item={{ ...item, index }}\n            renderer={detailRenderer}\n          />\n        </Flex>\n        {closeAffordance === 'on' && (\n          <MessageCloseButton\n            buttonRenderer={closeButtonRenderer}\n            title={translations?.close}\n            variant={baseVariant}\n            onAction={handleClose}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport { Message };\n","/**\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 */\nexport { Message } from './Message';\nexport { MessageCloseButton } from './MessageCloseButton';\nexport { MessageDetail } from './MessageDetail';\nexport { formatTimestamp, isValidValueForProp } from './MessageFormattingUtils';\nexport { MessagesManager } from './MessagesManager';\nexport { MessageStartIcon } from './MessageStartIcon';\nexport { MessageSummary } from './MessageSummary';\nexport { MessageTimestamp } from './MessageTimestamp';\nexport {\n  getRenderer,\n  getRendererWithoutIndex,\n  playSound,\n  throwError,\n  severityBasedStyleClass,\n  isSeverityIconNeeded\n} from './MessageUtils';\nexport type { MessageSeverity, MessageRendererDataItem } from './Message.types';\nexport { severities } from './Message.types';\n"],"names":["messageStartIconStyles","MessageCustomStartIcon","item","renderer","base","toast","_jsx","Object","assign","class","classes","role","children","messageHeaderStyles","inline","undefined","MessageHeader","variant","rootClasses","classNames","getBaseVariant","isSeverityIconNeeded","severity","isValidSeverity","messageStyles","content","MIN_SECONDS","DEFAULT_TIMEOUT","Message","closeButtonRenderer","detailRenderer","iconRenderer","index","onClose","messageRef","translations","closeAffordance","sound","summary","timestamp","data","baseVariant","handleClose","useCallback","handleCloseOnEsc","event","currentTimerRef","useRef","timeout","autoTimeout","timeoutDuration","startTimer","clearTimer","current","clear","pauseTimer","_a","pause","resumeTimer","resume","isValidValueForProp","shouldTimeout","section","contentClasses","cx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAAA,sBAAA,GAAA;QAAA,UAAA;;AAAA,CAAA,CAAA;AA2BA;;AAEG;;AACH,SAAAC,sBAAA,CAAA;EAAAC,IAAA;AAAAC,EAAAA,QAAAA;AAAA,CAAA,EAAA;yCAEIH,sBAAA,CAAAI;EAEAJ,sBAAA,CAAAK;AAEF,EAAA,OAAAC,cAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAAC,IAAAA,KAAA,EAAAC,OAAA;AAAAC,IAAAA,IAAA,EAAA,cAAA;AAAA,GAAA,EAAA;IAAAC,QAAA,EAAAT,QAAA,CAAAD,IAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAKF;;ACzCA,MAAAW,mBAAA,GAAA;QAAA,QAAA;UAAA,SAAA;AAeEC,EAAAA,MAAA,EAAAC,SAfF;;AAAA,CAAA,CAAA;AA4BA;;;;AAIG;;AACH,SAAAC,aAAA,CAAA;EAAAJ,QAAA;AAAAK,EAAAA,OAAA,GAAA,QAAA;AAAA,CAAA,EAAA;AACE,EAAA,MAAAC,WAAA,GAAAC,qBAAA,CAAA,CAAAN,mBAAA,CAAAT,IAAA,EAAAS,mBAAA,CAAAI,OAAA,CAAA,CAAA,CAAA,CAAA;AACA,EAAA,OAAAX,cAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAAG,IAAAA,IAAA,EAAA,cAAA;AAAAF,IAAAA,KAAA,EAAAS,WAAAA;AAAA,GAAA,EAAA;AAAAN,IAAAA,QAAA,EAAAA,QAAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAKF;;ACkGA;;;;;AAKG;;AACH,SAAAQ,cAAA,CAAAH,OAAA,EAAA;AACE,EAAA,IAAAA,OAAA,KAAA,YAAA,IAAAA,OAAA,KAAA,eAAA,EAAA;AACE,IAAA,OAAA,QAAA,CAAA;AACD,GAAA;;AACD,EAAA,OAAA,OAAA,CAAA;AACF,CAAA;AAEA;;;;;AAKG;;;AACH,SAAAI,oBAAA,CAAAC,QAAA,EAAA;;AAIE,EAAA,OAAAC,eAAA,IAAAD,QAAA,KAAA,MAAA,CAAA;AACF,CAAA;AAEA;;AAEG;;;AACH,MAAAE,aAAA,GAAA;AACEpB,EAAAA,IAAA,EAAA;YAAA,UAAA;;GADF;WAAA,UAAA;;AAgCEqB,EAAAA,OAAA,EAAA;UAAA,SAAA;YAAA,UAAA;;AAAA,GAAA;AAhCF,CAAA,CAAA;AAsDA;;AAEG;;AACH,MAAAC,WAAA,GAAA,CAAA,CAAA;AACA,MAAAC,eAAA,GAAAD,WAAA,GAAA,IAAA,CAAA;AAEA;;AAEG;;AACH,SAAAE,OAAA,CAAA;EAAAC,mBAAA;EAAAC,cAAA;EAAAC,YAAA;EAAAC,KAAA,GAAA,CAAA,CAAA;EAAA9B,IAAA;EAAA+B,OAAA;EAAAC,UAAA,GAAA,MAAA,EAAA;AAAAjB,EAAAA,OAAA,GAAA,YAAA;AAAAkB,EAAAA,YAAAA;AAAA,CAAA,EAAA;EAWE,MAAA;AAAAC,IAAAA,eAAA,GAAA,IAAA;AAAAd,IAAAA,QAAA,GAAA,OAAA;IAAAe,KAAA;IAAAC,OAAA;AAAAC,IAAAA,SAAAA;GAAArC,GAAAA,IAAA,CAAAsC,IAAA,CAAA;;;;AAEA,EAAA,MAAAC,WAAA,GAAArB,cAAA,CAAAH,OAAA,CAAA,CAAA;AAEA;;AAEG;;AACH,EAAA,MAAAyB,WAAA,GAAAC,iBAAA,CAAA,MAAA;AACEV,IAAAA,OAAA,KAAA,IAAA,IAAAA,OAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAA,CAAA/B,IAAA,CAAA,CAAA;AACF,GAFA,EAEA,CAAAA,IAAA,EAAA+B,OAAA,CAFA,CAAA,CAAA;AAIA;;AAEG;;AACH,EAAA,MAAAW,gBAAA,GAAAD,iBAAA,CAAAE,KAAA,IAAA;;;AAIMZ,MAAAA,OAAA,KAAA,IAAA,IAAAA,OAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAA,CAAA/B,IAAA,CAAA,CAAA;AACD,KAAA;GALL,kCAAA,CAAA,CAAA;AAUA;;AAEG;;;EAEH,MAAA4C,eAAA,GAAAC,YAAA,EAAA,CAAA;EACA,MAAAC,OAAA,GAAA,OAAAC,WAAA,KAAA,QAAA,GAAAA,WAAA,GAAAtB,eAAA,CAAA;EACA,MAAAuB,eAAA,GAAAD,WAAA,KAAA,IAAA,GAAAtB,eAAA,GAAAqB,OAAA,CAAA;AAEA,EAAA,MAAAG,UAAA,GAAAR,iBAAA,CAAA,MAAA;;;AAIA,GAJA,EAIA,CAAAD,WAAA,EAAAQ,eAAA,CAJA,CAAA,CAAA;AAMA,EAAA,MAAAE,UAAA,GAAAT,iBAAA,CAAA,MAAA;;IAGEG,eAAA,CAAAO,OAAA,CAAAC,KAAA,EAAA,CAAA;IACAR,eAAA,CAAAO,OAAA,GAAAtC,SAAA,CAAA;GAJF,IAAA,CAAA,CAAA;AAOA,EAAA,MAAAwC,UAAA,GAAAZ,iBAAA,CAAA,MAAA;;;AACE,IAAA,CAAAa,EAAA,GAAAV,eAAA,CAAAO,OAAA,MAAA,IAAA,IAAAG,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAC,KAAA,EAAA,CAAA;GADF,IAAA,CAAA,CAAA;AAIA,EAAA,MAAAC,WAAA,GAAAf,iBAAA,CAAA,MAAA;;;AACE,IAAA,CAAAa,EAAA,GAAAV,eAAA,CAAAO,OAAA,MAAA,IAAA,IAAAG,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAG,MAAA,EAAA,CAAA;GADF,IAAA,CAAA,CAAA;;AAKE,IAAA,IAAAC,0CAAA,CAAAvB,KAAA,CAAA,EAAA;;;;AAIC;;;AAGD,IAAA,IAAAwB,aAAA,EAAA;MACEV,UAAA,EAAA,CAAA;AACD,KAAA;;AAED,IAAA,OAAA,MAAA;;MAEEC,UAAA,EAAA,CAAA;AACF,KAHA;AAKF,KAAA,IAjFF;;6CAoFI5B,aAAA,CAAApB,IAAA,CAAAqC,WAAA;sFAGAxB,OAAA,KAAA,eAAA,IAAAO,aAAA,CAAAsC;EAGF,MAAAC,cAAA,GAAAC,qBAAA,CAAA,CAAAxC,aAAA,CAAAC,OAAA,CAAArB,IAAA,EAAAoB,aAAA,CAAAC,OAAA,CAAAgB,WAAA,CAAA,CAAA,CAAA,CA1FF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwIA;;AC3XA;;;;;;AAMG;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/PRIVATE_MessageLayer/__tests__/MessageLayer.spec.js

@@ -1,4 +1,4 @@
-/* @oracle/oraclejet-preact: 14.1.5 */
+/* @oracle/oraclejet-preact: 14.1.6 */
 'use strict';
 
 var jsxRuntime = require('preact/jsx-runtime');
@@ -6,7 +6,7 @@ var preact = require('@testing-library/preact');
 var chai = require('chai');
 var utils_UNSAFE_matchTranslationBundle = require('../../utils/UNSAFE_matchTranslationBundle.js');
 var UNSAFE_Environment = require('../../UNSAFE_Environment.js');
-var MessageLayer = require('../../MessageLayer-282aea10.js');
+var MessageLayer = require('../../MessageLayer-4c743536.js');
 require('preact');
 require('preact/hooks');
 require('../../UNSAFE_Layer.js');
@@ -15,23 +15,23 @@ require("identity-obj-proxy");
 require('../../hooks/UNSAFE_useUser.js');
 require('../../utils/UNSAFE_arrayUtils.js');
 require('../../utils/UNSAFE_classNames.js');
-require('../../classNames-6fde8385.js');
+require('../../classNames-b5a9df09.js');
 require('../../UNSAFE_Flex.js');
-require('../../Flex-63a59c1e.js');
-require('../../tslib.es6-4644506a.js');
+require('../../Flex-f0986956.js');
+require('../../tslib.es6-942e45a7.js');
 require('../../utils/UNSAFE_interpolations/dimensions.js');
 require('../../utils/UNSAFE_size.js');
-require('../../_curry1-a14e4710.js');
+require('../../_curry1-b198128d.js');
 require('../../utils/UNSAFE_mergeInterpolations.js');
-require('../../_curry3-139befa2.js');
-require('../../_curry2-2b493ed4.js');
-require('../../_has-85ac73af.js');
+require('../../_curry3-61f88672.js');
+require('../../_curry2-29bebe59.js');
+require('../../_has-f1803a3e.js');
 require('../../utils/UNSAFE_interpolations/boxalignment.js');
-require('../../keys-fd3d0c12.js');
+require('../../keys-99928221.js');
 require('../../utils/UNSAFE_interpolations/flexbox.js');
-require('../../flexbox-58400f0a.js');
+require('../../flexbox-b9d170fe.js');
 require('../../utils/UNSAFE_interpolations/flexitem.js');
-require('../../flexitem-79a2dbd0.js');
+require('../../flexitem-b82cec9d.js');
 require('../../UNSAFE_WindowOverlay.js');
 
 function __variableDynamicImportRuntime0__(path) {

package/cjs/PRIVATE_MessageLayer.js

@@ -1,9 +1,9 @@
-/* @oracle/oraclejet-preact: 14.1.5 */
+/* @oracle/oraclejet-preact: 14.1.6 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var MessageLayer = require('./MessageLayer-282aea10.js');
+var MessageLayer = require('./MessageLayer-4c743536.js');
 require('preact/jsx-runtime');
 require("identity-obj-proxy");
 require('./hooks/UNSAFE_useUser.js');
@@ -14,23 +14,23 @@ require('./UNSAFE_Layer.js');
 require('preact/compat');
 require('./utils/UNSAFE_arrayUtils.js');
 require('./utils/UNSAFE_classNames.js');
-require('./classNames-6fde8385.js');
+require('./classNames-b5a9df09.js');
 require('./UNSAFE_Flex.js');
-require('./Flex-63a59c1e.js');
-require('./tslib.es6-4644506a.js');
+require('./Flex-f0986956.js');
+require('./tslib.es6-942e45a7.js');
 require('./utils/UNSAFE_interpolations/dimensions.js');
 require('./utils/UNSAFE_size.js');
-require('./_curry1-a14e4710.js');
+require('./_curry1-b198128d.js');
 require('./utils/UNSAFE_mergeInterpolations.js');
-require('./_curry3-139befa2.js');
-require('./_curry2-2b493ed4.js');
-require('./_has-85ac73af.js');
+require('./_curry3-61f88672.js');
+require('./_curry2-29bebe59.js');
+require('./_has-f1803a3e.js');
 require('./utils/UNSAFE_interpolations/boxalignment.js');
-require('./keys-fd3d0c12.js');
+require('./keys-99928221.js');
 require('./utils/UNSAFE_interpolations/flexbox.js');
-require('./flexbox-58400f0a.js');
+require('./flexbox-b9d170fe.js');
 require('./utils/UNSAFE_interpolations/flexitem.js');
-require('./flexitem-79a2dbd0.js');
+require('./flexitem-b82cec9d.js');
 require('./UNSAFE_WindowOverlay.js');
 
 

package/cjs/PRIVATE_Meter.js

@@ -1,9 +1,9 @@
-/* @oracle/oraclejet-preact: 14.1.5 */
+/* @oracle/oraclejet-preact: 14.1.6 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-4644506a.js');
+var tslib_es6 = require('./tslib.es6-942e45a7.js');
 var jsxRuntime = require('preact/jsx-runtime');
 var compat = require('preact/compat');