@oracle/oraclejet-preact 14.0.0

package/cjs/Chip-81ae6291.js

@@ -0,0 +1,61 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks_UNSAFE_useActionable = require('./hooks/UNSAFE_useActionable.js');
+
+var hooks = require('preact/hooks');
+require('./utils/UNSAFE_classNames.js');
+var hooks_UNSAFE_useTabbableMode = require('./hooks/UNSAFE_useTabbableMode.js');
+var classNames = require('./classNames-825d80d7.js');
+
+const cursorandFocusStyle = "ncvcxe";
+const styles = {
+  base: "_1725rms",
+  disabled: "_1rtfypc",
+  info: "m804v4",
+  infoSubtle: "p6nebi",
+  infoSubtleLighter: "_1g0t0xa",
+  childrenMargins: "_9prc2f"
+};
+function Chip({
+  isSelected,
+  isDisabled,
+  accessibleLabel,
+  children,
+  onToggle
+}) {
+  const handleAction = hooks.useCallback(() => {
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle({
+      previousValue: isSelected,
+      value: !isSelected
+    });
+  }, [isSelected, onToggle]);
+  const {
+    actionableProps,
+    isHover,
+    isActive
+  } = hooks_UNSAFE_useActionable.useActionable(handleAction);
+  const variant = isDisabled ? 'disabled' : isSelected || isActive ? 'info' : isHover ? 'infoSubtle' : 'infoSubtleLighter';
+  const classes = classNames.classNames([styles.base, isDisabled ? styles.disabled : `${styles.base} ${styles[variant]} ${cursorandFocusStyle}`, styles.childrenMargins]);
+  const {
+    isTabbable
+  } = hooks_UNSAFE_useTabbableMode.useTabbableMode();
+  return isDisabled ? jsxRuntime.jsx("div", Object.assign({
+    class: classes
+  }, {
+    children: children
+  })) : jsxRuntime.jsx("div", Object.assign({}, actionableProps, {
+    class: classes,
+    tabIndex: isTabbable ? 0 : -1,
+    "aria-label": accessibleLabel,
+    role: "switch",
+    "aria-checked": isSelected ? 'true' : 'false'
+  }, {
+    children: children
+  }));
+}
+
+exports.Chip = Chip;
+/*  */
+//# sourceMappingURL=Chip-81ae6291.js.map

package/cjs/Chip-81ae6291.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip-81ae6291.js","sources":["../../src/UNSAFE_Chip/Chip.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 */\nimport { useActionable } from '../hooks/UNSAFE_useActionable';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useCallback } from 'preact/hooks';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\n\nconst cursorandFocusStyle = cssProps`${{\n  cursor: 'var( --oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable)',\n  '&:focus-visible': {\n    outlineColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)',\n    outlineStyle: 'dotted',\n    outlineWidth: '1px',\n    outlineOffset: '1px'\n  }\n}}`;\n\nconst styles = {\n  base: cssProps`${{\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-chip-bg-color)',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-chip-text-color)',\n    display: 'inline-block',\n    paddingTop: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x)',\n    paddingRight: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x)',\n    paddingBottom: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x)',\n    paddingLeft: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x)',\n    boxSizing: 'border-box',\n    borderTopLeftRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-chip-border-radius)',\n    borderTopRightRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-chip-border-radius)',\n    borderBottomRightRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-chip-border-radius)',\n    borderBottomLeftRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-chip-border-radius)',\n    height: '2rem',\n    minWidth: '2rem',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-chip-line-height)',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-chip-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-chip-font-weight)',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n    textAlign: 'center'\n  }}`,\n  disabled: cssProps`${{\n    '--oj-c-PRIVATE-DO-NOT-USE-chip-bg-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-color-disabled-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-chip-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled)'\n  }}`,\n  info: cssProps`${{\n    '--oj-c-PRIVATE-DO-NOT-USE-chip-bg-color': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-info-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-chip-text-color': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-info-contrast)'\n  }}`,\n  infoSubtle: cssProps`${{\n    '--oj-c-PRIVATE-DO-NOT-USE-chip-bg-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-info-secondary-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-chip-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-info-secondary-contrast)'\n  }}`,\n  infoSubtleLighter: cssProps`${{\n    '--oj-c-PRIVATE-DO-NOT-USE-chip-bg-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-info-secondary-3)',\n    '--oj-c-PRIVATE-DO-NOT-USE-chip-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-info-secondary-contrast)'\n  }}`,\n\n  childrenMargins: cssProps`${{\n    /* @ts-ignore */\n    '& > *': {\n      marginTop: '0 !important',\n      marginBottom: '0 !important',\n      marginLeft: '0 !important',\n      marginRight: '0 !important'\n    }\n  }}`\n};\n\ntype SelectedChangeDetail = { previousValue?: boolean; value?: boolean };\n\ntype Props = {\n  /**\n   * Specifies if the chip component is selected.\n   */\n  isSelected?: boolean;\n  /**\n   * Disables the component.\n   */\n  isDisabled?: boolean;\n  /**\n   * Specifies some screen reader text.\n   */\n  accessibleLabel?: string;\n  children: string;\n  /**\n   * Triggered when a chip is clickable, whether by keyboard, mouse, or touch events.\n   */\n  onToggle?: (detail: SelectedChangeDetail) => void;\n  //\n};\n\nexport function Chip({ isSelected, isDisabled, accessibleLabel, children, onToggle }: Props) {\n  const handleAction = useCallback(() => {\n    onToggle?.({ previousValue: isSelected, value: !isSelected });\n  }, [isSelected, onToggle]);\n\n  const { actionableProps, isHover, isActive } = useActionable(handleAction);\n\n  const variant = isDisabled\n    ? 'disabled'\n    : isSelected || isActive\n    ? 'info'\n    : isHover\n    ? 'infoSubtle'\n    : 'infoSubtleLighter';\n\n  const classes = classNames([\n    styles.base,\n    isDisabled ? styles.disabled : `${styles.base} ${styles[variant]} ${cursorandFocusStyle}`,\n    styles.childrenMargins\n  ]);\n  const { isTabbable } = useTabbableMode();\n\n  return isDisabled ? (\n    <div class={classes}>{children}</div>\n  ) : (\n    <div\n      {...actionableProps}\n      class={classes}\n      tabIndex={isTabbable ? 0 : -1}\n      aria-label={accessibleLabel}\n      role=\"switch\"\n      aria-checked={isSelected ? 'true' : 'false'}>\n      {children}\n    </div>\n  );\n}\n"],"names":["cursorandFocusStyle","styles","Chip","isSelected","isDisabled","accessibleLabel","children","onToggle","handleAction","useCallback","previousValue","value","actionableProps","isHover","isActive","useActionable","base","childrenMargins","isTabbable","useTabbableMode"],"mappings":";;;;;;;;;;;AAaA,MAAAA,mBAAA,GAAA,QAAA,CAAA;AAUA,MAAAC,MAAA,GAAA;QAAA,UAAA;YAAA,UAAA;QAAA,QAAA;cAAA,QAAA;qBAAA,UAAA;;AAAA,CAAA,CAAA;AAkFA,SAAAC,IAAA,CAAA;EAAAC,UAAA;EAAAC,UAAA;EAAAC,eAAA;EAAAC,QAAA;AAAAC,EAAAA,QAAAA;AAAA,CAAA,EAAA;AACE,EAAA,MAAAC,YAAA,GAAAC,iBAAA,CAAA,MAAA;AACEF,IAAAA,QAAA,KAAA,IAAA,IAAAA,QAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,QAAA,CAAA;AAAAG,MAAAA,aAAA,EAAAP,UAAA;AAAAQ,MAAAA,KAAA,EAAA,CAAAR,UAAAA;AAAA,KAAA,CAAA,CAAA;AACF,GAFA,EAEA,CAAAA,UAAA,EAAAI,QAAA,CAFA,CAAA,CAAA;EAIA,MAAA;IAAAK,eAAA;IAAAC,OAAA;AAAAC,IAAAA,QAAAA;GAAAC,GAAAA,wCAAA,CAAAP,YAAA,CAAA,CAAA;+BAGE,sCAEA,SACAK,OAAA,GACA,YADA;yCAKAZ,MAAA,CAAAe,iGAEAf,MAAA,CAAAgB;EAEF,MAAA;AAAAC,IAAAA,UAAAA;AAAA,GAAA,GAAAC,4CAAA,EAAA,CAAA;;;;;;;;;;;;;;AAeF;;;;;;;"}

package/cjs/ClearIcon-e69da23b.js

@@ -0,0 +1,62 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+
+var hooks = require('preact/hooks');
+var hooks_UNSAFE_usePress = require('./hooks/UNSAFE_usePress.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+
+const ojButtonHeight = '2.75rem'; // TODO: replace this with var(--oj-button-border-radius) once it is available
+
+const ojButtonBorderRadius = 'var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-md)'; // TODO: replace this with var(--oj-button-borderless-chrome-text-color) once it is available
+
+const ojButtonBorderlessChromeTextColor = 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary)'; // TODO: replace this with var(--oj-button-borderless-chrome-text-color-hover) once it is available
+
+const ojButtonBorderlessChromeTextColorHover = 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary)'; // TODO: replace this with var(--oj-button-borderless-chrome-bg-color-hover) once it is available
+
+const ojButtonBorderlessChromeBgColorHover = 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover)'; // TODO: replace this with var(--oj-button-borderless-chrome-border-color-hover) once it is available
+
+const ojButtonBorderlessChromeBorderColorHover = 'transparent';
+const clearIconStyles = {
+  base: "m9zyeh"
+};
+
+const noop = () => {};
+
+function ClearIcon({
+  onClick
+}) {
+  const killEvent = hooks.useCallback(event => {
+    event.preventDefault();
+  }, []);
+  const {
+    pressProps
+  } = hooks_UNSAFE_usePress.usePress(onClick !== null && onClick !== void 0 ? onClick : noop);
+  const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+  const clearStr = translations.formControl_clear();
+  return jsxRuntime.jsx("span", Object.assign({
+    "aria-hidden": "true",
+    class: clearIconStyles.base,
+    tabIndex: -1,
+    onMouseDown: killEvent,
+    title: clearStr
+  }, pressProps, {
+    children: jsxRuntime.jsx("svg", Object.assign({
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, {
+      children: jsxRuntime.jsx("path", {
+        d: "m12 1c6.065 0 11 4.935 11 11s-4.935 11-11 11-11-4.935-11-11 4.935-11 11-11zm3.4979817 6-3.4979817 3.498-3.49798173-3.498-1.50201827 1.50201827 3.498 3.49798173-3.498 3.4979817 1.50201827 1.5020183 3.49798173-3.498 3.4979817 3.498 1.5020183-1.5020183-3.498-3.4979817 3.498-3.49798173z",
+        fill: "#100f0e",
+        "fill-rule": "evenodd"
+      })
+    }))
+  }));
+}
+
+exports.ClearIcon = ClearIcon;
+/*  */
+//# sourceMappingURL=ClearIcon-e69da23b.js.map

package/cjs/ClearIcon-e69da23b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearIcon-e69da23b.js","sources":["../../src/UNSAFE_InputText/ClearIcon.tsx"],"sourcesContent":["import { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useCallback } from 'preact/hooks';\nimport { usePress } from '../hooks/UNSAFE_usePress';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\n\ntype Props = {\n  onClick?: () => void;\n};\n\n// TODO: replace this with var(--oj-button-height) once it is available\nconst ojButtonHeight = '2.75rem';\n// TODO: replace this with var(--oj-button-border-radius) once it is available\nconst ojButtonBorderRadius = 'var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-md)';\n// TODO: replace this with var(--oj-button-borderless-chrome-text-color) once it is available\nconst ojButtonBorderlessChromeTextColor = 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary)';\n// TODO: replace this with var(--oj-button-borderless-chrome-text-color-hover) once it is available\nconst ojButtonBorderlessChromeTextColorHover =\n  'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary)';\n// TODO: replace this with var(--oj-button-borderless-chrome-bg-color-hover) once it is available\nconst ojButtonBorderlessChromeBgColorHover = 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover)';\n// TODO: replace this with var(--oj-button-borderless-chrome-border-color-hover) once it is available\nconst ojButtonBorderlessChromeBorderColorHover = 'transparent';\n\nconst clearIconStyles = {\n  base: cssProps`${{\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    cursor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable)',\n\n    paddingInline: 0,\n    paddingBlock: 0,\n    borderRadius: ojButtonBorderRadius,\n    color: ojButtonBorderlessChromeTextColor,\n\n    width: ojButtonHeight,\n    height: ojButtonHeight,\n    lineHeight: ojButtonHeight,\n\n    '&:hover': {\n      color: ojButtonBorderlessChromeTextColorHover,\n      backgroundColor: ojButtonBorderlessChromeBgColorHover,\n      borderColor: ojButtonBorderlessChromeBorderColorHover\n    }\n  }}}`\n};\n\nconst noop = () => {};\n\nexport function ClearIcon({ onClick }: Props) {\n  const killEvent = useCallback((event: Event) => {\n    event.preventDefault();\n  }, []);\n  const { pressProps } = usePress(onClick ?? noop);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const clearStr = translations.formControl_clear();\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      class={clearIconStyles.base}\n      tabIndex={-1}\n      onMouseDown={killEvent}\n      title={clearStr}\n      {...pressProps}>\n      <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"m12 1c6.065 0 11 4.935 11 11s-4.935 11-11 11-11-4.935-11-11 4.935-11 11-11zm3.4979817 6-3.4979817 3.498-3.49798173-3.498-1.50201827 1.50201827 3.498 3.49798173-3.498 3.4979817 1.50201827 1.5020183 3.49798173-3.498 3.4979817 3.498 1.5020183-1.5020183-3.498-3.4979817 3.498-3.49798173z\"\n          fill=\"#100f0e\"\n          fill-rule=\"evenodd\"\n        />\n      </svg>\n    </span>\n  );\n}\n"],"names":["ojButtonHeight","ojButtonBorderRadius","ojButtonBorderlessChromeTextColor","ojButtonBorderlessChromeTextColorHover","ojButtonBorderlessChromeBgColorHover","ojButtonBorderlessChromeBorderColorHover","clearIconStyles","noop","ClearIcon","onClick","killEvent","useCallback","event","pressProps","usePress","translations","useTranslationBundle","clearStr","formControl_clear"],"mappings":";;;;;;;;;AAWA,MAAAA,cAAA,GAAA,SAAA;;AAEA,MAAAC,oBAAA,GAAA,sDAAA;;AAEA,MAAAC,iCAAA,GAAA,wDAAA;;AAEA,MAAAC,sCAAA,GAAA,wDAAA;;AAGA,MAAAC,oCAAA,GAAA,oDAAA;;AAEA,MAAAC,wCAAA,GAAA,aAAA,CAAA;AAEA,MAAAC,eAAA,GAAA;;AAAA,CAAA,CAAA;;AAwBA,MAAAC,IAAA,GAAA,MAAA,EAAA,CAAA;;AAEA,SAAAC,SAAA,CAAA;AAAAC,EAAAA,OAAAA;AAAA,CAAA,EAAA;AACE,EAAA,MAAAC,SAAA,GAAAC,iBAAA,CAAAC,KAAA,IAAA;;GAAA,IAAA,CAAA,CAAA;EAGA,MAAA;AAAAC,IAAAA,UAAAA;AAAA,GAAA,GAAAC,8BAAA,CAAAL,OAAA,KAAA,IAAA,IAAAA,OAAA,KAAA,KAAA,CAAA,GAAAA,OAAA,GAAAF,IAAA,CAAA,CAAA;AACA,EAAA,MAAAQ,YAAA,GAAAC,sDAAA,CAAA,0BAAA,CAAA,CAAA;AACA,EAAA,MAAAC,QAAA,GAAAF,YAAA,CAAAG,iBAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;AAmBF;;;;;;;"}

package/cjs/Collection-1173258f.js

@@ -0,0 +1,19 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+
+/**
+ * Component that renders an array of data.
+ */
+function Collection({ items, children }) {
+    return (jsxRuntime.jsx(preact.Fragment, { children: items.map((data, index) => {
+            const ctx = { index, data };
+            return children(ctx);
+        }) }));
+}
+
+exports.Collection = Collection;
+/*  */
+//# sourceMappingURL=Collection-1173258f.js.map

package/cjs/Collection-1173258f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collection-1173258f.js","sources":["../../src/PRIVATE_Collection/Collection.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 */\nimport { ComponentChildren, Fragment } from 'preact';\nimport { ItemContext } from '../UNSAFE_Collection';\n\n/**\n * Props for the Collection Component\n */\nexport type Props<D> = {\n  /**\n   * An array of data\n   */\n  items: D[];\n  /**\n   * A function to render each item\n   */\n  children: (context: ItemContext<D>) => ComponentChildren;\n};\n\n/**\n * Component that renders an array of data.\n */\nexport function Collection<D>({ items, children }: Props<D>) {\n  return (\n    <Fragment>\n      {items.map((data: D, index: number) => {\n        const ctx = { index, data };\n        return children(ctx);\n      })}\n    </Fragment>\n  );\n}\n"],"names":["_jsx","Fragment"],"mappings":";;;;;;AAwBA;;AAEG;SACa,UAAU,CAAI,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAA;AACzD,IAAA,QACEA,cAAA,CAACC,eAAQ,EAAA,EAAA,QAAA,EACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAO,EAAE,KAAa,KAAI;AACpC,YAAA,MAAM,GAAG,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAC5B,YAAA,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;SACtB,CAAC,EACO,CAAA,EACX;AACJ;;;;;;;"}

package/cjs/ComponentMessage-f6262ee7.js

@@ -0,0 +1,54 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+require('./PRIVATE_Message.js');
+require('./UNSAFE_HiddenAccessible.js');
+require('./utils/UNSAFE_classNames.js');
+var classNames = require('./classNames-825d80d7.js');
+var MessageUtils = require('./MessageUtils-c41ab02b.js');
+var HiddenAccessible = require('./HiddenAccessible-d796baa9.js');
+var MessageStartIcon = require('./MessageStartIcon-aab13995.js');
+var MessageSummary = require('./MessageSummary-e3c976d2.js');
+
+const baseStyles = "_1lfv7q";
+/**
+ * The component that renders an individual message for inline component messaging.
+ */
+
+function ComponentMessage({
+  detail,
+  fieldLabel,
+  severity = 'error'
+}) {
+  const classes = classNames.classNames([baseStyles, MessageUtils.severityBasedStyleClass(severity, 'inline')]);
+  const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+  const severityTranslations = {
+    confirmation: translations.confirmation(),
+    error: translations.error(),
+    info: translations.info(),
+    warning: translations.warn()
+  };
+  return jsxRuntime.jsxs("div", Object.assign({
+    class: classes,
+    role: "alert",
+    "aria-atomic": "true"
+  }, {
+    children: [fieldLabel && jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, {
+      children: fieldLabel
+    }), MessageUtils.isSeverityIconNeeded(severity) && jsxRuntime.jsx(MessageStartIcon.MessageStartIcon, {
+      variant: "inline",
+      severity: severity,
+      translations: severityTranslations
+    }), jsxRuntime.jsx(MessageSummary.MessageSummary, {
+      variant: "inline",
+      text: detail
+    })]
+  }));
+}
+
+exports.ComponentMessage = ComponentMessage;
+/*  */
+//# sourceMappingURL=ComponentMessage-f6262ee7.js.map

package/cjs/ComponentMessage-f6262ee7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentMessage-f6262ee7.js","sources":["../../src/UNSAFE_ComponentMessage/ComponentMessage.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 */\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport {\n  isSeverityIconNeeded,\n  MessageStartIcon,\n  MessageSummary,\n  severityBasedStyleClass\n} from '../PRIVATE_Message';\nimport { BundleType } from '../resources/nls/bundle';\nimport { HiddenAccessible } from '../UNSAFE_HiddenAccessible';\nimport { classNames } from '../utils/UNSAFE_classNames';\n\nconst baseStyles = cssProps`${{\n  boxSizing: 'border-box',\n  // TODO: Use Flex Component instead of CSS\n  display: 'flex',\n  flexWrap: 'wrap'\n}}`;\n\n/**\n * A type for a single component message\n */\nexport type ComponentMessageItem = {\n  summary?: string;\n  detail?: string;\n  severity?: 'confirmation' | 'error' | 'info' | 'warning';\n};\n\n/**\n * Props for the Message Component\n */\ntype Props = {\n  /**\n   * The error detail text for the component message\n   */\n  detail?: ComponentMessageItem['detail'];\n\n  /**\n   * The label of the field which is showing this error\n   */\n  fieldLabel?: string;\n\n  /**\n   * The severity of the component message\n   */\n  severity?: ComponentMessageItem['severity'];\n};\n\n/**\n * The component that renders an individual message for inline component messaging.\n */\nexport function ComponentMessage({ detail, fieldLabel, severity = 'error' }: Props) {\n  const classes = classNames([baseStyles, severityBasedStyleClass(severity, 'inline')]);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const severityTranslations = {\n    confirmation: translations.confirmation(),\n    error: translations.error(),\n    info: translations.info(),\n    warning: translations.warn()\n  };\n\n  return (\n    <div class={classes} role=\"alert\" aria-atomic=\"true\">\n      {fieldLabel && <HiddenAccessible>{fieldLabel}</HiddenAccessible>}\n      {isSeverityIconNeeded(severity) && (\n        <MessageStartIcon\n          variant=\"inline\"\n          severity={severity}\n          translations={severityTranslations}\n        />\n      )}\n      {/* We will be using the MessageSummary component, as this aligns with the style required */}\n      <MessageSummary variant=\"inline\" text={detail} />\n    </div>\n  );\n}\n"],"names":["baseStyles","ComponentMessage","detail","fieldLabel","severity","classes","classNames","severityBasedStyleClass","translations","useTranslationBundle","severityTranslations","confirmation","error","info","warning","warn"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAAA,UAAA,GAAA,SAAA,CAAA;AAoCA;;AAEG;;AACH,SAAAC,gBAAA,CAAA;EAAAC,MAAA;EAAAC,UAAA;AAAAC,EAAAA,QAAA,GAAA,OAAA;AAAA,CAAA,EAAA;AACE,EAAA,MAAAC,OAAA,GAAAC,qBAAA,CAAA,CAAAN,UAAA,EAAAO,oCAAA,CAAAH,QAAA,EAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AACA,EAAA,MAAAI,YAAA,GAAAC,sDAAA,CAAA,0BAAA,CAAA,CAAA;AACA,EAAA,MAAAC,oBAAA,GAAA;AACEC,IAAAA,YAAA,EAAAH,YAAA,CAAAG,YAAA,EADF;AAEEC,IAAAA,KAAA,EAAAJ,YAAA,CAAAI,KAAA,EAFF;AAGEC,IAAAA,IAAA,EAAAL,YAAA,CAAAK,IAAA,EAHF;IAIEC,OAAA,EAAAN,YAAA,CAAAO,IAAA,EAAA;GAJF,CAAA;;;;;;;;;;;;;;;;;AAqBF;;;;;;;"}

package/cjs/ComponentMessageContainer-010eb00c.js

@@ -0,0 +1,54 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+
+require('./PRIVATE_Message.js');
+var ComponentMessage = require('./ComponentMessage-f6262ee7.js');
+var MessagesManager = require('./MessagesManager-ae82966c.js');
+
+const rootStyles = "u1i9r9";
+/**
+ * Converts the messages data into Item
+ *
+ * @param messages The messages data passed down as prop
+ * @returns The messages data as Item
+ */
+
+function generateMessagesData(messages) {
+  return messages.map((message, index) => {
+    return {
+      key: index,
+      data: {
+        closeAffordance: 'off',
+        severity: message.severity || 'error',
+        detail: message.detail
+      }
+    };
+  });
+}
+
+function ComponentMessageContainer({
+  fieldLabel,
+  messages = []
+}) {
+  return jsxRuntime.jsx("div", Object.assign({
+    class: rootStyles
+  }, {
+    children: jsxRuntime.jsx(MessagesManager.MessagesManager, Object.assign({
+      data: generateMessagesData(messages)
+    }, {
+      children: ({
+        item
+      }) => jsxRuntime.jsx(ComponentMessage.ComponentMessage, {
+        detail: item.data.detail,
+        fieldLabel: fieldLabel,
+        severity: item.data.severity
+      }, item.key)
+    }))
+  }));
+}
+
+exports.ComponentMessageContainer = ComponentMessageContainer;
+/*  */
+//# sourceMappingURL=ComponentMessageContainer-010eb00c.js.map

package/cjs/ComponentMessageContainer-010eb00c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentMessageContainer-010eb00c.js","sources":["../../src/UNSAFE_ComponentMessage/ComponentMessageContainer.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 */\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { MessagesManager } from '../PRIVATE_Message';\nimport { Item } from '../utils/UNSAFE_dataProvider';\nimport { ComponentMessage, ComponentMessageItem } from './ComponentMessage';\n\nconst rootStyles = cssProps`${{\n  overflowX: 'hidden',\n  overflowY: 'hidden'\n}}`;\n\n/**\n * Converts the messages data into Item\n *\n * @param messages The messages data passed down as prop\n * @returns The messages data as Item\n */\nfunction generateMessagesData(messages: ComponentMessageItem[]) {\n  return messages.map<Item<number, ComponentMessageItem>>((message, index) => {\n    return {\n      key: index,\n      data: {\n        closeAffordance: 'off',\n        severity: message.severity || 'error',\n        detail: message.detail\n      }\n    };\n  });\n}\n\n/**\n * Props for the ComponentMessaging component\n */\ntype Props = {\n  /**\n   * The label of the field which is showing this error\n   */\n  fieldLabel?: string;\n\n  /**\n   * Data for the messages. This data is used for rendering each message.\n   */\n  messages?: ComponentMessageItem[];\n};\n\nexport function ComponentMessageContainer({ fieldLabel, messages = [] }: Props) {\n  return (\n    <div class={rootStyles}>\n      <MessagesManager data={generateMessagesData(messages)}>\n        {({ item }) => (\n          <ComponentMessage\n            key={item.key}\n            detail={item.data.detail}\n            fieldLabel={fieldLabel}\n            severity={item.data.severity}\n          />\n        )}\n      </MessagesManager>\n    </div>\n  );\n}\n"],"names":["rootStyles","generateMessagesData","messages","key","index","data","closeAffordance","severity","message","ComponentMessageContainer","fieldLabel"],"mappings":";;;;;;;;;AAYA,MAAAA,UAAA,GAAA,QAAA,CAAA;AAKA;;;;;AAKG;;AACH,SAAAC,oBAAA,CAAAC,QAAA,EAAA;;;AAGMC,MAAAA,GAAA,EAAAC;AACAC,MAAAA,IAAA,EAAA;AACEC,QAAAA,eAAA,EAAA,KADF;AAEEC,QAAAA,QAAA,EAAAC,OAAA,CAAAD,QAAA,IAAA,OAFF;;AAAA,OAAA;;AAMJ;AACF,CAAA;;AAiBA,SAAAE,yBAAA,CAAA;EAAAC,UAAA;AAAAR,EAAAA,QAAA,GAAA,EAAA;AAAA,CAAA,EAAA;;;;;;;;;;;;;;;;AAeA;;;;;;;"}

package/cjs/Divider-0d44dde4.js

@@ -0,0 +1,36 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+
+var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
+
+const styles = {
+  orientation: {
+    horizontal: "_1q89e3n"
+  }
+};
+const interpolations = [({
+  orientation = 'horizontal'
+}) => ({
+  class: styles.orientation[orientation]
+})];
+const styleInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations(interpolations); // TODO - Support vertical orientation
+
+function Divider() {
+  const {
+    class: cls
+  } = styleInterpolations({
+    orientation: 'horizontal'
+  }); // TODO - Check  with archs if this should be a polymorphic component and if the answer is yes, implement it
+
+  return jsxRuntime.jsx("span", {
+    class: cls,
+    role: "separator",
+    "aria-orientation": "horizontal"
+  });
+}
+
+exports.Divider = Divider;
+/*  */
+//# sourceMappingURL=Divider-0d44dde4.js.map

package/cjs/Divider-0d44dde4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider-0d44dde4.js","sources":["../../src/UNSAFE_Divider/Divider.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 { cssProps } from '@oracle/oraclejet-cssprops';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\n\n// TODO -  Expose props once vertical orientation is supported\ntype DividerProps = {\n  /**\n   * Divider's orientation.\n   */\n  orientation?: 'horizontal';\n};\n\nconst styles = {\n  orientation: {\n    horizontal: cssProps`${{\n      display: 'block',\n      width: '100%',\n      height: '0',\n      borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color)',\n      borderStyle: 'solid',\n      borderWidth: '1px 0 0 0',\n      fontSize: '0',\n      lineHeight: '0'\n    }}`\n  }\n};\n\nconst interpolations = [\n  ({ orientation = 'horizontal' }: Pick<DividerProps, 'orientation'>) => ({\n    class: styles.orientation[orientation]\n  })\n];\n\nconst styleInterpolations = mergeInterpolations<DividerProps>(interpolations);\n\n// TODO - Support vertical orientation\nexport function Divider() {\n  const { class: cls } = styleInterpolations({ orientation: 'horizontal' });\n\n  // TODO - Check  with archs if this should be a polymorphic component and if the answer is yes, implement it\n  return <span class={cls} role=\"separator\" aria-orientation=\"horizontal\"></span>;\n}\n"],"names":["styles","orientation","interpolations","class","styleInterpolations","mergeInterpolations","Divider","cls"],"mappings":";;;;;;;AAmBA,MAAAA,MAAA,GAAA;AACEC,EAAAA,WAAA,EAAA;;AAAA,GAAA;AADF,CAAA,CAAA;AAeA,MAAAC,cAAA,GAAA;;;AAEIC,EAAAA,KAAA,EAAAH,MAAA,CAAAC,WAAA,CAAAA,WAAA,CAAA;EAFJ,CAAA,CAAA;AAMA,MAAAG,mBAAA,GAAAC,oDAAA,CAAAH,cAAA,CAAA;;AAGA,SAAAI,OAAA,GAAA;EACE,MAAA;AAAAH,IAAAA,KAAA,EAAAI,GAAAA;AAAA,GAAA,GAAAH,mBAAA,CAAA;AAAAH,IAAAA,WAAA,EAAA,YAAA;GAAA,CAAA,CADF;;;;;;;AAKA;;;;;;;"}