@oracle/oraclejet-preact 14.0.0 → 14.0.2

package/amd/UNSAFE_Label.css

@@ -1,13 +1,13 @@
-._18vd7df{font-size:var(--oj-c-PRIVATE-DO-NOT-USE-label-font-size);font-weight:var(--oj-c-PRIVATE-DO-NOT-USE-label-font-weight);line-height:var(--oj-c-PRIVATE-DO-NOT-USE-label-line-height);word-break:break-word;}
-._1wh72j2{color:var(--oj-c-PRIVATE-DO-NOT-USE-label-color);text-align:var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-start-edge-label-text-align);width:100%;}
-._1ihkgwm{color:var(--oj-c-PRIVATE-DO-NOT-USE-label-color);}
-._5xgwyy{display:block;box-sizing:border-box;padding-inline-end:calc(2 * var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding));color:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-color);max-width:100%;}
-._1fzaz6b{inset-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding);top:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-position-top);font-size:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size);font-weight:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-weight);line-height:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height);transition-property:none;transform:none;background-color:transparent;position:absolute;margin-bottom:var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-top-edge-label-to-value-padding);white-space:nowrap;overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;}
-._13i5m0r{font-size:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size);font-weight:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-weight);line-height:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height);}
-._1m0k1mh{position:absolute;inset-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding);top:calc(var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-height)/ 2);transform:translateY(-50%);transition-property:all;transition-duration:.25s;transition-timing-function:ease;transition-delay:.1s;white-space:nowrap;overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;}
-._1d46w6v{transition-property:top,font-weight,font-size,transform;transition-duration:.25s;transition-timing-function:ease;transition-delay:.1s;font-size:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size);font-weight:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-weight);line-height:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height);transform:none;top:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-position-top);}
-._1320747{transition-property:none;color:var(--oj-c-PRIVATE-DO-NOT-USE-label-color-disabled);}
-._12wid4f{color:var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-label-color-focus);}
-._1jp0whx{color:var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-3);}
-.lmeyy9{color:var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-3);}
-._1qsw9dj{white-space:nowrap;overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;}
+.vfvuqg{font-size:var(--oj-c-PRIVATE-DO-NOT-USE-label-font-size);font-weight:var(--oj-c-PRIVATE-DO-NOT-USE-label-font-weight);line-height:var(--oj-c-PRIVATE-DO-NOT-USE-label-line-height);word-break:break-word;}
+._1sy1200{color:var(--oj-c-PRIVATE-DO-NOT-USE-label-color);text-align:var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-start-edge-label-text-align);width:100%;}
+.zgd0p4{color:var(--oj-c-PRIVATE-DO-NOT-USE-label-color);}
+.vlc7c7{display:block;box-sizing:border-box;padding-inline-end:calc(2 * var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding));color:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-color);max-width:100%;}
+._9wl3eq{inset-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding);top:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-position-top);font-size:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size);font-weight:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-weight);line-height:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height);transition-property:none;transform:none;background-color:transparent;position:absolute;margin-bottom:var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-top-edge-label-to-value-padding);white-space:nowrap;overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;}
+.t4wx64{font-size:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size);font-weight:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-weight);line-height:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height);}
+._9qbhwv{position:absolute;inset-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding);top:calc(var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-height)/ 2);transform:translateY(-50%);transition-property:all;transition-duration:.25s;transition-timing-function:ease;transition-delay:.1s;white-space:nowrap;overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;}
+._15qbxlw{transition-property:top,font-weight,font-size,transform;transition-duration:.25s;transition-timing-function:ease;transition-delay:.1s;font-size:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size);font-weight:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-weight);line-height:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height);transform:none;top:var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-position-top);}
+.b8w04y{transition-property:none;color:var(--oj-c-PRIVATE-DO-NOT-USE-label-color-disabled);}
+._2aa2jw{color:var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-label-color-focus);}
+._1r8oj6k{color:var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-3);}
+._9bpxth{color:var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-3);}
+._14mwsue{white-space:nowrap;overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;}

package/amd/UNSAFE_Label.js

@@ -1,2 +1,2 @@
-define(["exports","./tslib.es6-d070fafc","preact/jsx-runtime","./hooks/UNSAFE_useFormFieldContext","./utils/UNSAFE_classNames","css!./UNSAFE_Label.css","./hooks/UNSAFE_useFormContext","./classNames-3c307969","preact","preact/hooks"],(function(e,s,a,i,n,d,o,r,l,t){"use strict";const c={base:"_18vd7df",startBase:"_1wh72j2",topBase:"_1ihkgwm",insideBase:"_5xgwyy",insideReadonlyInEnabledForm:"_1fzaz6b",insideReadonlyNotInEnabledForm:"_13i5m0r",insideNonReadonly:"_1m0k1mh",insideNonReadonlyHasValue:"_1d46w6v",insideDisabled:"_1320747",insideFocused:"_12wid4f",insideError:"_1jp0whx",insideWarning:"lmeyy9",noWrap:"_1qsw9dj"},u=e=>{var{hasValue:i,readonly:n,disabled:d,isFocused:l,variant:t="inside"}=e,u=s.__rest(e,["hasValue","readonly","disabled","isFocused","variant"]);const{isFormLayout:b,isReadonly:_,labelWrapping:m}=o.useFormContext(),F="inside"===t||"insideError"===t||"insideWarning"===t?r.classNames([c.base,c.insideBase,n&&(b&&!_?c.insideReadonlyInEnabledForm:c.insideReadonlyNotInEnabledForm),!n&&c.insideNonReadonly,!n&&(i||l)&&c.insideNonReadonlyHasValue,!n&&l&&c.insideFocused,d&&c.insideDisabled,!d&&!n&&("insideError"===t||"insideWarning"===t)&&c[t]]):"start"===t?r.classNames([c.base,c.startBase,"truncate"===m&&c.noWrap]):"top"===t?r.classNames([c.base,c.topBase,"truncate"===m&&c.noWrap]):void 0;return a.jsx("label",Object.assign({},u,{class:F}))};e.Label=e=>{var{forId:n}=e,d=s.__rest(e,["forId"]);const{hasValue:o,isDisabled:r,isFocused:l,isReadonly:t}=i.useFormFieldContext();return a.jsx(u,Object.assign({for:n,hasValue:o,disabled:r,isFocused:l,readonly:t},d))},Object.defineProperty(e,"__esModule",{value:!0})}));
+define(["exports","./tslib.es6-fa3971d7","preact/jsx-runtime","./hooks/UNSAFE_useFormFieldContext","./utils/UNSAFE_classNames","css!./UNSAFE_Label.css","./hooks/UNSAFE_useFormContext","./classNames-e580c7c7","preact","preact/hooks"],function(e,s,a,i,n,o,d,r,l,t){"use strict";const c={base:"vfvuqg",startBase:"_1sy1200",topBase:"zgd0p4",insideBase:"vlc7c7",insideReadonlyInEnabledForm:"_9wl3eq",insideReadonlyNotInEnabledForm:"t4wx64",insideNonReadonly:"_9qbhwv",insideNonReadonlyHasValue:"_15qbxlw",insideDisabled:"b8w04y",insideFocused:"_2aa2jw",insideError:"_1r8oj6k",insideWarning:"_9bpxth",noWrap:"_14mwsue"},u=e=>{var{hasValue:i,readonly:n,disabled:o,isFocused:l,variant:t="inside"}=e,u=s.__rest(e,["hasValue","readonly","disabled","isFocused","variant"]);const{isFormLayout:b,isReadonly:F,labelWrapping:y}=d.useFormContext(),_="inside"===t||"insideError"===t||"insideWarning"===t?r.classNames([c.base,c.insideBase,n&&(b&&!F?c.insideReadonlyInEnabledForm:c.insideReadonlyNotInEnabledForm),!n&&c.insideNonReadonly,!n&&(i||l)&&c.insideNonReadonlyHasValue,!n&&l&&c.insideFocused,o&&c.insideDisabled,!o&&!n&&("insideError"===t||"insideWarning"===t)&&c[t]]):"start"===t?r.classNames([c.base,c.startBase,"truncate"===y&&c.noWrap]):"top"===t?r.classNames([c.base,c.topBase,"truncate"===y&&c.noWrap]):void 0;return a.jsx("label",Object.assign({},u,{class:_}))};e.Label=e=>{var{forId:n}=e,o=s.__rest(e,["forId"]);const{hasValue:d,isDisabled:r,isFocused:l,isReadonly:t}=i.useFormFieldContext();return a.jsx(u,Object.assign({for:n,hasValue:d,disabled:r,isFocused:l,readonly:t},o))},Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=UNSAFE_Label.js.map

package/amd/UNSAFE_Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"UNSAFE_Label.js","sources":["../../src/UNSAFE_Label/Label.tsx"],"sourcesContent":["import { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { StyledComponentProps } from '../utils/UNSAFE_typeUtils';\nimport { useFormContext } from '../hooks/UNSAFE_useFormContext';\n\nconst labelStyles = {\n  base: cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-font-weight)',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-line-height)',\n    // TODO: Evaluate usage of Text Component instead of CSS (we might not be able to as we might need label element)\n    wordBreak: 'break-word'\n  }}`,\n  startBase: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-color)',\n    // TODO: Reevaluate which component should handle the text align\n    textAlign: 'var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-start-edge-label-text-align)',\n    width: '100%'\n  }}`,\n  topBase: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-color)'\n  }}`,\n  insideBase: cssProps`${{\n    display: 'block',\n    boxSizing: 'border-box',\n    // TODO: Reevaluate which component should handle the padding\n    paddingInlineEnd: 'calc(2 * var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding))',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-color)',\n    maxWidth: '100%'\n  }}`,\n  insideReadonlyInEnabledForm: cssProps`${{\n    insetInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding)',\n    top: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-position-top)',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-weight)',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height)',\n    transitionProperty: 'none',\n    transform: 'none',\n    backgroundColor: 'transparent',\n    position: 'absolute',\n    marginBottom: 'var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-top-edge-label-to-value-padding)',\n    whiteSpace: 'nowrap',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    textOverflow: 'ellipsis'\n  }}`,\n  insideReadonlyNotInEnabledForm: cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-weight)',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height)'\n  }}`,\n  insideNonReadonly: cssProps`${{\n    position: 'absolute',\n    insetInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding)',\n    top: 'calc(var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-height)/ 2)',\n    transform: 'translateY(-50%)',\n    transitionProperty: 'all',\n    transitionDuration: '.25s',\n    transitionTimingFunction: 'ease',\n    transitionDelay: '.1s',\n    whiteSpace: 'nowrap',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    textOverflow: 'ellipsis'\n  }}`,\n  insideNonReadonlyHasValue: cssProps`${{\n    transitionProperty: 'top, font-weight, font-size, transform',\n    transitionDuration: '.25s',\n    transitionTimingFunction: 'ease',\n    transitionDelay: '.1s',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-weight)',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height)',\n    transform: 'none',\n    top: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-position-top)'\n  }}`,\n  insideDisabled: cssProps`${{\n    transitionProperty: 'none',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-color-disabled)'\n  }}`,\n  insideFocused: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-label-color-focus)'\n  }}`,\n  insideError: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-3)'\n  }}`,\n  insideWarning: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-3)'\n  }}`,\n\n  noWrap: cssProps`${{\n    whiteSpace: 'nowrap',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    textOverflow: 'ellipsis'\n  }}`\n};\n\ntype StyleProps = Pick<Props, 'variant'> & {\n  hasValue?: boolean;\n  isFocused?: boolean;\n};\ntype StyledLabelProps = StyledComponentProps<'label', StyleProps>;\n\nconst StyledLabel = ({\n  hasValue,\n  readonly,\n  disabled,\n  isFocused,\n  variant = 'inside',\n  ...props\n}: StyledLabelProps) => {\n  const { isFormLayout, isReadonly: isReadonlyForm, labelWrapping } = useFormContext();\n\n  const cssClassNames =\n    variant === 'inside' || variant === 'insideError' || variant === 'insideWarning'\n      ? classNames([\n          labelStyles.base,\n          labelStyles.insideBase,\n          readonly &&\n            (isFormLayout && !isReadonlyForm\n              ? labelStyles.insideReadonlyInEnabledForm\n              : labelStyles.insideReadonlyNotInEnabledForm),\n          !readonly && labelStyles.insideNonReadonly,\n          !readonly && (hasValue || isFocused) && labelStyles.insideNonReadonlyHasValue,\n          !readonly && isFocused && labelStyles.insideFocused,\n          disabled && labelStyles.insideDisabled,\n          !disabled &&\n            !readonly &&\n            (variant === 'insideError' || variant === 'insideWarning') &&\n            labelStyles[variant]\n        ])\n      : variant === 'start'\n      ? classNames([\n          labelStyles.base,\n          labelStyles.startBase,\n          labelWrapping === 'truncate' && labelStyles.noWrap\n        ])\n      : variant === 'top'\n      ? classNames([\n          labelStyles.base,\n          labelStyles.topBase,\n          labelWrapping === 'truncate' && labelStyles.noWrap\n        ])\n      : undefined;\n  // TODO: We need to decide whether to standardize on 'class' or 'className'.  Otherwise, we'll\n  // run into issues destructuring style interpolations, for example having to concatenate both.\n  return <label {...props} class={cssClassNames} />;\n};\n\ntype Props = {\n  /**\n   * The text to be used for the label\n   */\n  children?: string;\n  /**\n   * The id to set on the label\n   */\n  id?: string;\n  /**\n   * The id of the form control for which this label will be used\n   */\n  forId?: string;\n  /**\n   * Determines how the label is going to be styled\n   */\n  variant?: 'inside' | 'start' | 'top' | 'insideError' | 'insideWarning';\n};\n\nexport const Label = ({ forId, ...props }: Props) => {\n  const { hasValue, isDisabled, isFocused, isReadonly } = useFormFieldContext();\n  return (\n    <StyledLabel\n      for={forId}\n      hasValue={hasValue}\n      disabled={isDisabled}\n      isFocused={isFocused}\n      readonly={isReadonly}\n      {...props}\n    />\n  );\n};\n"],"names":["labelStyles","StyledLabel","_a","hasValue","readonly","disabled","isFocused","variant","props","__rest","isFormLayout","isReadonly","isReadonlyForm","labelWrapping","useFormContext","cssClassNames","base","insideBase","insideReadonlyNotInEnabledForm","insideNonReadonly","insideFocused","startBase","noWrap","topBase","_jsx","Object","assign","class","forId","isDisabled","useFormFieldContext"],"mappings":"sQAMA,MAAAA,EAAA,MAAA,qBAAA,mBAAA,sBAAA,sCAAA,0CAAA,6BAAA,qCAAA,0BAAA,yBAAA,uBAAA,yBAAA,4BAmGAC,EAAAC,IAAqB,IAAAC,SAAAA,EAAAC,SAAAA,EAAAC,SAAAA,EAAAC,UAAAA,EAAAC,QAAAA,EAAA,UAAAL,EAAAM,EAAAC,EAAAA,OAAAP,EAAA,CAAA,WAAA,WAAA,WAAA,YAAA,YAQnB,MAAAQ,aAAAA,EAAAC,WAAAC,EAAAC,cAAAA,GAAAC,EAAAA,iBAEAC,EAAA,WAAAR,GAAA,gBAAAA,GAAA,kBAAAA,gBAGQP,EAAAgB,KACAhB,EAAAiB,mDAIIjB,EAAAkB,iCACJd,GAAAJ,EAAAmB,2DAEAf,GAAAE,GAAAN,EAAAoB,mCAEAf,IACED,IACA,gBAAAG,GAAA,kBAAAA,qCAKFP,EAAAgB,KACAhB,EAAAqB,UACA,aAAAR,GAAAb,EAAAsB,iCAIAtB,EAAAgB,KACAhB,EAAAuB,QACA,aAAAV,GAAAb,EAAAsB,gBAKR,OAAAE,EAAAA,IAAA,QAAAC,OAAAC,OAAA,GAAAlB,EAAA,CAAAmB,MAAAZ,cAsBFb,IAAsB,IAAA0B,MAAAA,GAAA1B,EAAAM,EAAAC,EAAAA,OAAAP,EAAA,CAAA,UACpB,MAAAC,SAAAA,EAAA0B,WAAAA,EAAAvB,UAAAA,EAAAK,WAAAA,GAAAmB,EAAAA"}
+{"version":3,"file":"UNSAFE_Label.js","sources":["../../src/UNSAFE_Label/Label.tsx"],"sourcesContent":["import { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { StyledComponentProps } from '../utils/UNSAFE_typeUtils';\nimport { useFormContext } from '../hooks/UNSAFE_useFormContext';\n\nconst labelStyles = {\n  base: cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-font-weight)',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-line-height)',\n    // TODO: Evaluate usage of Text Component instead of CSS (we might not be able to as we might need label element)\n    wordBreak: 'break-word'\n  }}`,\n  startBase: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-color)',\n    // TODO: Reevaluate which component should handle the text align\n    textAlign: 'var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-start-edge-label-text-align)',\n    width: '100%'\n  }}`,\n  topBase: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-color)'\n  }}`,\n  insideBase: cssProps`${{\n    display: 'block',\n    boxSizing: 'border-box',\n    // TODO: Reevaluate which component should handle the padding\n    paddingInlineEnd: 'calc(2 * var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding))',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-color)',\n    maxWidth: '100%'\n  }}`,\n  insideReadonlyInEnabledForm: cssProps`${{\n    insetInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding)',\n    top: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-position-top)',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-weight)',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height)',\n    transitionProperty: 'none',\n    transform: 'none',\n    backgroundColor: 'transparent',\n    position: 'absolute',\n    marginBottom: 'var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-top-edge-label-to-value-padding)',\n    whiteSpace: 'nowrap',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    textOverflow: 'ellipsis'\n  }}`,\n  insideReadonlyNotInEnabledForm: cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-weight)',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height)'\n  }}`,\n  insideNonReadonly: cssProps`${{\n    position: 'absolute',\n    insetInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding)',\n    top: 'calc(var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-height)/ 2)',\n    transform: 'translateY(-50%)',\n    transitionProperty: 'all',\n    transitionDuration: '.25s',\n    transitionTimingFunction: 'ease',\n    transitionDelay: '.1s',\n    whiteSpace: 'nowrap',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    textOverflow: 'ellipsis'\n  }}`,\n  insideNonReadonlyHasValue: cssProps`${{\n    transitionProperty: 'top, font-weight, font-size, transform',\n    transitionDuration: '.25s',\n    transitionTimingFunction: 'ease',\n    transitionDelay: '.1s',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-weight)',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height)',\n    transform: 'none',\n    top: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-position-top)'\n  }}`,\n  insideDisabled: cssProps`${{\n    transitionProperty: 'none',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-color-disabled)'\n  }}`,\n  insideFocused: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-label-color-focus)'\n  }}`,\n  insideError: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-3)'\n  }}`,\n  insideWarning: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-3)'\n  }}`,\n\n  noWrap: cssProps`${{\n    whiteSpace: 'nowrap',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    textOverflow: 'ellipsis'\n  }}`\n};\n\ntype StyleProps = Pick<Props, 'variant'> & {\n  hasValue?: boolean;\n  isFocused?: boolean;\n};\ntype StyledLabelProps = StyledComponentProps<'label', StyleProps>;\n\nconst StyledLabel = ({\n  hasValue,\n  readonly,\n  disabled,\n  isFocused,\n  variant = 'inside',\n  ...props\n}: StyledLabelProps) => {\n  const { isFormLayout, isReadonly: isReadonlyForm, labelWrapping } = useFormContext();\n\n  const cssClassNames =\n    variant === 'inside' || variant === 'insideError' || variant === 'insideWarning'\n      ? classNames([\n          labelStyles.base,\n          labelStyles.insideBase,\n          readonly &&\n            (isFormLayout && !isReadonlyForm\n              ? labelStyles.insideReadonlyInEnabledForm\n              : labelStyles.insideReadonlyNotInEnabledForm),\n          !readonly && labelStyles.insideNonReadonly,\n          !readonly && (hasValue || isFocused) && labelStyles.insideNonReadonlyHasValue,\n          !readonly && isFocused && labelStyles.insideFocused,\n          disabled && labelStyles.insideDisabled,\n          !disabled &&\n            !readonly &&\n            (variant === 'insideError' || variant === 'insideWarning') &&\n            labelStyles[variant]\n        ])\n      : variant === 'start'\n      ? classNames([\n          labelStyles.base,\n          labelStyles.startBase,\n          labelWrapping === 'truncate' && labelStyles.noWrap\n        ])\n      : variant === 'top'\n      ? classNames([\n          labelStyles.base,\n          labelStyles.topBase,\n          labelWrapping === 'truncate' && labelStyles.noWrap\n        ])\n      : undefined;\n  // TODO: We need to decide whether to standardize on 'class' or 'className'.  Otherwise, we'll\n  // run into issues destructuring style interpolations, for example having to concatenate both.\n  return <label {...props} class={cssClassNames} />;\n};\n\ntype Props = {\n  /**\n   * The text to be used for the label\n   */\n  children?: string;\n  /**\n   * The id to set on the label\n   */\n  id?: string;\n  /**\n   * The id of the form control for which this label will be used\n   */\n  forId?: string;\n  /**\n   * Determines how the label is going to be styled\n   */\n  variant?: 'inside' | 'start' | 'top' | 'insideError' | 'insideWarning';\n};\n\nexport const Label = ({ forId, ...props }: Props) => {\n  const { hasValue, isDisabled, isFocused, isReadonly } = useFormFieldContext();\n  return (\n    <StyledLabel\n      for={forId}\n      hasValue={hasValue}\n      disabled={isDisabled}\n      isFocused={isFocused}\n      readonly={isReadonly}\n      {...props}\n    />\n  );\n};\n"],"names":["labelStyles","StyledLabel","_a","hasValue","readonly","disabled","isFocused","variant","props","__rest","isFormLayout","isReadonly","isReadonlyForm","labelWrapping","useFormContext","cssClassNames","base","insideBase","insideReadonlyNotInEnabledForm","insideNonReadonly","insideFocused","startBase","noWrap","topBase","_jsx","Object","assign","class","forId","isDisabled","useFormFieldContext"],"mappings":"qQAMA,MAAAA,EAAA,MAAA,mBAAA,mBAAA,oBAAA,qCAAA,yCAAA,2BAAA,oCAAA,0BAAA,uBAAA,sBAAA,yBAAA,6BAmGAC,EAAAC,IAAqB,IAAAC,SAAAA,EAAAC,SAAAA,EAAAC,SAAAA,EAAAC,UAAAA,EAAAC,QAAAA,EAAA,UAAAL,EAAAM,EAAAC,EAAAA,OAAAP,EAAA,CAAA,WAAA,WAAA,WAAA,YAAA,YAQnB,MAAAQ,aAAAA,EAAAC,WAAAC,EAAAC,cAAAA,GAAAC,EAAAA,iBAEAC,EAAA,WAAAR,GAAA,gBAAAA,GAAA,kBAAAA,gBAGQP,EAAAgB,KACAhB,EAAAiB,mDAIIjB,EAAAkB,iCACJd,GAAAJ,EAAAmB,2DAEAf,GAAAE,GAAAN,EAAAoB,mCAEAf,IACED,IACA,gBAAAG,GAAA,kBAAAA,qCAKFP,EAAAgB,KACAhB,EAAAqB,UACA,aAAAR,GAAAb,EAAAsB,iCAIAtB,EAAAgB,KACAhB,EAAAuB,QACA,aAAAV,GAAAb,EAAAsB,gBAKR,OAAAE,EAAAA,IAAA,QAAAC,OAAAC,OAAA,GAAAlB,EAAA,CAAAmB,MAAAZ,cAsBFb,IAAsB,IAAA0B,MAAAA,GAAA1B,EAAAM,EAAAC,EAAAA,OAAAP,EAAA,CAAA,UACpB,MAAAC,SAAAA,EAAA0B,WAAAA,EAAAvB,UAAAA,EAAAK,WAAAA,GAAAmB,EAAAA"}

package/amd/UNSAFE_LabelValueLayout.css

@@ -1,9 +1,9 @@
-.f2bnu1{display:block;flex-grow:0;flex-shrink:1;box-sizing:border-box;}
-._1dgj6nh{padding-inline-end:var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-start-edge-label-to-value-padding);}
-._1f0b98f{flex-basis:100%;width:100%;max-width:100%;padding-block-end:var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-top-edge-label-to-value-padding);}
-._15l72ku{padding-block-end:0;}
-.qxz678{display:block;color:var(--oj-c-PRIVATE-DO-NOT-USE-label-color);font-size:var(--oj-c-PRIVATE-DO-NOT-USE-label-font-size);line-height:var(--oj-c-PRIVATE-DO-NOT-USE-label-line-height);width:100%;}
-.s2tqs2{display:inline-flex;align-items:center;}
-.tvd1b8{min-height:var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height);}
-._13k998o{white-space:nowrap;overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;}
-._1fun5ad{flex:1 1 100%;width:100%;max-width:100%;}
+._1s2l8ea{display:block;flex-grow:0;flex-shrink:1;box-sizing:border-box;}
+._6lbpmf{padding-inline-end:var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-start-edge-label-to-value-padding);}
+._11donl0{flex-basis:100%;width:100%;max-width:100%;padding-block-end:var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-top-edge-label-to-value-padding);}
+.hpon56{padding-block-end:0;}
+._13ansxg{display:block;color:var(--oj-c-PRIVATE-DO-NOT-USE-label-color);font-size:var(--oj-c-PRIVATE-DO-NOT-USE-label-font-size);line-height:var(--oj-c-PRIVATE-DO-NOT-USE-label-line-height);width:100%;}
+._11asogu{display:inline-flex;align-items:center;}
+._1mbqu38{min-height:var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height);}
+._1wyltkk{white-space:nowrap;overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;}
+._1373oxz{flex:1 1 100%;width:100%;max-width:100%;}

package/amd/UNSAFE_LabelValueLayout.js

@@ -1,2 +1,2 @@
-define(["exports","preact/jsx-runtime","./utils/UNSAFE_classNames","css!./UNSAFE_LabelValueLayout.css","./UNSAFE_Flex","./hooks/UNSAFE_useFormContext","./hooks/UNSAFE_useFormFieldContext","./utils/UNSAFE_size","./classNames-3c307969","./Flex-0dec0de8","./tslib.es6-d070fafc","./utils/UNSAFE_interpolations/dimensions","./utils/UNSAFE_arrayUtils","./_curry1-b9493cf6","./utils/UNSAFE_mergeInterpolations","./_curry3-8ffdde1d","./_curry2-b02f6247","./_has-fad415e9","./utils/UNSAFE_interpolations/boxalignment","./keys-9d7cdf1f","./utils/UNSAFE_interpolations/flexbox","./flexbox-b8de8bb4","./utils/UNSAFE_interpolations/flexitem","./flexitem-d8628091","preact","preact/hooks"],(function(s,e,t,a,i,l,r,n,o,d,c,u,x,b,f,_,F,m,p,h,N,S,y,E,U,j){"use strict";const A="f2bnu1",g="_1dgj6nh",k="_1f0b98f",v="_15l72ku",C="qxz678",O="s2tqs2",w="tvd1b8",W="_13k998o";s.LabelValueLayout=({label:s,labelEdge:t,children:a,labelStartWidth:i="33%"})=>{const c=n.sizeToCSS(i),u=`calc(100% - ${c})`,x="start"===t?{flexBasis:c,width:c,maxWidth:c}:{},b="start"===t?{flexBasis:u,width:u,maxWidth:u}:{},{isFormLayout:f,isReadonly:_,labelWrapping:F}=l.useFormContext(),{isReadonly:m}=r.useFormFieldContext(),p=f&&_||!f&&m,h=o.classNames([A,"start"===t&&g,"top"===t&&k,"top"===t&&p&&v]),N=o.classNames([C,"start"===t&&O,"start"===t&&!p&&w,"truncate"===F&&W]);return e.jsxs(d.Flex,Object.assign({wrap:"wrap",align:"start"},{children:[e.jsx("div",Object.assign({class:h,style:x},{children:e.jsx("div",Object.assign({class:N},{children:s}))})),e.jsx("div",Object.assign({class:"_1fun5ad",style:b},{children:a}))]}))},Object.defineProperty(s,"__esModule",{value:!0})}));
+define(["exports","preact/jsx-runtime","./utils/UNSAFE_classNames","css!./UNSAFE_LabelValueLayout.css","./UNSAFE_Flex","./hooks/UNSAFE_useFormContext","./hooks/UNSAFE_useFormFieldContext","./utils/UNSAFE_size","./classNames-e580c7c7","./Flex-bfc6c229","./tslib.es6-fa3971d7","./utils/UNSAFE_interpolations/dimensions","./utils/UNSAFE_arrayUtils","./_curry1-9eeaf6ed","./utils/UNSAFE_mergeInterpolations","./_curry3-167fa665","./_curry2-466cc994","./_has-aa07e02d","./utils/UNSAFE_interpolations/boxalignment","./keys-992a0824","./utils/UNSAFE_interpolations/flexbox","./flexbox-37da5c1b","./utils/UNSAFE_interpolations/flexitem","./flexitem-f592cd81","preact","preact/hooks"],function(s,e,t,a,l,i,o,r,n,c,d,u,x,_,F,m,b,p,f,h,N,S,y,E,U,g){"use strict";const A="_1s2l8ea",j="_6lbpmf",k="_11donl0",w="hpon56",C="_13ansxg",O="_11asogu",v="_1mbqu38",W="_1wyltkk";s.LabelValueLayout=({label:s,labelEdge:t,children:a,labelStartWidth:l="33%"})=>{const d=r.sizeToCSS(l),u=`calc(100% - ${d})`,x="start"===t?{flexBasis:d,width:d,maxWidth:d}:{},_="start"===t?{flexBasis:u,width:u,maxWidth:u}:{},{isFormLayout:F,isReadonly:m,labelWrapping:b}=i.useFormContext(),{isReadonly:p}=o.useFormFieldContext(),f=F&&m||!F&&p,h=n.classNames([A,"start"===t&&j,"top"===t&&k,"top"===t&&f&&w]),N=n.classNames([C,"start"===t&&O,"start"===t&&!f&&v,"truncate"===b&&W]);return e.jsxs(c.Flex,Object.assign({wrap:"wrap",align:"start"},{children:[e.jsx("div",Object.assign({class:h,style:x},{children:e.jsx("div",Object.assign({class:N},{children:s}))})),e.jsx("div",Object.assign({class:"_1373oxz",style:_},{children:a}))]}))},Object.defineProperty(s,"__esModule",{value:!0})});
 //# sourceMappingURL=UNSAFE_LabelValueLayout.js.map

package/amd/UNSAFE_LabelValueLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"UNSAFE_LabelValueLayout.js","sources":["../../src/UNSAFE_LabelValueLayout/LabelValueLayout.tsx"],"sourcesContent":["import { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { ComponentChildren, JSX } from 'preact';\nimport { Flex } from '../UNSAFE_Flex';\nimport { useFormContext } from '../hooks/UNSAFE_useFormContext';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { sizeToCSS, Size } from '../utils/UNSAFE_size';\n\nconst labelSlotStyles = {\n  base: cssProps`${{\n    display: 'block',\n    flexGrow: '0',\n    flexShrink: '1',\n    boxSizing: 'border-box'\n  }}`,\n  start: cssProps`${{\n    paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-start-edge-label-to-value-padding)'\n  }}`,\n\n  top: cssProps`${{\n    flexBasis: '100%',\n    width: '100%',\n    maxWidth: '100%',\n    paddingBlockEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-top-edge-label-to-value-padding)'\n  }}`,\n\n  topPureReadonly: cssProps`${{\n    paddingBlockEnd: 0\n  }}`\n};\n\nconst labelInnerStyles = {\n  // base is labelEdge 'top'\n  base: cssProps`${{\n    display: 'block',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-color)',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-font-size)',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-line-height)',\n    width: '100%'\n  }}`,\n  start: cssProps`${{\n    display: 'inline-flex',\n    alignItems: 'center'\n  }}`,\n  startNotPureReadonly: cssProps`${{\n    minHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height)'\n  }}`,\n  // TODO: Use Text Component instead of CSS\n  noWrap: cssProps`${{\n    whiteSpace: 'nowrap',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    textOverflow: 'ellipsis'\n  }}`\n};\n\nconst valueSlotStyles = cssProps`${{\n  flex: '1 1 100%',\n  width: '100%',\n  maxWidth: '100%'\n}}`;\n\ntype Props = {\n  /**\n   * Label content of the layout\n   */\n  label?: ComponentChildren;\n  /**\n   * Defines how the label is going to be positioned\n   */\n  labelEdge?: 'start' | 'top';\n  /**\n   * Defines the label width for labelEdge 'start' ('top' is always 100%)\n   */\n  labelStartWidth?: Size;\n  /**\n   * Value content of the layout\n   */\n  children: ComponentChildren;\n};\n\nexport const LabelValueLayout = ({\n  label,\n  labelEdge,\n  children,\n  labelStartWidth = '33%'\n}: Props) => {\n  const width = sizeToCSS(labelStartWidth);\n  const valueWidth = `calc(100% - ${width})`;\n  const labelStyles: JSX.CSSProperties =\n    labelEdge === 'start' ? { flexBasis: width, width: width, maxWidth: width } : {};\n  const valueStyles: JSX.CSSProperties =\n    labelEdge === 'start' ? { flexBasis: valueWidth, width: valueWidth, maxWidth: valueWidth } : {};\n\n  const { isFormLayout, isReadonly: isFormReadonly, labelWrapping } = useFormContext();\n  const { isReadonly } = useFormFieldContext();\n  const isPureReadonly = (isFormLayout && isFormReadonly) || (!isFormLayout && isReadonly);\n  const labelStyleClasses = classNames([\n    labelSlotStyles.base,\n    labelEdge === 'start' && labelSlotStyles.start,\n    // labelEdge === 'start' && isPureReadonly && labelSlotStyles.startReadonly,\n    // labelEdge === 'start' && !isPureReadonly && labelSlotStyles.startNotPureReadonly,\n    labelEdge === 'top' && labelSlotStyles.top,\n    labelEdge === 'top' && isPureReadonly && labelSlotStyles.topPureReadonly\n  ]);\n  const labelInnerClasses = classNames([\n    labelInnerStyles.base,\n    labelEdge === 'start' && labelInnerStyles.start,\n    labelEdge === 'start' && !isPureReadonly && labelInnerStyles.startNotPureReadonly,\n    labelWrapping === 'truncate' && labelInnerStyles.noWrap\n  ]);\n\n  return (\n    <Flex wrap=\"wrap\" align=\"start\">\n      <div class={labelStyleClasses} style={labelStyles}>\n        <div class={labelInnerClasses}>{label}</div>\n      </div>\n      <div class={valueSlotStyles} style={valueStyles}>\n        {children}\n      </div>\n    </Flex>\n  );\n};\n"],"names":["labelSlotStyles","labelInnerStyles","label","labelEdge","children","labelStartWidth","width","sizeToCSS","valueWidth","isFormLayout","isReadonly","isFormReadonly","labelWrapping","useFormContext","useFormFieldContext","isPureReadonly","_jsxs","Flex","Object","assign","wrap","align","_jsx","jsx","class","labelStyleClasses","style","labelStyles","labelInnerClasses","valueStyles"],"mappings":"stBAQA,MAAAA,EAAA,SAAAA,EAAA,WAAAA,EAAA,WAAAA,aAuBAC,EAAA,SAAAA,EAAA,SAAAA,EAAA,SAAAA,gCAkDA,EAAAC,MAAAA,EAAAC,UAAAA,EAAAC,SAAAA,EAAAC,gBAAAA,EAAA,UAME,MAAAC,EAAAC,YAAAF,GACAG,EAAAF,eAAAA,0GAMAG,aAAAA,EAAAC,WAAAC,EAAAC,cAAAA,GAAAC,EAAAA,kBACAH,WAAAA,GAAAI,EAAAA,sBACAC,EAAAN,GAAAE,IAAAF,GAAAC,kBAEEV,EACA,UAAAG,GAAAH,EAGA,QAAAG,GAAAH,EACA,QAAAG,GAAAY,GAAAf,oBAGAC,EACA,UAAAE,GAAAF,qBAEA,aAAAW,GAAAX,IAGF,OAAAe,OAAAC,EAAAA,KAAAC,OAAAC,OAAA,CAAAC,KAAA,OAAAC,MAAA,SAAA,CAAAjB,SAAA,CAAAkB,EAAAC,IAAA,MAAAL,OAAAC,OAAA,CAAAK,MAAAC,EAAAC,MAAAC,GAAA,CAAAvB,SAAAkB,EAAAC,IAAA,MAAAL,OAAAC,OAAA,CAAAK,MAAAI,GAAA,CAAAxB,SAAAF,QAAAoB,EAAAC,IAAA,MAAAL,OAAAC,OAAA,CAAAK,MAxDF,WAwDEE,MAAAG,GAAA,CAAAzB,SAAAA"}
+{"version":3,"file":"UNSAFE_LabelValueLayout.js","sources":["../../src/UNSAFE_LabelValueLayout/LabelValueLayout.tsx"],"sourcesContent":["import { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { ComponentChildren, JSX } from 'preact';\nimport { Flex } from '../UNSAFE_Flex';\nimport { useFormContext } from '../hooks/UNSAFE_useFormContext';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { sizeToCSS, Size } from '../utils/UNSAFE_size';\n\nconst labelSlotStyles = {\n  base: cssProps`${{\n    display: 'block',\n    flexGrow: '0',\n    flexShrink: '1',\n    boxSizing: 'border-box'\n  }}`,\n  start: cssProps`${{\n    paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-start-edge-label-to-value-padding)'\n  }}`,\n\n  top: cssProps`${{\n    flexBasis: '100%',\n    width: '100%',\n    maxWidth: '100%',\n    paddingBlockEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-form-layout-top-edge-label-to-value-padding)'\n  }}`,\n\n  topPureReadonly: cssProps`${{\n    paddingBlockEnd: 0\n  }}`\n};\n\nconst labelInnerStyles = {\n  // base is labelEdge 'top'\n  base: cssProps`${{\n    display: 'block',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-color)',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-font-size)',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-label-line-height)',\n    width: '100%'\n  }}`,\n  start: cssProps`${{\n    display: 'inline-flex',\n    alignItems: 'center'\n  }}`,\n  startNotPureReadonly: cssProps`${{\n    minHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height)'\n  }}`,\n  // TODO: Use Text Component instead of CSS\n  noWrap: cssProps`${{\n    whiteSpace: 'nowrap',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    textOverflow: 'ellipsis'\n  }}`\n};\n\nconst valueSlotStyles = cssProps`${{\n  flex: '1 1 100%',\n  width: '100%',\n  maxWidth: '100%'\n}}`;\n\ntype Props = {\n  /**\n   * Label content of the layout\n   */\n  label?: ComponentChildren;\n  /**\n   * Defines how the label is going to be positioned\n   */\n  labelEdge?: 'start' | 'top';\n  /**\n   * Defines the label width for labelEdge 'start' ('top' is always 100%)\n   */\n  labelStartWidth?: Size;\n  /**\n   * Value content of the layout\n   */\n  children: ComponentChildren;\n};\n\nexport const LabelValueLayout = ({\n  label,\n  labelEdge,\n  children,\n  labelStartWidth = '33%'\n}: Props) => {\n  const width = sizeToCSS(labelStartWidth);\n  const valueWidth = `calc(100% - ${width})`;\n  const labelStyles: JSX.CSSProperties =\n    labelEdge === 'start' ? { flexBasis: width, width: width, maxWidth: width } : {};\n  const valueStyles: JSX.CSSProperties =\n    labelEdge === 'start' ? { flexBasis: valueWidth, width: valueWidth, maxWidth: valueWidth } : {};\n\n  const { isFormLayout, isReadonly: isFormReadonly, labelWrapping } = useFormContext();\n  const { isReadonly } = useFormFieldContext();\n  const isPureReadonly = (isFormLayout && isFormReadonly) || (!isFormLayout && isReadonly);\n  const labelStyleClasses = classNames([\n    labelSlotStyles.base,\n    labelEdge === 'start' && labelSlotStyles.start,\n    // labelEdge === 'start' && isPureReadonly && labelSlotStyles.startReadonly,\n    // labelEdge === 'start' && !isPureReadonly && labelSlotStyles.startNotPureReadonly,\n    labelEdge === 'top' && labelSlotStyles.top,\n    labelEdge === 'top' && isPureReadonly && labelSlotStyles.topPureReadonly\n  ]);\n  const labelInnerClasses = classNames([\n    labelInnerStyles.base,\n    labelEdge === 'start' && labelInnerStyles.start,\n    labelEdge === 'start' && !isPureReadonly && labelInnerStyles.startNotPureReadonly,\n    labelWrapping === 'truncate' && labelInnerStyles.noWrap\n  ]);\n\n  return (\n    <Flex wrap=\"wrap\" align=\"start\">\n      <div class={labelStyleClasses} style={labelStyles}>\n        <div class={labelInnerClasses}>{label}</div>\n      </div>\n      <div class={valueSlotStyles} style={valueStyles}>\n        {children}\n      </div>\n    </Flex>\n  );\n};\n"],"names":["labelSlotStyles","labelInnerStyles","label","labelEdge","children","labelStartWidth","width","sizeToCSS","valueWidth","isFormLayout","isReadonly","isFormReadonly","labelWrapping","useFormContext","useFormFieldContext","isPureReadonly","_jsxs","Flex","Object","assign","wrap","align","_jsx","jsx","class","labelStyleClasses","style","labelStyles","labelInnerClasses","valueStyles"],"mappings":"qtBAQA,MAAAA,EAAA,WAAAA,EAAA,UAAAA,EAAA,WAAAA,WAuBAC,EAAA,WAAAA,EAAA,WAAAA,EAAA,WAAAA,gCAkDA,EAAAC,MAAAA,EAAAC,UAAAA,EAAAC,SAAAA,EAAAC,gBAAAA,EAAA,UAME,MAAAC,EAAAC,YAAAF,GACAG,EAAAF,eAAAA,0GAMAG,aAAAA,EAAAC,WAAAC,EAAAC,cAAAA,GAAAC,EAAAA,kBACAH,WAAAA,GAAAI,EAAAA,sBACAC,EAAAN,GAAAE,IAAAF,GAAAC,kBAEEV,EACA,UAAAG,GAAAH,EAGA,QAAAG,GAAAH,EACA,QAAAG,GAAAY,GAAAf,oBAGAC,EACA,UAAAE,GAAAF,qBAEA,aAAAW,GAAAX,IAGF,OAAAe,OAAAC,EAAAA,KAAAC,OAAAC,OAAA,CAAAC,KAAA,OAAAC,MAAA,SAAA,CAAAjB,SAAA,CAAAkB,EAAAC,IAAA,MAAAL,OAAAC,OAAA,CAAAK,MAAAC,EAAAC,MAAAC,GAAA,CAAAvB,SAAAkB,EAAAC,IAAA,MAAAL,OAAAC,OAAA,CAAAK,MAAAI,GAAA,CAAAxB,SAAAF,QAAAoB,EAAAC,IAAA,MAAAL,OAAAC,OAAA,CAAAK,MAxDF,WAwDEE,MAAAG,GAAA,CAAAzB,SAAAA"}

package/amd/UNSAFE_Layer.js

@@ -1,2 +1,2 @@
-define(["exports","preact/compat","preact","preact/jsx-runtime"],(function(e,t,r,n){"use strict";const o=r.createContext({}),a="__oj_logical_parent",l=t.forwardRef(((e,t)=>n.jsx("div",{id:"__oj_layerhost_container",ref:t})));l.displayName="Forwarded<LayerHost>",e.Layer=e=>{var r;const n=t.useContext(o),l=null===(r=n.getHost)||void 0===r?void 0:r.call(n),c=t.useMemo((()=>l),[l]),[s,u]=t.useState(null);return t.useLayoutEffect((()=>{var t;if(!c)return;const r=(null!==(t=c.ownerDocument)&&void 0!==t?t:document).createElement("div");return e.logicalParentRef&&(r[a]=e.logicalParentRef.current),c.appendChild(r),u(r),()=>{c&&r&&c.contains(r)&&(delete r[a],c.removeChild(r)),u(null)}}),[c]),s&&t.createPortal(e.children,s)},e.LayerContext=o,e.LayerManager=function({children:e}){const[r,a]=t.useState(),c=t.useCallback((e=>{null!==e&&a(e)}),[]);return n.jsx(o.Consumer,{children:t=>{const a=r?{getHost:()=>r}:{},s=t.getHost?t:a;return n.jsxs(o.Provider,Object.assign({value:s},{children:[e,!t.getHost&&n.jsx(l,{ref:c})]}))}})},Object.defineProperty(e,"__esModule",{value:!0})}));
+define(["exports","preact/compat","preact","preact/jsx-runtime"],function(e,t,r,n){"use strict";const o=r.createContext({}),a="__oj_logical_parent",l=t.forwardRef((e,t)=>n.jsx("div",{id:"__oj_layerhost_container",ref:t}));l.displayName="Forwarded<LayerHost>",e.Layer=e=>{var r;const n=t.useContext(o),l=null===(r=n.getHost)||void 0===r?void 0:r.call(n),c=t.useMemo(()=>l,[l]),[s,u]=t.useState(null);return t.useLayoutEffect(()=>{var t;if(!c)return;const r=(null!==(t=c.ownerDocument)&&void 0!==t?t:document).createElement("div");return e.logicalParentRef&&(r[a]=e.logicalParentRef.current),c.appendChild(r),u(r),()=>{c&&r&&c.contains(r)&&(delete r[a],c.removeChild(r)),u(null)}},[c]),s&&t.createPortal(e.children,s)},e.LayerContext=o,e.LayerManager=function({children:e}){const[r,a]=t.useState(),c=t.useCallback(e=>{null!==e&&a(e)},[]);return n.jsx(o.Consumer,{children:t=>{const a=r?{getHost:()=>r}:{},s=t.getHost?t:a;return n.jsxs(o.Provider,Object.assign({value:s},{children:[e,!t.getHost&&n.jsx(l,{ref:c})]}))}})},Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=UNSAFE_Layer.js.map

package/amd/UNSAFE_Layer.js.map

@@ -1 +1 @@
-{"version":3,"file":"UNSAFE_Layer.js","sources":["../../src/UNSAFE_Layer/LayerContext.ts","../../src/UNSAFE_Layer/Layer.tsx","../../src/UNSAFE_Layer/LayerHost.tsx","../../src/UNSAFE_Layer/LayerManager.tsx"],"sourcesContent":["import { createContext } from 'preact';\n\nexport type LayerContextProps = {\n  getHost?: () => Element;\n};\n\nexport const LayerContext = createContext<LayerContextProps>({});\n","import { VNode, RefObject } from 'preact';\nimport { createPortal, useContext, useLayoutEffect, useMemo, useState } from 'preact/compat';\nimport { LayerContext } from './LayerContext';\n\nconst _LOGICAL_PARENT = '__oj_logical_parent';\n\ntype Props = {\n  /**\n   * The content to be re-parented using Portal\n   */\n  children: VNode;\n  /**\n   * Logical parent of the re-parented content. Typically the 'launcher' associated\n   * with the popup.\n   */\n  logicalParentRef?: RefObject<Element> | null;\n};\n\ntype LayerElement = HTMLDivElement & {\n  __oj_logical_parent?: Element | null;\n};\n\nconst Layer = (props: Props) => {\n  const context = useContext(LayerContext);\n  const defaultHost = context.getHost?.();\n  const host = useMemo(() => defaultHost, [defaultHost]);\n  const [layerContainer, setLayerContainer] = useState<Element | null>(null);\n\n  // Really need useLayoutEffect instead of useEffect here. Otherwise the re-parented\n  // content does not get re-rendered with valid ref's\n  useLayoutEffect(() => {\n    if (!host) return;\n    const doc = host.ownerDocument ?? document;\n    const layer: LayerElement = doc.createElement('div');\n\n    if (props.logicalParentRef) {\n      layer[_LOGICAL_PARENT] = props.logicalParentRef.current;\n    }\n\n    host.appendChild(layer);\n    setLayerContainer(layer);\n\n    return () => {\n      if (host && layer && host.contains(layer)) {\n        delete layer[_LOGICAL_PARENT];\n        host.removeChild(layer);\n      }\n      setLayerContainer(null);\n    };\n  }, [host]);\n\n  return layerContainer && createPortal(props.children, layerContainer);\n};\n\nexport default Layer;\n","/**\n * The LayerHost is a div which is created in place\n * where you want to \"house\" a portaled content\n */\nimport { forwardRef } from 'preact/compat';\n\nconst LayerHost = forwardRef<HTMLDivElement>((_props, ref) => {\n  return <div id=\"__oj_layerhost_container\" ref={ref} />;\n});\n\nLayerHost.displayName = 'Forwarded<LayerHost>';\n\nexport default LayerHost;\n","/**\n * The LayerManager wraps your application and creates two adjacent divs for\n * rendering your application and housing Layers.\n */\nimport { ComponentChildren } from 'preact';\nimport { useCallback, useState } from 'preact/compat';\nimport { LayerContext, LayerContextProps } from './LayerContext';\nimport LayerHost from './LayerHost';\n\ntype LayerManagerProps = {\n  children?: ComponentChildren;\n};\n\nexport function LayerManager({ children }: LayerManagerProps) {\n  const [defaultHost, setDefaultHost] = useState<Element>();\n  //const context = useContext(LayerContext);\n  const defaultHostRef = useCallback((el: Element | null) => {\n    // ref callbacks fire after the component has been unnmounted so we do not\n    // want to set state in this use-case\n    if (el !== null) {\n      setDefaultHost(el);\n    }\n  }, []);\n\n  return (\n    <LayerContext.Consumer>\n      {(value: LayerContextProps) => {\n        const defaultHostContext = defaultHost ? { getHost: () => defaultHost } : {};\n        const layerContext = value.getHost ? value : defaultHostContext;\n        return (\n          <LayerContext.Provider value={layerContext}>\n            {children}\n            {!value.getHost && <LayerHost ref={defaultHostRef} />}\n          </LayerContext.Provider>\n        );\n      }}\n    </LayerContext.Consumer>\n  );\n}\n"],"names":["LayerContext","createContext","_LOGICAL_PARENT","LayerHost","forwardRef","_props","ref","_jsx","id","displayName","props","context","useContext","defaultHost","_a","getHost","host","useMemo","layerContainer","setLayerContainer","useState","useLayoutEffect","layer","ownerDocument","document","createElement","logicalParentRef","current","appendChild","contains","removeChild","createPortal","children","setDefaultHost","defaultHostRef","useCallback","el","Consumer","value","defaultHostContext","layerContext","_jsxs","jsxs","Provider","Object","assign"],"mappings":"uGAMaA,EAAeC,EAAaA,cAAoB,ICFvDC,EAAkB,sBCElBC,EAAYC,EAAUA,YAAiB,CAACC,EAAQC,IAC7CC,EAAAA,IAAA,MAAA,CAAKC,GAAG,2BAA2BF,IAAKA,MAGjDH,EAAUM,YAAc,+BDYTC,UACb,MAAMC,EAAUC,aAAWZ,GACrBa,UAAcC,EAAAH,EAAQI,sCACtBC,EAAOC,EAAAA,SAAQ,IAAMJ,GAAa,CAACA,KAClCK,EAAgBC,GAAqBC,EAAQA,SAAiB,MAyBrE,OArBAC,EAAAA,iBAAgB,WACd,IAAKL,EAAM,OACX,MACMM,GADwB,QAAlBR,EAAAE,EAAKO,qBAAa,IAAAT,EAAAA,EAAIU,UACFC,cAAc,OAS9C,OAPIf,EAAMgB,mBACRJ,EAAMpB,GAAmBQ,EAAMgB,iBAAiBC,SAGlDX,EAAKY,YAAYN,GACjBH,EAAkBG,GAEX,KACDN,GAAQM,GAASN,EAAKa,SAASP,YAC1BA,EAAMpB,GACbc,EAAKc,YAAYR,IAEnBH,EAAkB,SAEnB,CAACH,IAEGE,GAAkBa,EAAYA,aAACrB,EAAMsB,SAAUd,oCEtCxC,UAAac,SAAEA,IAC7B,MAAOnB,EAAaoB,GAAkBb,EAAQA,WAExCc,EAAiBC,eAAaC,IAGvB,OAAPA,GACFH,EAAeG,KAEhB,IAEH,OACE7B,EAAAA,IAACP,EAAaqC,SACX,CAAAL,SAACM,IACA,MAAMC,EAAqB1B,EAAc,CAAEE,QAAS,IAAMF,GAAgB,GACpE2B,EAAeF,EAAMvB,QAAUuB,EAAQC,EAC7C,OACEE,EAACC,KAAA1C,EAAa2C,SAASC,OAAAC,OAAA,CAAAP,MAAOE,GAC3B,CAAAR,SAAA,CAAAA,GACCM,EAAMvB,SAAWR,EAAAA,IAACJ,EAAS,CAACG,IAAK4B"}
+{"version":3,"file":"UNSAFE_Layer.js","sources":["../../src/UNSAFE_Layer/LayerContext.ts","../../src/UNSAFE_Layer/Layer.tsx","../../src/UNSAFE_Layer/LayerHost.tsx","../../src/UNSAFE_Layer/LayerManager.tsx"],"sourcesContent":["import { createContext } from 'preact';\n\nexport type LayerContextProps = {\n  getHost?: () => Element;\n};\n\nexport const LayerContext = createContext<LayerContextProps>({});\n","import { VNode, RefObject } from 'preact';\nimport { createPortal, useContext, useLayoutEffect, useMemo, useState } from 'preact/compat';\nimport { LayerContext } from './LayerContext';\n\nconst _LOGICAL_PARENT = '__oj_logical_parent';\n\ntype Props = {\n  /**\n   * The content to be re-parented using Portal\n   */\n  children: VNode;\n  /**\n   * Logical parent of the re-parented content. Typically the 'launcher' associated\n   * with the popup.\n   */\n  logicalParentRef?: RefObject<Element> | null;\n};\n\ntype LayerElement = HTMLDivElement & {\n  __oj_logical_parent?: Element | null;\n};\n\nconst Layer = (props: Props) => {\n  const context = useContext(LayerContext);\n  const defaultHost = context.getHost?.();\n  const host = useMemo(() => defaultHost, [defaultHost]);\n  const [layerContainer, setLayerContainer] = useState<Element | null>(null);\n\n  // Really need useLayoutEffect instead of useEffect here. Otherwise the re-parented\n  // content does not get re-rendered with valid ref's\n  useLayoutEffect(() => {\n    if (!host) return;\n    const doc = host.ownerDocument ?? document;\n    const layer: LayerElement = doc.createElement('div');\n\n    if (props.logicalParentRef) {\n      layer[_LOGICAL_PARENT] = props.logicalParentRef.current;\n    }\n\n    host.appendChild(layer);\n    setLayerContainer(layer);\n\n    return () => {\n      if (host && layer && host.contains(layer)) {\n        delete layer[_LOGICAL_PARENT];\n        host.removeChild(layer);\n      }\n      setLayerContainer(null);\n    };\n  }, [host]);\n\n  return layerContainer && createPortal(props.children, layerContainer);\n};\n\nexport default Layer;\n","/**\n * The LayerHost is a div which is created in place\n * where you want to \"house\" a portaled content\n */\nimport { forwardRef } from 'preact/compat';\n\nconst LayerHost = forwardRef<HTMLDivElement>((_props, ref) => {\n  return <div id=\"__oj_layerhost_container\" ref={ref} />;\n});\n\nLayerHost.displayName = 'Forwarded<LayerHost>';\n\nexport default LayerHost;\n","/**\n * The LayerManager wraps your application and creates two adjacent divs for\n * rendering your application and housing Layers.\n */\nimport { ComponentChildren } from 'preact';\nimport { useCallback, useState } from 'preact/compat';\nimport { LayerContext, LayerContextProps } from './LayerContext';\nimport LayerHost from './LayerHost';\n\ntype LayerManagerProps = {\n  children?: ComponentChildren;\n};\n\nexport function LayerManager({ children }: LayerManagerProps) {\n  const [defaultHost, setDefaultHost] = useState<Element>();\n  //const context = useContext(LayerContext);\n  const defaultHostRef = useCallback((el: Element | null) => {\n    // ref callbacks fire after the component has been unnmounted so we do not\n    // want to set state in this use-case\n    if (el !== null) {\n      setDefaultHost(el);\n    }\n  }, []);\n\n  return (\n    <LayerContext.Consumer>\n      {(value: LayerContextProps) => {\n        const defaultHostContext = defaultHost ? { getHost: () => defaultHost } : {};\n        const layerContext = value.getHost ? value : defaultHostContext;\n        return (\n          <LayerContext.Provider value={layerContext}>\n            {children}\n            {!value.getHost && <LayerHost ref={defaultHostRef} />}\n          </LayerContext.Provider>\n        );\n      }}\n    </LayerContext.Consumer>\n  );\n}\n"],"names":["LayerContext","createContext","_LOGICAL_PARENT","LayerHost","forwardRef","_props","ref","_jsx","id","displayName","props","context","useContext","defaultHost","_a","getHost","host","useMemo","layerContainer","setLayerContainer","useState","useLayoutEffect","layer","ownerDocument","document","createElement","logicalParentRef","current","appendChild","contains","removeChild","createPortal","children","setDefaultHost","defaultHostRef","useCallback","el","Consumer","value","defaultHostContext","layerContext","_jsxs","jsxs","Provider","Object","assign"],"mappings":"sGAMaA,EAAeC,EAAaA,cAAoB,ICFvDC,EAAkB,sBCElBC,EAAYC,EAAUA,WAAiB,CAACC,EAAQC,IAC7CC,EAAAA,IAAA,MAAA,CAAKC,GAAG,2BAA2BF,IAAKA,KAGjDH,EAAUM,YAAc,+BDYTC,UACb,MAAMC,EAAUC,aAAWZ,GACrBa,UAAcC,EAAAH,EAAQI,sCACtBC,EAAOC,EAAAA,QAAQ,IAAMJ,EAAa,CAACA,KAClCK,EAAgBC,GAAqBC,EAAQA,SAAiB,MAyBrE,OArBAC,EAAAA,gBAAgB,WACd,IAAKL,EAAM,OACX,MACMM,GADwB,QAAlBR,EAAAE,EAAKO,qBAAa,IAAAT,EAAAA,EAAIU,UACFC,cAAc,OAS9C,OAPIf,EAAMgB,mBACRJ,EAAMpB,GAAmBQ,EAAMgB,iBAAiBC,SAGlDX,EAAKY,YAAYN,GACjBH,EAAkBG,GAEX,KACDN,GAAQM,GAASN,EAAKa,SAASP,YAC1BA,EAAMpB,GACbc,EAAKc,YAAYR,IAEnBH,EAAkB,QAEnB,CAACH,IAEGE,GAAkBa,EAAYA,aAACrB,EAAMsB,SAAUd,oCEtCxC,UAAac,SAAEA,IAC7B,MAAOnB,EAAaoB,GAAkBb,EAAQA,WAExCc,EAAiBC,cAAaC,IAGvB,OAAPA,GACFH,EAAeG,IAEhB,IAEH,OACE7B,EAAAA,IAACP,EAAaqC,SACX,CAAAL,SAACM,IACA,MAAMC,EAAqB1B,EAAc,CAAEE,QAAS,IAAMF,GAAgB,GACpE2B,EAAeF,EAAMvB,QAAUuB,EAAQC,EAC7C,OACEE,EAACC,KAAA1C,EAAa2C,SAASC,OAAAC,OAAA,CAAAP,MAAOE,GAC3B,CAAAR,SAAA,CAAAA,GACCM,EAAMvB,SAAWR,EAAAA,IAACJ,EAAS,CAACG,IAAK4B"}

package/amd/UNSAFE_Link.css

@@ -1,5 +1,5 @@
-._13q0aqh{display:inline;color:var(--oj-c-link-text-color);text-decoration-color:var(--oj-c-link-text-color);text-decoration-thickness:1px;text-underline-offset:var(--oj-c-link-text-underline-offset);cursor:var( --oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable);}._13q0aqh:visited{color:--oj-c-link-text-color-visited;}._13q0aqh:active{color:--oj-c-link-text-color-active;}._13q0aqh:focus-visible{outline-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color);outline-style:dotted;outline-width:1px;outline-offset:1px;}
-._4yq2zf{--oj-c-link-text-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary);--oj-c-link-text-color-visited:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary);--oj-c-link-text-color-active:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary);}
-._1ojtqf1{--oj-c-link-text-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary);--oj-c-link-text-color-visited:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary);--oj-c-link-text-color-active:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary);}
-._1qaiolp{text-decoration-line:var(--oj-c-link-standalone-text-decoration);}._1qaiolp:hover{text-decoration-line:var(--oj-c-link-standalone-text-decoration-hover);}._1qaiolp:active{text-decoration-line:var(--oj-c-link-standalone-text-decoration-hover);}
-.a7jbk4{text-decoration-line:var(--oj-c-link-embedded-text-decoration);}.a7jbk4:hover{text-decoration-line:var(--oj-c-link-embedded-text-decoration-hover);}.a7jbk4:active{text-decoration-line:var(--oj-c-link-embedded-text-decoration-hover);}
+._1d7zjoh{display:inline;color:var(--oj-c-link-text-color);text-decoration-color:var(--oj-c-link-text-color);text-decoration-thickness:1px;text-underline-offset:var(--oj-c-link-text-underline-offset);cursor:var( --oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable);}._1d7zjoh:visited{color:--oj-c-link-text-color-visited;}._1d7zjoh:active{color:--oj-c-link-text-color-active;}._1d7zjoh:focus-visible{outline-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color);outline-style:dotted;outline-width:1px;outline-offset:1px;}
+._11xcvau{--oj-c-link-text-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary);--oj-c-link-text-color-visited:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary);--oj-c-link-text-color-active:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary);}
+.if0gu7{--oj-c-link-text-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary);--oj-c-link-text-color-visited:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary);--oj-c-link-text-color-active:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary);}
+.vrouzy{text-decoration-line:var(--oj-c-link-standalone-text-decoration);}.vrouzy:hover{text-decoration-line:var(--oj-c-link-standalone-text-decoration-hover);}.vrouzy:active{text-decoration-line:var(--oj-c-link-standalone-text-decoration-hover);}
+._1byz64{text-decoration-line:var(--oj-c-link-embedded-text-decoration);}._1byz64:hover{text-decoration-line:var(--oj-c-link-embedded-text-decoration-hover);}._1byz64:active{text-decoration-line:var(--oj-c-link-embedded-text-decoration-hover);}

package/amd/UNSAFE_Link.js

@@ -1,2 +1,2 @@
-define(["exports","./Link-4a365734","preact/jsx-runtime","css!./UNSAFE_Link.css","./utils/UNSAFE_classNames","./classNames-3c307969","./hooks/UNSAFE_usePress","preact/hooks"],(function(e,s,i,a,t,n,r,c){"use strict";e.Link=s.Link,Object.defineProperty(e,"__esModule",{value:!0})}));
+define(["exports","./Link-f42b6199","preact/jsx-runtime","css!./UNSAFE_Link.css","./utils/UNSAFE_classNames","./classNames-e580c7c7","./hooks/UNSAFE_usePress","preact/hooks"],function(e,s,i,t,a,c,n,r){"use strict";e.Link=s.Link,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=UNSAFE_Link.js.map

package/amd/UNSAFE_ListItemLayout.css

@@ -1,10 +1,10 @@
-._1xa4oy4 > *{margin-top:0 !important;margin-bottom:0 !important;margin-left:0 !important;margin-right:0 !important;}
-._8echtc{align-self:center;margin:-0.875rem -0.875rem;}
-._121lbq8{align-self:center;min-width:0;}
-._759v9m{padding-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x);}
-._1yhfo60{display:flex;flex-direction:column;}
-.u7wbp{display:flex;flex-direction:row;justify-content:right;align-self:center;}
-.zb1x67{display:flex;flex-direction:row;justify-content:right;}
-.bxmi73{align-self:end;}
+._17uoo0g > *{margin-top:0 !important;margin-bottom:0 !important;margin-left:0 !important;margin-right:0 !important;}
+.ijnoyc{align-self:center;margin:-0.875rem -0.875rem;}
+.uzx8iy{align-self:center;min-width:0;}
+.b4kt8k{padding-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x);}
+._1n8rfae{display:flex;flex-direction:column;}
+._1or8h91{display:flex;flex-direction:row;justify-content:right;align-self:center;}
+._9vesbx{display:flex;flex-direction:row;justify-content:right;}
+.ojlrqa{align-self:end;}
 
-._1torglj{display:flex;flex-direction:column;}
+._11z9obb{display:flex;flex-direction:column;}

package/amd/UNSAFE_ListItemLayout.js

@@ -1,2 +1,2 @@
-define(["exports","./ListItemTextLayout-fb9952bb","preact/jsx-runtime","css!./UNSAFE_ListItemLayout.css","./UNSAFE_Grid","./tslib.es6-d070fafc","./utils/UNSAFE_interpolations/grid","./utils/UNSAFE_interpolations/boxalignment","./keys-9d7cdf1f","./_curry1-b9493cf6","./_has-fad415e9","./utils/UNSAFE_size","./utils/UNSAFE_arrayUtils","./utils/UNSAFE_mergeInterpolations","./utils/UNSAFE_classNames","./classNames-3c307969","./_curry3-8ffdde1d","./_curry2-b02f6247","./UNSAFE_Text","./Text-4fcf43f2","./hooks/UNSAFE_useTabbableMode","preact","preact/hooks"],(function(t,e,s,i,a,r,o,u,l,c,f,_,n,d,m,L,b,y,N,x,U,A,E){"use strict";t.ListItemLayout=e.ListItemLayout,t.ListItemText=e.ListItemText,t.ListItemTextLayout=e.ListItemTextLayout,Object.defineProperty(t,"__esModule",{value:!0})}));
+define(["exports","./ListItemTextLayout-44f494ea","preact/jsx-runtime","css!./UNSAFE_ListItemLayout.css","./UNSAFE_Grid","./tslib.es6-fa3971d7","./utils/UNSAFE_interpolations/grid","./utils/UNSAFE_interpolations/boxalignment","./keys-992a0824","./_curry1-9eeaf6ed","./_has-aa07e02d","./utils/UNSAFE_size","./utils/UNSAFE_arrayUtils","./utils/UNSAFE_mergeInterpolations","./utils/UNSAFE_classNames","./classNames-e580c7c7","./_curry3-167fa665","./_curry2-466cc994","./UNSAFE_Text","./Text-0f26039f","./hooks/UNSAFE_useTabbableMode","preact","preact/hooks"],function(t,e,s,a,i,r,o,u,l,c,_,n,m,L,y,N,x,U,d,f,A,E,F){"use strict";t.ListItemLayout=e.ListItemLayout,t.ListItemText=e.ListItemText,t.ListItemTextLayout=e.ListItemTextLayout,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=UNSAFE_ListItemLayout.js.map

package/amd/UNSAFE_ListView.js

@@ -1,2 +1,2 @@
-define(["exports","./ListView-6a3088e3","preact/jsx-runtime","./PRIVATE_List","./List-56a1055e","preact/hooks",'module',"./utils/UNSAFE_classNames","./classNames-3c307969","./utils/UNSAFE_mergeProps","./utils/UNSAFE_keys","./LoadMoreCollection-60a7b2a5","./PRIVATE_Collection","./Collection-0cd076bf","preact","./hooks/UNSAFE_useViewportIntersect","./PRIVATE_VirtualizedCollection","./VirtualizedCollection-45f2c32e","./utils/UNSAFE_arrayUtils","./hooks/UNSAFE_useTabbableMode","./UNSAFE_FocusTrap","./FocusTrap-444cf340","preact/compat","./utils/PRIVATE_tabbableUtils","./_curry1-b9493cf6","./_curry2-b02f6247","./_curry3-8ffdde1d","./hooks/UNSAFE_useId","./hooks/PRIVATE_useSelection","./hooks/PRIVATE_useCurrentKey","./hooks/PRIVATE_useCollectionFocusRing","./hooks/PRIVATE_useTabbableModeSet","./hooks/PRIVATE_useItemAction","./utils/PRIVATE_collectionUtils","./UNSAFE_Skeleton","./Skeleton-6261f735","./tslib.es6-d070fafc","./utils/UNSAFE_interpolations/dimensions","./utils/UNSAFE_size","./utils/UNSAFE_mergeInterpolations","./_has-fad415e9","./utils/UNSAFE_interpolations/borders","./UNSAFE_Flex","./Flex-0dec0de8","./utils/UNSAFE_interpolations/boxalignment","./keys-9d7cdf1f","./utils/UNSAFE_interpolations/flexbox","./flexbox-b8de8bb4","./utils/UNSAFE_interpolations/flexitem","./flexitem-d8628091","./UNSAFE_Selector","./index-55b2db15","./index-bd92b0b3","./UNSAFE_Icon","./Icon-87f4ca0b","./hooks/UNSAFE_useTooltip","./UNSAFE_Floating","./Floating-a320db48","./index-2f5333e8","./hooks/UNSAFE_useUser","./UNSAFE_Environment","./UNSAFE_Layer","./utils/PRIVATE_floatingUtils","./utils/PRIVATE_refUtils","./hooks/UNSAFE_useOutsideClick","./hooks/UNSAFE_useHover","./hooks/UNSAFE_useToggle","./hooks/UNSAFE_useFocus","./hooks/UNSAFE_useTouch","./hooks/UNSAFE_useAnimation","./useAnimation-8e4e9999","./hooks/UNSAFE_useTheme","./hooks/UNSAFE_useTranslationBundle"],(function(e,o,s,i,t,l,n,u,_,a,A,r,E,c,F,U,S,N,d,b,f,k,h,T,p,I,V,m,x,P,R,g,y,C,L,w,M,v,z,j,O,B,H,K,q,D,G,J,Q,W,X,Y,Z,$,ee,oe,se,ie,te,le,ne,ue,_e,ae,Ae,re,Ee,ce,Fe,Ue,Se,Ne,de){"use strict";e.ListView=o.ListView,Object.defineProperty(e,"__esModule",{value:!0})}));
+define(["exports","./ListView-a4690952","preact/jsx-runtime","./PRIVATE_List","./List-468ffcb6","preact/hooks",'module',"./utils/UNSAFE_classNames","./classNames-e580c7c7","./utils/UNSAFE_mergeProps","./utils/UNSAFE_keys","./LoadMoreCollection-b395a4ad","./PRIVATE_Collection","./Collection-805cf4b4","preact","./hooks/UNSAFE_useViewportIntersect","./PRIVATE_VirtualizedCollection","./VirtualizedCollection-83b0641b","./utils/UNSAFE_arrayUtils","./hooks/UNSAFE_useTabbableMode","./UNSAFE_FocusTrap","./FocusTrap-4796ed88","preact/compat","./utils/PRIVATE_tabbableUtils","./_curry1-9eeaf6ed","./_curry2-466cc994","./_curry3-167fa665","./hooks/UNSAFE_useId","./hooks/PRIVATE_useSelection","./hooks/PRIVATE_useCurrentKey","./hooks/PRIVATE_useCollectionFocusRing","./hooks/PRIVATE_useTabbableModeSet","./hooks/PRIVATE_useItemAction","./utils/PRIVATE_collectionUtils","./UNSAFE_Skeleton","./Skeleton-3ccbc4fc","./tslib.es6-fa3971d7","./utils/UNSAFE_interpolations/dimensions","./utils/UNSAFE_size","./utils/UNSAFE_mergeInterpolations","./_has-aa07e02d","./utils/UNSAFE_interpolations/borders","./UNSAFE_Flex","./Flex-bfc6c229","./utils/UNSAFE_interpolations/boxalignment","./keys-992a0824","./utils/UNSAFE_interpolations/flexbox","./flexbox-37da5c1b","./utils/UNSAFE_interpolations/flexitem","./flexitem-f592cd81","./UNSAFE_Selector","./index-03ab344e","./index-4d399da7","./UNSAFE_Icon","./Icon-66acac47","./hooks/UNSAFE_useTooltip","./UNSAFE_Floating","./Floating-863a4a52","./index-17cde748","./hooks/UNSAFE_useUser","./UNSAFE_Environment","./UNSAFE_Layer","./utils/PRIVATE_floatingUtils","./utils/PRIVATE_refUtils","./hooks/UNSAFE_useOutsideClick","./hooks/UNSAFE_useHover","./hooks/UNSAFE_useToggle","./hooks/UNSAFE_useFocus","./hooks/UNSAFE_useTouch","./hooks/UNSAFE_useAnimation","./useAnimation-215b2be2","./hooks/UNSAFE_useTheme","./hooks/UNSAFE_useTranslationBundle"],function(e,o,s,i,t,l,a,n,u,c,_,A,r,E,F,U,S,N,b,d,k,h,T,f,p,I,V,m,x,P,R,g,y,C,L,w,M,v,z,j,O,B,H,K,q,D,G,J,Q,W,X,Y,Z,$,ee,oe,se,ie,te,le,ae,ne,ue,ce,_e,Ae,re,Ee,Fe,Ue,Se,Ne,be){"use strict";e.ListView=o.ListView,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=UNSAFE_ListView.js.map

package/amd/UNSAFE_LiveRegion.css

@@ -1 +1 @@
-._15fafo4{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow-x:hidden;overflow-y:hidden;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;width:1px;position:absolute;}
+.oanrbl{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow-x:hidden;overflow-y:hidden;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;width:1px;position:absolute;}

package/amd/UNSAFE_LiveRegion.js

@@ -1,2 +1,2 @@
-define(["exports","preact/jsx-runtime","css!./UNSAFE_LiveRegion.css","preact/hooks"],(function(e,t,i,a){"use strict";e.LiveRegion=function({atomic:e="false",children:i="",timeout:n=100,type:s="polite"}){const c=function(e,t){const[i,n]=a.useState(),s=a.useCallback((()=>n(e)),[e]),c=a.useCallback((()=>setTimeout(s,t)),[s,t]);return a.useEffect((()=>{const e=c();return()=>clearTimeout(e)}),[c]),i}(i,n);return t.jsx("span",Object.assign({"aria-live":s,"aria-atomic":e,class:"_15fafo4"},{children:c}))},Object.defineProperty(e,"__esModule",{value:!0})}));
+define(["exports","preact/jsx-runtime","css!./UNSAFE_LiveRegion.css","preact/hooks"],function(e,t,i,a){"use strict";e.LiveRegion=function({atomic:e="false",children:i="",timeout:n=100,type:s="polite"}){const c=function(e,t){const[i,n]=a.useState(),s=a.useCallback(()=>n(e),[e]),c=a.useCallback(()=>setTimeout(s,t),[s,t]);return a.useEffect(()=>{const e=c();return()=>clearTimeout(e)},[c]),i}(i,n);return t.jsx("span",Object.assign({"aria-live":s,"aria-atomic":e,class:"oanrbl"},{children:c}))},Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=UNSAFE_LiveRegion.js.map

package/amd/UNSAFE_LiveRegion.js.map

@@ -1 +1 @@
-{"version":3,"file":"UNSAFE_LiveRegion.js","sources":["../../src/UNSAFE_LiveRegion/LiveRegion.tsx"],"sourcesContent":["import { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\n\nconst offScreenStyle = cssProps`${{\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: '1px',\n  margin: '-1px',\n  overflowX: 'hidden',\n  overflowY: 'hidden',\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n  width: '1px',\n  position: 'absolute'\n}}`;\n\ntype Props = {\n  /**\n   * Whether this live region is atomic\n   */\n  atomic?: 'true' | 'false';\n\n  /**\n   * The text to be read out in the live region\n   */\n  children?: string;\n\n  /**\n   * Timeout for updating the text\n   */\n  timeout?: number;\n\n  /**\n   * The value for the aria-live attribute\n   */\n  type?: 'assertive' | 'polite' | 'off';\n};\n\n/**\n * A helper component that renders an aria-live region\n *\n * TODO: Create a more centralized component that can handle aria-live region for\n * the whole application and use context api to communicate\n */\nfunction LiveRegion({ atomic = 'false', children = '', timeout = 100, type = 'polite' }: Props) {\n  const ariaLiveText = useLiveText(children, timeout);\n\n  return (\n    <span aria-live={type} aria-atomic={atomic} class={offScreenStyle}>\n      {ariaLiveText}\n    </span>\n  );\n}\n\n/**\n * A custom hook for handling the aria-live region\n *\n * @param text The aria-live text to use\n * @param timeout The timeout for setting the aria-live text async\n * @returns The aria-live text\n */\nfunction useLiveText(text: string, timeout: number) {\n  const [liveText, setLiveText] = useState<string>();\n  const updateText = useCallback(() => setLiveText(text), [text]);\n  const updateTextAsync = useCallback(() => setTimeout(updateText, timeout), [updateText, timeout]);\n\n  useEffect(() => {\n    const timeoutId = updateTextAsync();\n\n    return () => clearTimeout(timeoutId);\n  }, [updateTextAsync]);\n\n  return liveText;\n}\n\nexport { LiveRegion };\n"],"names":["atomic","children","timeout","type","text","updateText","useCallback","setLiveText","timeoutId","updateTextAsync","clearTimeout","liveText","_jsx","Object","assign","class","ariaLiveText"],"mappings":"8GA8CA,UAAAA,OAAAA,EAAA,QAAAC,SAAAA,EAAA,GAAAC,QAAAA,EAAA,IAAAC,KAAAA,EAAA,mBAiBA,SAAAC,EAAAF,2BAEEG,EAAAC,EAAAA,aAAA,IAAAC,EAAAH,IAAA,CAAAA,iDASA,yBALE,MAAAI,EAAAC,IAEA,MAAA,IAAAC,aAAAF,KACF,CAAAC,IAEAE,QAzBA,OAAAC,MAAA,OAAAC,OAAAC,OAAA,CAAA,YAAAX,EAAA,cAAAH,EAAAe,MA9CF,YA8CE,CAAAd,SAAAe"}
+{"version":3,"file":"UNSAFE_LiveRegion.js","sources":["../../src/UNSAFE_LiveRegion/LiveRegion.tsx"],"sourcesContent":["import { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\n\nconst offScreenStyle = cssProps`${{\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: '1px',\n  margin: '-1px',\n  overflowX: 'hidden',\n  overflowY: 'hidden',\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n  width: '1px',\n  position: 'absolute'\n}}`;\n\ntype Props = {\n  /**\n   * Whether this live region is atomic\n   */\n  atomic?: 'true' | 'false';\n\n  /**\n   * The text to be read out in the live region\n   */\n  children?: string;\n\n  /**\n   * Timeout for updating the text\n   */\n  timeout?: number;\n\n  /**\n   * The value for the aria-live attribute\n   */\n  type?: 'assertive' | 'polite' | 'off';\n};\n\n/**\n * A helper component that renders an aria-live region\n *\n * TODO: Create a more centralized component that can handle aria-live region for\n * the whole application and use context api to communicate\n */\nfunction LiveRegion({ atomic = 'false', children = '', timeout = 100, type = 'polite' }: Props) {\n  const ariaLiveText = useLiveText(children, timeout);\n\n  return (\n    <span aria-live={type} aria-atomic={atomic} class={offScreenStyle}>\n      {ariaLiveText}\n    </span>\n  );\n}\n\n/**\n * A custom hook for handling the aria-live region\n *\n * @param text The aria-live text to use\n * @param timeout The timeout for setting the aria-live text async\n * @returns The aria-live text\n */\nfunction useLiveText(text: string, timeout: number) {\n  const [liveText, setLiveText] = useState<string>();\n  const updateText = useCallback(() => setLiveText(text), [text]);\n  const updateTextAsync = useCallback(() => setTimeout(updateText, timeout), [updateText, timeout]);\n\n  useEffect(() => {\n    const timeoutId = updateTextAsync();\n\n    return () => clearTimeout(timeoutId);\n  }, [updateTextAsync]);\n\n  return liveText;\n}\n\nexport { LiveRegion };\n"],"names":["atomic","children","timeout","type","text","updateText","useCallback","setLiveText","timeoutId","updateTextAsync","clearTimeout","liveText","_jsx","Object","assign","class","ariaLiveText"],"mappings":"6GA8CA,UAAAA,OAAAA,EAAA,QAAAC,SAAAA,EAAA,GAAAC,QAAAA,EAAA,IAAAC,KAAAA,EAAA,mBAiBA,SAAAC,EAAAF,2BAEEG,EAAAC,EAAAA,YAAA,IAAAC,EAAAH,GAAA,CAAAA,+CASA,wBALE,MAAAI,EAAAC,IAEA,MAAA,IAAAC,aAAAF,IACF,CAAAC,IAEAE,QAzBA,OAAAC,MAAA,OAAAC,OAAAC,OAAA,CAAA,YAAAX,EAAA,cAAAH,EAAAe,MA9CF,UA8CE,CAAAd,SAAAe"}

package/amd/UNSAFE_LoadMoreCollection.js

@@ -1,2 +1,2 @@
-define(["exports","./LoadMoreCollection-60a7b2a5","preact/jsx-runtime","preact/hooks","./PRIVATE_Collection","./Collection-0cd076bf","preact","./hooks/UNSAFE_useViewportIntersect"],(function(e,o,t,c,r,l,i,n){"use strict";e.LoadMoreCollection=o.LoadMoreCollection,Object.defineProperty(e,"__esModule",{value:!0})}));
+define(["exports","./LoadMoreCollection-b395a4ad","preact/jsx-runtime","preact/hooks","./PRIVATE_Collection","./Collection-805cf4b4","preact","./hooks/UNSAFE_useViewportIntersect"],function(e,o,t,c,r,l,i,n){"use strict";e.LoadMoreCollection=o.LoadMoreCollection,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=UNSAFE_LoadMoreCollection.js.map

package/amd/UNSAFE_Menu.css

@@ -1,19 +1,19 @@
-._15a4bbb{max-width:90vw;width:max-content;border-radius:var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-lg);box-shadow:var(--oj-c-PRIVATE-DO-NOT-USE-core-dropdown-box-shadow);background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-content);}
-.zwnsky{outline-style:none;padding-top:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x);padding-bottom:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x);}
+.izd77u{max-width:90vw;width:max-content;border-radius:var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-lg);box-shadow:var(--oj-c-PRIVATE-DO-NOT-USE-core-dropdown-box-shadow);background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-content);}
+._1csjoek{outline-style:none;padding-top:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x);padding-bottom:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x);}
 
-.rf9da0{cursor:var(--oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable) !important;width:100%;padding-top:var(--oj-PRIVATE-DO-NOT-USE-collection-list-cell-padding-vertical);padding-bottom:var(--oj-PRIVATE-DO-NOT-USE-collection-list-cell-padding-vertical);padding-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-menu-start-edge-to-start-icon-padding);padding-inline-end:var(--oj-c-PRIVATE-DO-NOT-USE-menu-end-icon-to-end-edge-padding);box-sizing:border-box;min-height:var( --oj-c-PRIVATE-NOT-USE-collection-list-row-height);display:flex;text-align:start;align-items:center;text-decoration-line:none !important;outline-style:none;}
-.ax3aj8{outline-style:dotted;outline-offset:1px;outline-width:1px;outline-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color);}
-._1nyko60{color:var(--oj-c-PRIVATE-DO-NOT-USE-menu-text-color);}._1nyko60:active{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-active);}
-._1lh53o1:not(:active){background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover);}
-@media(hover:hover){.wtilm7:hover:not(:active){background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover);}}
-._1axvkc2{color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger-low);}._1axvkc2:active{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger);}
-.dhkoxh{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger);}
-@media(hover:hover){._18mq4ib:hover{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger);}}
-.jckaqz{display:flex;align-items:center;overflow-x:hidden;overflow-y:hidden;}
-._1o6x3w6{flex-grow:1;min-height:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);}
-.onrvok{flex-shrink:0;font-size:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);height:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);width:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);}
-._13mxig5{margin-inline-end:var(--oj-c-PRIVATE-DO-NOT-USE-menu-start-icon-to-label-padding);}
-._16kqb41{margin-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-menu-label-to-end-icon-padding);}
-.c6bax4{cursor:default !important;color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);}
+.wkwmx4{cursor:var(--oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable) !important;width:100%;padding-top:var(--oj-PRIVATE-DO-NOT-USE-collection-list-cell-padding-vertical);padding-bottom:var(--oj-PRIVATE-DO-NOT-USE-collection-list-cell-padding-vertical);padding-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-menu-start-edge-to-start-icon-padding);padding-inline-end:var(--oj-c-PRIVATE-DO-NOT-USE-menu-end-icon-to-end-edge-padding);box-sizing:border-box;min-height:var( --oj-c-PRIVATE-NOT-USE-collection-list-row-height);display:flex;text-align:start;align-items:center;text-decoration-line:none !important;outline-style:none;}
+._16r7hiu{outline-style:dotted;outline-offset:1px;outline-width:1px;outline-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color);}
+.muumce{color:var(--oj-c-PRIVATE-DO-NOT-USE-menu-text-color);}.muumce:active{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-active);}
+._3h8oyk:not(:active){background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover);}
+@media(hover:hover){._171u4xw:hover:not(:active){background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover);}}
+._1d2zt3x{color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger-low);}._1d2zt3x:active{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger);}
+._1xor16q{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger);}
+@media(hover:hover){._1ecfhto:hover{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger);}}
+._1lvtfxp{display:flex;align-items:center;overflow-x:hidden;overflow-y:hidden;}
+._1gmga84{flex-grow:1;min-height:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);}
+._1x7dqxs{flex-shrink:0;font-size:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);height:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);width:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);}
+._1fyzdex{margin-inline-end:var(--oj-c-PRIVATE-DO-NOT-USE-menu-start-icon-to-label-padding);}
+._1jip6o3{margin-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-menu-label-to-end-icon-padding);}
+._83un7f{cursor:default !important;color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);}
 
-._1axx95k{padding-top:var(--oj-c-PRIVATE-DO-NOT-USE-menu-divider-vertical-padding);padding-bottom:var(--oj-c-PRIVATE-DO-NOT-USE-menu-divider-vertical-padding);}
+._1d2mzs2{padding-top:var(--oj-c-PRIVATE-DO-NOT-USE-menu-divider-vertical-padding);padding-bottom:var(--oj-c-PRIVATE-DO-NOT-USE-menu-divider-vertical-padding);}

package/amd/UNSAFE_Menu.js

@@ -1,2 +1,2 @@
-define(["exports","./Menu-7882480e","./MenuItem-c03348c5","./MenuDivider-eafa71e0","preact/jsx-runtime","preact/hooks","./UNSAFE_Floating","./Floating-a320db48","preact/compat","./index-2f5333e8","./hooks/UNSAFE_useUser","./UNSAFE_Environment","preact","./UNSAFE_Layer","./utils/PRIVATE_floatingUtils","./utils/PRIVATE_refUtils","./hooks/UNSAFE_useOutsideClick","./utils/UNSAFE_arrayUtils","./hooks/PRIVATE_useCollectionFocusRing","./utils/UNSAFE_mergeProps","css!./UNSAFE_Menu.css","./UNSAFE_Text","./Text-4fcf43f2","./tslib.es6-d070fafc","./utils/UNSAFE_mergeInterpolations","./utils/UNSAFE_classNames","./classNames-3c307969","./_curry1-b9493cf6","./_curry3-8ffdde1d","./_curry2-b02f6247","./_has-fad415e9","./hooks/UNSAFE_useHover","./hooks/UNSAFE_useToggle","./hooks/UNSAFE_useId","./hooks/UNSAFE_usePress","./utils/PRIVATE_clientHints","./clientHints-7d8b1c52","./UNSAFE_Divider","./Divider-6855675c"],(function(e,s,i,t,o,r,u,n,c,l,a,_,E,A,U,d,F,f,N,S,m,M,h,k,p,I,g,v,P,T,b,y,x,D,R,V,H,j,C){"use strict";e.Menu=s.Menu,e.MenuItem=i.MenuItem,e.MenuDivider=t.MenuDivider,Object.defineProperty(e,"__esModule",{value:!0})}));
+define(["exports","./Menu-5a5220fc","./MenuItem-884f0dd4","./MenuDivider-a325668f","preact/jsx-runtime","preact/hooks","./UNSAFE_Floating","./Floating-863a4a52","preact/compat","./index-17cde748","./hooks/UNSAFE_useUser","./UNSAFE_Environment","preact","./UNSAFE_Layer","./utils/PRIVATE_floatingUtils","./utils/PRIVATE_refUtils","./hooks/UNSAFE_useOutsideClick","./utils/UNSAFE_arrayUtils","./hooks/PRIVATE_useCollectionFocusRing","./utils/UNSAFE_mergeProps","css!./UNSAFE_Menu.css","./UNSAFE_Text","./Text-0f26039f","./tslib.es6-fa3971d7","./utils/UNSAFE_mergeInterpolations","./utils/UNSAFE_classNames","./classNames-e580c7c7","./_curry1-9eeaf6ed","./_curry3-167fa665","./_curry2-466cc994","./_has-aa07e02d","./hooks/UNSAFE_useHover","./hooks/UNSAFE_useToggle","./hooks/UNSAFE_useId","./hooks/UNSAFE_usePress","./utils/PRIVATE_clientHints","./clientHints-914fecb1","./UNSAFE_Divider","./Divider-9262e69a"],function(e,s,i,t,o,r,u,a,n,l,c,_,E,A,U,F,d,N,S,f,m,M,h,k,p,I,g,v,P,T,y,x,D,R,V,b,H,j,C){"use strict";e.Menu=s.Menu,e.MenuItem=i.MenuItem,e.MenuDivider=t.MenuDivider,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=UNSAFE_Menu.js.map

package/amd/UNSAFE_MessageBanner.js

@@ -1,2 +1,2 @@
-define(["exports","preact/jsx-runtime","preact/hooks","./hooks/PRIVATE_useMessagesFocusManager","./PRIVATE_Message","./UNSAFE_Flex","./UNSAFE_LiveRegion","./Flex-0dec0de8","./MessagesManager-d5b3671c","./MessageUtils-d33dd1be",'module',"./utils/PRIVATE_timer","./utils/UNSAFE_classNames","./classNames-3c307969","./MessageCloseButton-c76a52a8","./UNSAFE_Button","./Button-18083439","./UNSAFE_BaseButton","./BaseButton-c6deca8c","./tslib.es6-d070fafc","./hooks/UNSAFE_usePress","./hooks/UNSAFE_useHover","./hooks/UNSAFE_useToggle","./hooks/UNSAFE_useActive","preact/compat","./utils/UNSAFE_interpolations/dimensions","./utils/UNSAFE_arrayUtils","./utils/UNSAFE_size","./_curry1-b9493cf6","./utils/UNSAFE_mergeInterpolations","./_curry3-8ffdde1d","./_curry2-b02f6247","./_has-fad415e9","./utils/PRIVATE_clientHints","./clientHints-7d8b1c52","./hooks/UNSAFE_useTabbableMode","preact","./utils/UNSAFE_mergeProps","./index-55b2db15","./index-bd92b0b3","./UNSAFE_Icon","./Icon-87f4ca0b","./hooks/UNSAFE_useTooltip","./hooks/UNSAFE_useId","./UNSAFE_Floating","./Floating-a320db48","./index-2f5333e8","./hooks/UNSAFE_useUser","./UNSAFE_Environment","./UNSAFE_Layer","./utils/PRIVATE_floatingUtils","./utils/PRIVATE_refUtils","./hooks/UNSAFE_useOutsideClick","./hooks/UNSAFE_useFocus","./hooks/UNSAFE_useTouch","./hooks/UNSAFE_useAnimation","./useAnimation-8e4e9999","./hooks/UNSAFE_useTheme","./MessageDetail-43b9aea2","./MessageFormattingUtils-b6297ef3","./utils/UNSAFE_getLocale","./utils/UNSAFE_stringUtils","./stringUtils-48915fb5","./Message.types-2209616d","./MessageStartIcon-6ef050cb","./MessageSummary-6829e689","./MessageTimestamp-663c8997","./utils/UNSAFE_interpolations/boxalignment","./keys-9d7cdf1f","./utils/UNSAFE_interpolations/flexbox","./flexbox-b8de8bb4","./utils/UNSAFE_interpolations/flexitem","./flexitem-d8628091","./utils/UNSAFE_logger","./utils/UNSAFE_soundUtils","./PRIVATE_TransitionGroup","./hooks/UNSAFE_useMessagesContext"],(function(e,s,t,n,o,i,a,l,r,u,c,d,g,h,_,F,f,A,E,U,S,m,b,N,x,v,p,k,M,R,y,T,I,j,H,B,P,C,w,O,V,L,z,$,D,G,K,W,q,J,Q,X,Y,Z,ee,se,te,ne,oe,ie,ae,le,re,ue,ce,de,ge,he,_e,Fe,fe,Ae,Ee,Ue,Se,me,be){"use strict";const Ne={entering:e=>({to:{maxHeight:`${e.scrollHeight}px`,overflow:"hidden"},options:{duration:250},end:{maxHeight:"none",overflow:"initial"}}),exiting:e=>Object.assign(Object.assign({},"none"===e.style.maxHeight&&{from:{maxHeight:`${e.scrollHeight}px`,overflow:"hidden"}}),{to:{maxHeight:0,overflow:"hidden"},end:{maxHeight:0,overflow:"hidden"},options:{duration:250}})},xe={maxHeight:0,overflow:"hidden"};e.MessageBanner=function({closeButtonRenderer:e,detailRendererKey:i,data:c,onClose:d,renderers:g,translations:h,type:_="section"}){const F=t.useRef(new Map),f=t.useRef(null),A=t.useRef(null),[E,U]=t.useState(),[S,m]=t.useState(c.length>0),b=t.useRef(c.length),N=t.useRef(0);b.current=c.length;const x=t.useCallback((e=>s=>F.current.set(e,s)),[]);t.useImperativeHandle(A,(()=>({focus:()=>{var e;if(c.length){const s=c[0].key;return null===(e=F.current.get(s))||void 0===e||e.focus(),!0}return!1},contains:e=>{var s,t;return!(!c.length||!e)&&(null!==(t=null===(s=f.current)||void 0===s?void 0:s.contains(e))&&void 0!==t&&t)}})),[c]);const{controller:v,handlers:p}=n.useMessageFocusManager(A,{onFocus:t.useCallback((()=>{U(null==h?void 0:h.navigationFromMessagesRegion)}),[U,h])}),k=t.useCallback((e=>{null==d||d(e)}),[d]),M=t.useCallback(((e,s,t)=>{var n;const o=null==t?void 0:t.contains(document.activeElement);if(0===b.current)return m(!1),void(o&&v.restorePriorFocus());const i=s+1<c.length?s+1:s-1;if(i>-1&&o){const e=c[i].key;null===(n=F.current.get(e))||void 0===n||n.focus()}}),[v,c]);return t.useEffect((()=>{c.length?(m(!0),c.length>N.current&&U(null==h?void 0:h.navigationToMessagesRegion),v.prioritize()):U(""),N.current=c.length}),[v,c,h]),S||0!==c.length?s.jsx("div",Object.assign({ref:f,class:"oj-c-messagebanner",tabIndex:-1},p,{children:s.jsxs(l.Flex,Object.assign({direction:"column",gap:"section"===_?"1x":void 0},{children:[s.jsx(r.MessagesManager,Object.assign({animationStates:Ne,initialAnimationStyles:xe,data:c,onMessageWillRemove:M},{children:({index:t,item:n})=>s.jsx(o.Message,{messageRef:x(n.key),item:n,closeButtonRenderer:e,detailRenderer:u.getRenderer(n,i,g),index:t,variant:"page"===_?"pageBanner":"sectionBanner",onClose:k,translations:h},n.key)})),s.jsx(a.LiveRegion,{children:E})]}))})):null},Object.defineProperty(e,"__esModule",{value:!0})}));
+define(["exports","preact/jsx-runtime","preact/hooks","./hooks/PRIVATE_useMessagesFocusManager","./PRIVATE_Message","./UNSAFE_Flex","./UNSAFE_LiveRegion","./Flex-bfc6c229","./MessagesManager-615b69fb","./MessageUtils-8216ac4e",'module',"./utils/PRIVATE_timer","./utils/UNSAFE_classNames","./classNames-e580c7c7","./MessageCloseButton-8366a158","./UNSAFE_Button","./Button-26513e96","./UNSAFE_BaseButton","./BaseButton-a31275cc","./tslib.es6-fa3971d7","./hooks/UNSAFE_usePress","./hooks/UNSAFE_useHover","./hooks/UNSAFE_useToggle","./hooks/UNSAFE_useActive","preact/compat","./utils/UNSAFE_interpolations/dimensions","./utils/UNSAFE_arrayUtils","./utils/UNSAFE_size","./_curry1-9eeaf6ed","./utils/UNSAFE_mergeInterpolations","./_curry3-167fa665","./_curry2-466cc994","./_has-aa07e02d","./utils/PRIVATE_clientHints","./clientHints-914fecb1","./hooks/UNSAFE_useTabbableMode","preact","./utils/UNSAFE_mergeProps","./index-03ab344e","./index-4d399da7","./UNSAFE_Icon","./Icon-66acac47","./hooks/UNSAFE_useTooltip","./hooks/UNSAFE_useId","./UNSAFE_Floating","./Floating-863a4a52","./index-17cde748","./hooks/UNSAFE_useUser","./UNSAFE_Environment","./UNSAFE_Layer","./utils/PRIVATE_floatingUtils","./utils/PRIVATE_refUtils","./hooks/UNSAFE_useOutsideClick","./hooks/UNSAFE_useFocus","./hooks/UNSAFE_useTouch","./hooks/UNSAFE_useAnimation","./useAnimation-215b2be2","./hooks/UNSAFE_useTheme","./MessageDetail-d500a9a3","./MessageFormattingUtils-bdfaac26","./utils/UNSAFE_getLocale","./utils/UNSAFE_stringUtils","./stringUtils-e3a47803","./Message.types-eb760bd7","./MessageStartIcon-20e17ea1","./MessageSummary-c91f9b00","./MessageTimestamp-de77475d","./utils/UNSAFE_interpolations/boxalignment","./keys-992a0824","./utils/UNSAFE_interpolations/flexbox","./flexbox-37da5c1b","./utils/UNSAFE_interpolations/flexitem","./flexitem-f592cd81","./utils/UNSAFE_logger","./utils/UNSAFE_soundUtils","./PRIVATE_TransitionGroup","./hooks/UNSAFE_useMessagesContext"],function(e,s,t,n,o,i,a,l,r,u,c,g,d,h,_,F,A,E,U,f,S,m,N,x,v,b,p,k,M,R,y,T,I,j,H,B,P,C,w,O,V,L,z,$,D,G,K,W,q,J,Q,X,Y,Z,ee,se,te,ne,oe,ie,ae,le,re,ue,ce,ge,de,he,_e,Fe,Ae,Ee,Ue,fe,Se,me,Ne){"use strict";const xe={entering:e=>({to:{maxHeight:`${e.scrollHeight}px`,overflow:"hidden"},options:{duration:250},end:{maxHeight:"none",overflow:"initial"}}),exiting:e=>Object.assign(Object.assign({},"none"===e.style.maxHeight&&{from:{maxHeight:`${e.scrollHeight}px`,overflow:"hidden"}}),{to:{maxHeight:0,overflow:"hidden"},end:{maxHeight:0,overflow:"hidden"},options:{duration:250}})},ve={maxHeight:0,overflow:"hidden"};e.MessageBanner=function({closeButtonRenderer:e,detailRendererKey:i,data:c,onClose:g,renderers:d,translations:h,type:_="section"}){const F=t.useRef(new Map),A=t.useRef(null),E=t.useRef(null),[U,f]=t.useState(),[S,m]=t.useState(c.length>0),N=t.useRef(c.length),x=t.useRef(0);N.current=c.length;const v=t.useCallback(e=>s=>F.current.set(e,s),[]);t.useImperativeHandle(E,()=>({focus:()=>{var e;if(c.length){const s=c[0].key;return null===(e=F.current.get(s))||void 0===e||e.focus(),!0}return!1},contains:e=>{var s,t;return!(!c.length||!e)&&(null!==(t=null===(s=A.current)||void 0===s?void 0:s.contains(e))&&void 0!==t&&t)}}),[c]);const{controller:b,handlers:p}=n.useMessageFocusManager(E,{onFocus:t.useCallback(()=>{f(null==h?void 0:h.navigationFromMessagesRegion)},[f,h])}),k=t.useCallback(e=>{null==g||g(e)},[g]),M=t.useCallback((e,s,t)=>{var n;const o=null==t?void 0:t.contains(document.activeElement);if(0===N.current)return m(!1),void(o&&b.restorePriorFocus());const i=s+1<c.length?s+1:s-1;if(i>-1&&o){const e=c[i].key;null===(n=F.current.get(e))||void 0===n||n.focus()}},[b,c]);return t.useEffect(()=>{c.length?(m(!0),c.length>x.current&&f(null==h?void 0:h.navigationToMessagesRegion),b.prioritize()):f(""),x.current=c.length},[b,c,h]),S||0!==c.length?s.jsx("div",Object.assign({ref:A,class:"oj-c-messagebanner",tabIndex:-1},p,{children:s.jsxs(l.Flex,Object.assign({direction:"column",gap:"section"===_?"1x":void 0},{children:[s.jsx(r.MessagesManager,Object.assign({animationStates:xe,initialAnimationStyles:ve,data:c,onMessageWillRemove:M},{children:({index:t,item:n})=>s.jsx(o.Message,{messageRef:v(n.key),item:n,closeButtonRenderer:e,detailRenderer:u.getRenderer(n,i,d),index:t,variant:"page"===_?"pageBanner":"sectionBanner",onClose:k,translations:h},n.key)})),s.jsx(a.LiveRegion,{children:U})]}))})):null},Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=UNSAFE_MessageBanner.js.map

package/amd/UNSAFE_MessageBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"UNSAFE_MessageBanner.js","sources":["../../src/UNSAFE_MessageBanner/MessageBanner.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, ComponentProps, VNode } from 'preact';\nimport { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'preact/hooks';\nimport {\n  FocusableComponentHandle,\n  useMessageFocusManager\n} from '../hooks/PRIVATE_useMessagesFocusManager';\nimport { getRenderer, Message, MessagesManager } from '../PRIVATE_Message';\nimport { Flex } from '../UNSAFE_Flex';\nimport { LiveRegion } from '../UNSAFE_LiveRegion';\nimport { Item, ItemMetadata } from '../utils/UNSAFE_dataProvider';\nimport { Handle } from '../utils/UNSAFE_typeUtils';\n\ntype MessageRef = Handle<typeof Message, 'messageRef'>;\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 MessageBanner component.\n */\nexport type MessageBannerItem = {\n  /**\n   * Defines whether or not to include the close icon for the message\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?: 'none' | 'error' | 'warning' | 'confirmation' | 'info';\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 * Structure of data item passed to the renderers\n */\nexport type MessageBannerRendererDataItem<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\n/**\n * Props for the MessageBanner Component\n */\ntype Props<Key, Data> = {\n  /**\n   * Data for the MessageBanner component. This data is used for rendering each banner message.\n   * The key for each message will be configured using the key of the corresponding item. This way,\n   * the component will know whether a new message is being added or an existing message is being updated/removed\n   * when the new data comes in.\n   */\n  data: Item<Key, Data>[];\n\n  /**\n   * 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  type?: 'page' | 'section';\n\n  /**\n   * Triggered when a user tries to close a message through UI interaction. The application\n   * should listen to this event and remove the corresponding message item from the data\n   * which would then result in the message closed. If the application\n   * fails to remove the message item from the data, then no change will be done in the\n   * UI by the component and the message will stay in the UI opened.\n   */\n  onClose?: (item: Item<Key, Data>) => void;\n\n  /**\n   * Applications can use this property to provide the key of a renderer or a function that\n   * returns the key of a renderer to use for rendering the detail content.\n   *\n   * When a renderer key is provided as a value for this property, the corresponding renderer\n   * will be used for rendering the detail content for all the messages. If applications want\n   * to use a different renderer for different messages, they can provide a function that\n   * returns a renderer key instead.\n   *\n   * The provided function should accept an Item and return a key to a renderer for\n   * rendering the corresponding message's detail content. The value returned from this function\n   * should be a key to one of the renderers provided. If the returned value is not\n   * one of the keys of the provided renderers, the component will throw an Error.\n   *\n   * If the function returns undefined, the component then will perform default rendering\n   * of the detail content using the detail property of the corresponding message.\n   *\n   * If an application specifies both detail and a valid detailRendererKey, the detailRendererKey will\n   * take precedence and the corresponding renderer will be used for rendering the detail content.\n   */\n  detailRendererKey?: string | ((item: Item<Key, Data>) => string | undefined);\n\n  /**\n   * A set of available renderers for rendering the message content. Which renderer is used\n   * for rendering which content will be decided by specific properties in the row data.\n   */\n  renderers?: Record<string, (data: MessageBannerRendererDataItem<Key, Data>) => ComponentChildren>;\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  // Refactor types (cannot import from PRIVATE modules)\n  // https://jira.oraclecorp.com/jira/browse/JET-54215\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     * Text to guide keyboard users navigate to prior focussed element when the messages\n     * region gains focus\n     */\n    navigationFromMessagesRegion?: string;\n\n    /**\n     * Text to guide keyboard users navigate to new displayed messages when focus is outside\n     * the messages region\n     */\n    navigationToMessagesRegion?: string;\n  };\n};\n\n/**\n * Animation states for banner messages\n * TODO: Get this from theme context provider\n */\nconst animationStates: ComponentProps<typeof MessagesManager>['animationStates'] = {\n  entering: (node) => ({\n    to: {\n      maxHeight: `${node.scrollHeight}px`,\n      overflow: 'hidden'\n    },\n    options: {\n      duration: 250\n    },\n    end: {\n      maxHeight: 'none',\n      overflow: 'initial'\n    }\n  }),\n  exiting: (node) => ({\n    ...(node.style.maxHeight === 'none' && {\n      from: {\n        maxHeight: `${node.scrollHeight}px`,\n        overflow: 'hidden'\n      }\n    }),\n    to: {\n      maxHeight: 0,\n      overflow: 'hidden'\n    },\n    end: {\n      maxHeight: 0,\n      overflow: 'hidden'\n    },\n    options: {\n      duration: 250\n    }\n  })\n};\nconst initialAnimationStyles = {\n  maxHeight: 0,\n  overflow: 'hidden'\n} as const;\n\n/**\n * Renders individual messages based on the provided data\n */\nfunction MessageBanner<\n  K extends string | number = string | number,\n  D extends MessageBannerItem = MessageBannerItem\n>({\n  closeButtonRenderer,\n  detailRendererKey,\n  data,\n  onClose,\n  renderers,\n  translations,\n  type = 'section'\n}: Props<K, D>) {\n  // Keyboard Navigation and Focus Management\n  const messagesRef = useRef(new Map<K, MessageRef | null>());\n  const containerDivRef = useRef<HTMLDivElement>(null);\n  const focusHandleRef = useRef<FocusableComponentHandle>(null);\n  const [liveRegionText, setLiveRegionText] = useState<string>();\n  const [shouldRender, setShouldRender] = useState(data.length > 0);\n  // We need a ref that holds the current & previous data length, as the exiting\n  // node will always call handleNextFocus with previous data.\n  // As in TransitionGroup, when an item is removed from the data, a new vnode\n  // will not be created instead previous vnode will be used. So, the new handleNextFocus\n  // will not be called when the old vnode exits. Thus, we will be using a ref\n  // to always get the correct current data length.\n  const dataLengthRef = useRef(data.length);\n  const prevDataLengthRef = useRef(0);\n  // Update the data length ref\n  dataLengthRef.current = data.length;\n\n  // We will be using a function based ref to store the refs in the Map\n  const setMessageRef = useCallback(\n    // TODO: use ramda.curry here (currently it is throwing ts error when used with generics)\n    (key: K) => {\n      return (ref: MessageRef | null) => messagesRef.current.set(key, ref);\n    },\n    []\n  );\n\n  // Update the focusHandleRef\n  useImperativeHandle(\n    focusHandleRef,\n    () => ({\n      focus: () => {\n        // Only trigger focus if the component is rendering messages\n        if (data.length) {\n          const firstItemKey = data[0].key;\n          messagesRef.current.get(firstItemKey)?.focus();\n          return true;\n        }\n        return false;\n      },\n      contains: (element: Element) => {\n        // Only invoke method if the component is rendering messages\n        if (data.length && element) {\n          return containerDivRef.current?.contains(element) ?? false;\n        }\n        return false;\n      }\n    }),\n    [data]\n  );\n\n  // Register handlers for focus management\n  const { controller, handlers } = useMessageFocusManager(focusHandleRef, {\n    onFocus: useCallback(() => {\n      setLiveRegionText(translations?.navigationFromMessagesRegion);\n    }, [setLiveRegionText, translations])\n  });\n\n  /**\n   * Emits onClose event for the provided message.\n   * @param item The message which the user tried to close\n   */\n  const handleClose = useCallback(\n    (item: Item<K, D>) => {\n      onClose?.(item);\n    },\n    [onClose]\n  );\n\n  /**\n   * Handles focus when a message is closed and animated away from the DOM\n   * @param key The key of the message\n   * @param index The index of the message\n   */\n  const handleNextFocus = useCallback(\n    (_key: K, index: number, closedMessageNode?: Element) => {\n      const isClosedMessageFocused = closedMessageNode?.contains(document.activeElement);\n\n      // If there are no messages, do not render anything. As the old messages\n      // are still in the DOM, use the data count to determine what to do next as it\n      // represents the next state.\n      if (dataLengthRef.current === 0) {\n        setShouldRender(false);\n        // If the current message holds focus, then restore previous focus\n        if (isClosedMessageFocused) {\n          controller.restorePriorFocus();\n        }\n        return;\n      }\n\n      // In TransitionGroup, when an item is removed from the data, a new vnode\n      // will not be created instead previous vnode will be used. So, the new handleNextFocus\n      // will not be called when the old vnode exits. Thus, all the deps will not be pointing to\n      // the current references, rather they will be pointing to the ones where this vnode\n      // last existed in the data.\n      // This means, the data will contain the closing message as well. But, all the ref objects\n      // still point to the most up-to-date values. With that in mind, we will be evaluating the\n      // following values.\n      const renderedMessagesCount = data.length;\n\n      // Now that this message is closed, focus the next message that will take this index. If no\n      // message will take this message's index, then it means that this is the last message. If\n      // that is the case, focus the message at the previous index.\n      // Use the count of the messages that are currently shown in the UI (current state including\n      // the message that will be removed). This way we can get the correct item from the data\n      // as it will contain the closing message as well.\n      const nextMessageIndexToFocus = index + 1 < renderedMessagesCount ? index + 1 : index - 1;\n\n      // if next message is available then transfer the focus to the next element\n      if (nextMessageIndexToFocus > -1 && isClosedMessageFocused) {\n        const nextMessageKey = data[nextMessageIndexToFocus].key;\n        messagesRef.current.get(nextMessageKey)?.focus();\n      }\n    },\n    [controller, data]\n  );\n\n  // Prioritize this component whenever the data changes and\n  // the new data has at least one message\n  useEffect(() => {\n    if (data.length) {\n      // set state to render content whenever the data is not empty\n      setShouldRender(true);\n      if (data.length > prevDataLengthRef.current) {\n        // Only when having a new message, update the aria-live area with the\n        // text to indicate how to get the focus to the new message.\n        setLiveRegionText(translations?.navigationToMessagesRegion);\n      }\n      controller.prioritize();\n    } else {\n      // When there are no messages, clear the live region so that\n      // the navigation text will be read when a new message appear\n      setLiveRegionText('');\n    }\n    prevDataLengthRef.current = data.length;\n  }, [controller, data, translations]);\n\n  // When both shouldRender flag is false and no data to render, do not render\n  // anything\n  if (!shouldRender && data.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={containerDivRef}\n      class=\"oj-c-messagebanner\"\n      tabIndex={-1} // Need to add tabindex to make the container receive the focus events\n      {...handlers}>\n      <Flex direction=\"column\" gap={type === 'section' ? '1x' : undefined}>\n        <MessagesManager\n          animationStates={animationStates}\n          initialAnimationStyles={initialAnimationStyles}\n          data={data}\n          onMessageWillRemove={handleNextFocus}>\n          {({ index, item }) => (\n            <Message\n              messageRef={setMessageRef(item.key)}\n              item={item}\n              closeButtonRenderer={closeButtonRenderer}\n              detailRenderer={getRenderer(item, detailRendererKey, renderers)}\n              index={index}\n              key={item.key}\n              variant={type === 'page' ? 'pageBanner' : 'sectionBanner'}\n              onClose={handleClose}\n              translations={translations}\n            />\n          )}\n        </MessagesManager>\n        <LiveRegion>{liveRegionText}</LiveRegion>\n      </Flex>\n    </div>\n  );\n}\n\nexport { MessageBanner };\n"],"names":["animationStates","entering","node","to","maxHeight","scrollHeight","overflow","options","duration","end","exiting","Object","assign","style","from","initialAnimationStyles","closeButtonRenderer","detailRendererKey","data","onClose","renderers","translations","type","messagesRef","useRef","Map","containerDivRef","focusHandleRef","liveRegionText","setLiveRegionText","useState","shouldRender","setShouldRender","length","dataLengthRef","prevDataLengthRef","current","setMessageRef","useCallback","key","ref","set","useImperativeHandle","focus","firstItemKey","_a","get","contains","element","_b","controller","handlers","useMessageFocusManager","onFocus","navigationFromMessagesRegion","handleClose","item","handleNextFocus","_key","index","closedMessageNode","isClosedMessageFocused","document","activeElement","restorePriorFocus","nextMessageIndexToFocus","nextMessageKey","useEffect","navigationToMessagesRegion","prioritize","_jsx","jsx","class","tabIndex","children","_jsxs","jsxs","Flex","direction","gap","undefined","MessagesManager","onMessageWillRemove","Message","messageRef","detailRenderer","getRenderer","variant","LiveRegion"],"mappings":"qmEAoMA,MAAMA,GAA6E,CACjFC,SAAWC,IAAU,CACnBC,GAAI,CACFC,UAAW,GAAGF,EAAKG,iBACnBC,SAAU,UAEZC,QAAS,CACPC,SAAU,KAEZC,IAAK,CACHL,UAAW,OACXE,SAAU,aAGdI,QAAUR,GAASS,OAAAC,OAAAD,OAAAC,OAAA,GACY,SAAzBV,EAAKW,MAAMT,WAAwB,CACrCU,KAAM,CACJV,UAAW,GAAGF,EAAKG,iBACnBC,SAAU,YAEZ,CACFH,GAAI,CACFC,UAAW,EACXE,SAAU,UAEZG,IAAK,CACHL,UAAW,EACXE,SAAU,UAEZC,QAAS,CACPC,SAAU,QAIVO,GAAyB,CAC7BX,UAAW,EACXE,SAAU,0BAMZ,UAGEU,oBACAA,EADAC,kBAEAA,EAFAC,KAGAA,EAHAC,QAIAA,EAJAC,UAKAA,EALAC,aAMAA,EANAC,KAOAA,EAAO,YAGP,MAAMC,EAAcC,EAAAA,OAAO,IAAIC,KACzBC,EAAkBF,SAAuB,MACzCG,EAAiBH,SAAiC,OACjDI,EAAgBC,GAAqBC,EAAQA,YAC7CC,EAAcC,GAAmBF,EAAQA,SAACZ,EAAKe,OAAS,GAOzDC,EAAgBV,EAAAA,OAAON,EAAKe,QAC5BE,EAAoBX,SAAO,GAEjCU,EAAcE,QAAUlB,EAAKe,OAG7B,MAAMI,EAAgBC,EAAWA,aAE9BC,GACSC,GAA2BjB,EAAYa,QAAQK,IAAIF,EAAKC,IAElE,IAIFE,EAAmBA,oBACjBf,GACA,KAAO,CACLgB,MAAO,WAEL,GAAIzB,EAAKe,OAAQ,CACf,MAAMW,EAAe1B,EAAK,GAAGqB,IAE7B,OADqC,QAArCM,EAAAtB,EAAYa,QAAQU,IAAIF,UAAa,IAAAC,GAAAA,EAAEF,SAChC,EAET,OAAO,GAETI,SAAWC,YAET,SAAI9B,EAAKe,SAAUe,KACoC,QAA9CC,EAAuB,QAAvBJ,EAAAnB,EAAgBU,eAAO,IAAAS,OAAA,EAAAA,EAAEE,SAASC,UAAY,IAAAC,GAAAA,OAK3D,CAAC/B,IAIH,MAAMgC,WAAEA,EAAFC,SAAcA,GAAaC,EAAAA,uBAAuBzB,EAAgB,CACtE0B,QAASf,EAAWA,aAAC,KACnBT,EAAkBR,MAAAA,SAAAA,EAAciC,gCAC/B,CAACzB,EAAmBR,MAOnBkC,EAAcjB,eACjBkB,IACCrC,MAAAA,GAAAA,EAAUqC,KAEZ,CAACrC,IAQGsC,EAAkBnB,EAAWA,aACjC,CAACoB,EAASC,EAAeC,WACvB,MAAMC,EAAyBD,MAAAA,OAAA,EAAAA,EAAmBb,SAASe,SAASC,eAKpE,GAA8B,IAA1B7B,EAAcE,QAMhB,OALAJ,GAAgB,QAEZ6B,GACFX,EAAWc,qBAaf,MAQMC,EAA0BN,EAAQ,EARVzC,EAAKe,OAQiC0B,EAAQ,EAAIA,EAAQ,EAGxF,GAAIM,GAA2B,GAAKJ,EAAwB,CAC1D,MAAMK,EAAiBhD,EAAK+C,GAAyB1B,IACd,QAAvCM,EAAAtB,EAAYa,QAAQU,IAAIoB,UAAe,IAAArB,GAAAA,EAAEF,WAG7C,CAACO,EAAYhC,IAyBf,OApBAiD,EAAAA,WAAU,KACJjD,EAAKe,QAEPD,GAAgB,GACZd,EAAKe,OAASE,EAAkBC,SAGlCP,EAAkBR,MAAAA,SAAAA,EAAc+C,4BAElClB,EAAWmB,cAIXxC,EAAkB,IAEpBM,EAAkBC,QAAUlB,EAAKe,SAChC,CAACiB,EAAYhC,EAAMG,IAIjBU,GAAgC,IAAhBb,EAAKe,OAKxBqC,EAAAC,IAAA,MAAA5D,OAAAC,OAAA,CACE4B,IAAKd,EACL8C,MAAM,qBACNC,UAAW,GACPtB,EAAQ,CAAAuB,SACZC,EAACC,KAAAC,EAAIA,KAAClE,OAAAC,OAAA,CAAAkE,UAAU,SAASC,IAAc,YAATzD,EAAqB,UAAO0D,GACxD,CAAAN,SAAA,CAAAJ,EAAAA,IAACW,EAAeA,gBACdtE,OAAAC,OAAA,CAAAZ,gBAAiBA,GACjBe,uBAAwBA,GACxBG,KAAMA,EACNgE,oBAAqBzB,GAAe,CAAAiB,SACnC,EAAGf,MAAAA,EAAOH,KAAAA,KACTc,EAACC,IAAAY,UACC,CAAAC,WAAY/C,EAAcmB,EAAKjB,KAC/BiB,KAAMA,EACNxC,oBAAqBA,EACrBqE,eAAgBC,cAAY9B,EAAMvC,EAAmBG,GACrDuC,MAAOA,EAEP4B,QAAkB,SAATjE,EAAkB,aAAe,gBAC1CH,QAASoC,EACTlC,aAAcA,GAHTmC,EAAKjB,QAOhB+B,EAAAA,IAACkB,EAAUA,WAAA,CAAAd,SAAE9C,WA7BV"}
+{"version":3,"file":"UNSAFE_MessageBanner.js","sources":["../../src/UNSAFE_MessageBanner/MessageBanner.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, ComponentProps, VNode } from 'preact';\nimport { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'preact/hooks';\nimport {\n  FocusableComponentHandle,\n  useMessageFocusManager\n} from '../hooks/PRIVATE_useMessagesFocusManager';\nimport { getRenderer, Message, MessagesManager } from '../PRIVATE_Message';\nimport { Flex } from '../UNSAFE_Flex';\nimport { LiveRegion } from '../UNSAFE_LiveRegion';\nimport { Item, ItemMetadata } from '../utils/UNSAFE_dataProvider';\nimport { Handle } from '../utils/UNSAFE_typeUtils';\n\ntype MessageRef = Handle<typeof Message, 'messageRef'>;\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 MessageBanner component.\n */\nexport type MessageBannerItem = {\n  /**\n   * Defines whether or not to include the close icon for the message\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?: 'none' | 'error' | 'warning' | 'confirmation' | 'info';\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 * Structure of data item passed to the renderers\n */\nexport type MessageBannerRendererDataItem<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\n/**\n * Props for the MessageBanner Component\n */\ntype Props<Key, Data> = {\n  /**\n   * Data for the MessageBanner component. This data is used for rendering each banner message.\n   * The key for each message will be configured using the key of the corresponding item. This way,\n   * the component will know whether a new message is being added or an existing message is being updated/removed\n   * when the new data comes in.\n   */\n  data: Item<Key, Data>[];\n\n  /**\n   * 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  type?: 'page' | 'section';\n\n  /**\n   * Triggered when a user tries to close a message through UI interaction. The application\n   * should listen to this event and remove the corresponding message item from the data\n   * which would then result in the message closed. If the application\n   * fails to remove the message item from the data, then no change will be done in the\n   * UI by the component and the message will stay in the UI opened.\n   */\n  onClose?: (item: Item<Key, Data>) => void;\n\n  /**\n   * Applications can use this property to provide the key of a renderer or a function that\n   * returns the key of a renderer to use for rendering the detail content.\n   *\n   * When a renderer key is provided as a value for this property, the corresponding renderer\n   * will be used for rendering the detail content for all the messages. If applications want\n   * to use a different renderer for different messages, they can provide a function that\n   * returns a renderer key instead.\n   *\n   * The provided function should accept an Item and return a key to a renderer for\n   * rendering the corresponding message's detail content. The value returned from this function\n   * should be a key to one of the renderers provided. If the returned value is not\n   * one of the keys of the provided renderers, the component will throw an Error.\n   *\n   * If the function returns undefined, the component then will perform default rendering\n   * of the detail content using the detail property of the corresponding message.\n   *\n   * If an application specifies both detail and a valid detailRendererKey, the detailRendererKey will\n   * take precedence and the corresponding renderer will be used for rendering the detail content.\n   */\n  detailRendererKey?: string | ((item: Item<Key, Data>) => string | undefined);\n\n  /**\n   * A set of available renderers for rendering the message content. Which renderer is used\n   * for rendering which content will be decided by specific properties in the row data.\n   */\n  renderers?: Record<string, (data: MessageBannerRendererDataItem<Key, Data>) => ComponentChildren>;\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  // Refactor types (cannot import from PRIVATE modules)\n  // https://jira.oraclecorp.com/jira/browse/JET-54215\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     * Text to guide keyboard users navigate to prior focussed element when the messages\n     * region gains focus\n     */\n    navigationFromMessagesRegion?: string;\n\n    /**\n     * Text to guide keyboard users navigate to new displayed messages when focus is outside\n     * the messages region\n     */\n    navigationToMessagesRegion?: string;\n  };\n};\n\n/**\n * Animation states for banner messages\n * TODO: Get this from theme context provider\n */\nconst animationStates: ComponentProps<typeof MessagesManager>['animationStates'] = {\n  entering: (node) => ({\n    to: {\n      maxHeight: `${node.scrollHeight}px`,\n      overflow: 'hidden'\n    },\n    options: {\n      duration: 250\n    },\n    end: {\n      maxHeight: 'none',\n      overflow: 'initial'\n    }\n  }),\n  exiting: (node) => ({\n    ...(node.style.maxHeight === 'none' && {\n      from: {\n        maxHeight: `${node.scrollHeight}px`,\n        overflow: 'hidden'\n      }\n    }),\n    to: {\n      maxHeight: 0,\n      overflow: 'hidden'\n    },\n    end: {\n      maxHeight: 0,\n      overflow: 'hidden'\n    },\n    options: {\n      duration: 250\n    }\n  })\n};\nconst initialAnimationStyles = {\n  maxHeight: 0,\n  overflow: 'hidden'\n} as const;\n\n/**\n * Renders individual messages based on the provided data\n */\nfunction MessageBanner<\n  K extends string | number = string | number,\n  D extends MessageBannerItem = MessageBannerItem\n>({\n  closeButtonRenderer,\n  detailRendererKey,\n  data,\n  onClose,\n  renderers,\n  translations,\n  type = 'section'\n}: Props<K, D>) {\n  // Keyboard Navigation and Focus Management\n  const messagesRef = useRef(new Map<K, MessageRef | null>());\n  const containerDivRef = useRef<HTMLDivElement>(null);\n  const focusHandleRef = useRef<FocusableComponentHandle>(null);\n  const [liveRegionText, setLiveRegionText] = useState<string>();\n  const [shouldRender, setShouldRender] = useState(data.length > 0);\n  // We need a ref that holds the current & previous data length, as the exiting\n  // node will always call handleNextFocus with previous data.\n  // As in TransitionGroup, when an item is removed from the data, a new vnode\n  // will not be created instead previous vnode will be used. So, the new handleNextFocus\n  // will not be called when the old vnode exits. Thus, we will be using a ref\n  // to always get the correct current data length.\n  const dataLengthRef = useRef(data.length);\n  const prevDataLengthRef = useRef(0);\n  // Update the data length ref\n  dataLengthRef.current = data.length;\n\n  // We will be using a function based ref to store the refs in the Map\n  const setMessageRef = useCallback(\n    // TODO: use ramda.curry here (currently it is throwing ts error when used with generics)\n    (key: K) => {\n      return (ref: MessageRef | null) => messagesRef.current.set(key, ref);\n    },\n    []\n  );\n\n  // Update the focusHandleRef\n  useImperativeHandle(\n    focusHandleRef,\n    () => ({\n      focus: () => {\n        // Only trigger focus if the component is rendering messages\n        if (data.length) {\n          const firstItemKey = data[0].key;\n          messagesRef.current.get(firstItemKey)?.focus();\n          return true;\n        }\n        return false;\n      },\n      contains: (element: Element) => {\n        // Only invoke method if the component is rendering messages\n        if (data.length && element) {\n          return containerDivRef.current?.contains(element) ?? false;\n        }\n        return false;\n      }\n    }),\n    [data]\n  );\n\n  // Register handlers for focus management\n  const { controller, handlers } = useMessageFocusManager(focusHandleRef, {\n    onFocus: useCallback(() => {\n      setLiveRegionText(translations?.navigationFromMessagesRegion);\n    }, [setLiveRegionText, translations])\n  });\n\n  /**\n   * Emits onClose event for the provided message.\n   * @param item The message which the user tried to close\n   */\n  const handleClose = useCallback(\n    (item: Item<K, D>) => {\n      onClose?.(item);\n    },\n    [onClose]\n  );\n\n  /**\n   * Handles focus when a message is closed and animated away from the DOM\n   * @param key The key of the message\n   * @param index The index of the message\n   */\n  const handleNextFocus = useCallback(\n    (_key: K, index: number, closedMessageNode?: Element) => {\n      const isClosedMessageFocused = closedMessageNode?.contains(document.activeElement);\n\n      // If there are no messages, do not render anything. As the old messages\n      // are still in the DOM, use the data count to determine what to do next as it\n      // represents the next state.\n      if (dataLengthRef.current === 0) {\n        setShouldRender(false);\n        // If the current message holds focus, then restore previous focus\n        if (isClosedMessageFocused) {\n          controller.restorePriorFocus();\n        }\n        return;\n      }\n\n      // In TransitionGroup, when an item is removed from the data, a new vnode\n      // will not be created instead previous vnode will be used. So, the new handleNextFocus\n      // will not be called when the old vnode exits. Thus, all the deps will not be pointing to\n      // the current references, rather they will be pointing to the ones where this vnode\n      // last existed in the data.\n      // This means, the data will contain the closing message as well. But, all the ref objects\n      // still point to the most up-to-date values. With that in mind, we will be evaluating the\n      // following values.\n      const renderedMessagesCount = data.length;\n\n      // Now that this message is closed, focus the next message that will take this index. If no\n      // message will take this message's index, then it means that this is the last message. If\n      // that is the case, focus the message at the previous index.\n      // Use the count of the messages that are currently shown in the UI (current state including\n      // the message that will be removed). This way we can get the correct item from the data\n      // as it will contain the closing message as well.\n      const nextMessageIndexToFocus = index + 1 < renderedMessagesCount ? index + 1 : index - 1;\n\n      // if next message is available then transfer the focus to the next element\n      if (nextMessageIndexToFocus > -1 && isClosedMessageFocused) {\n        const nextMessageKey = data[nextMessageIndexToFocus].key;\n        messagesRef.current.get(nextMessageKey)?.focus();\n      }\n    },\n    [controller, data]\n  );\n\n  // Prioritize this component whenever the data changes and\n  // the new data has at least one message\n  useEffect(() => {\n    if (data.length) {\n      // set state to render content whenever the data is not empty\n      setShouldRender(true);\n      if (data.length > prevDataLengthRef.current) {\n        // Only when having a new message, update the aria-live area with the\n        // text to indicate how to get the focus to the new message.\n        setLiveRegionText(translations?.navigationToMessagesRegion);\n      }\n      controller.prioritize();\n    } else {\n      // When there are no messages, clear the live region so that\n      // the navigation text will be read when a new message appear\n      setLiveRegionText('');\n    }\n    prevDataLengthRef.current = data.length;\n  }, [controller, data, translations]);\n\n  // When both shouldRender flag is false and no data to render, do not render\n  // anything\n  if (!shouldRender && data.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={containerDivRef}\n      class=\"oj-c-messagebanner\"\n      tabIndex={-1} // Need to add tabindex to make the container receive the focus events\n      {...handlers}>\n      <Flex direction=\"column\" gap={type === 'section' ? '1x' : undefined}>\n        <MessagesManager\n          animationStates={animationStates}\n          initialAnimationStyles={initialAnimationStyles}\n          data={data}\n          onMessageWillRemove={handleNextFocus}>\n          {({ index, item }) => (\n            <Message\n              messageRef={setMessageRef(item.key)}\n              item={item}\n              closeButtonRenderer={closeButtonRenderer}\n              detailRenderer={getRenderer(item, detailRendererKey, renderers)}\n              index={index}\n              key={item.key}\n              variant={type === 'page' ? 'pageBanner' : 'sectionBanner'}\n              onClose={handleClose}\n              translations={translations}\n            />\n          )}\n        </MessagesManager>\n        <LiveRegion>{liveRegionText}</LiveRegion>\n      </Flex>\n    </div>\n  );\n}\n\nexport { MessageBanner };\n"],"names":["animationStates","entering","node","to","maxHeight","scrollHeight","overflow","options","duration","end","exiting","Object","assign","style","from","initialAnimationStyles","closeButtonRenderer","detailRendererKey","data","onClose","renderers","translations","type","messagesRef","useRef","Map","containerDivRef","focusHandleRef","liveRegionText","setLiveRegionText","useState","shouldRender","setShouldRender","length","dataLengthRef","prevDataLengthRef","current","setMessageRef","useCallback","key","ref","set","useImperativeHandle","focus","firstItemKey","_a","get","contains","element","_b","controller","handlers","useMessageFocusManager","onFocus","navigationFromMessagesRegion","handleClose","item","handleNextFocus","_key","index","closedMessageNode","isClosedMessageFocused","document","activeElement","restorePriorFocus","nextMessageIndexToFocus","nextMessageKey","useEffect","navigationToMessagesRegion","prioritize","_jsx","jsx","class","tabIndex","children","_jsxs","jsxs","Flex","direction","gap","undefined","MessagesManager","onMessageWillRemove","Message","messageRef","detailRenderer","getRenderer","variant","LiveRegion"],"mappings":"omEAoMA,MAAMA,GAA6E,CACjFC,SAAWC,IAAU,CACnBC,GAAI,CACFC,UAAW,GAAGF,EAAKG,iBACnBC,SAAU,UAEZC,QAAS,CACPC,SAAU,KAEZC,IAAK,CACHL,UAAW,OACXE,SAAU,aAGdI,QAAUR,GAASS,OAAAC,OAAAD,OAAAC,OAAA,GACY,SAAzBV,EAAKW,MAAMT,WAAwB,CACrCU,KAAM,CACJV,UAAW,GAAGF,EAAKG,iBACnBC,SAAU,YAEZ,CACFH,GAAI,CACFC,UAAW,EACXE,SAAU,UAEZG,IAAK,CACHL,UAAW,EACXE,SAAU,UAEZC,QAAS,CACPC,SAAU,QAIVO,GAAyB,CAC7BX,UAAW,EACXE,SAAU,0BAMZ,UAGEU,oBACAA,EADAC,kBAEAA,EAFAC,KAGAA,EAHAC,QAIAA,EAJAC,UAKAA,EALAC,aAMAA,EANAC,KAOAA,EAAO,YAGP,MAAMC,EAAcC,EAAAA,OAAO,IAAIC,KACzBC,EAAkBF,SAAuB,MACzCG,EAAiBH,SAAiC,OACjDI,EAAgBC,GAAqBC,EAAQA,YAC7CC,EAAcC,GAAmBF,EAAQA,SAACZ,EAAKe,OAAS,GAOzDC,EAAgBV,EAAAA,OAAON,EAAKe,QAC5BE,EAAoBX,SAAO,GAEjCU,EAAcE,QAAUlB,EAAKe,OAG7B,MAAMI,EAAgBC,EAAWA,YAE9BC,GACSC,GAA2BjB,EAAYa,QAAQK,IAAIF,EAAKC,GAElE,IAIFE,EAAmBA,oBACjBf,EACA,KAAO,CACLgB,MAAO,WAEL,GAAIzB,EAAKe,OAAQ,CACf,MAAMW,EAAe1B,EAAK,GAAGqB,IAE7B,OADqC,QAArCM,EAAAtB,EAAYa,QAAQU,IAAIF,UAAa,IAAAC,GAAAA,EAAEF,SAChC,EAET,OAAO,GAETI,SAAWC,YAET,SAAI9B,EAAKe,SAAUe,KACoC,QAA9CC,EAAuB,QAAvBJ,EAAAnB,EAAgBU,eAAO,IAAAS,OAAA,EAAAA,EAAEE,SAASC,UAAY,IAAAC,GAAAA,MAK3D,CAAC/B,IAIH,MAAMgC,WAAEA,EAAFC,SAAcA,GAAaC,EAAAA,uBAAuBzB,EAAgB,CACtE0B,QAASf,EAAWA,YAAC,KACnBT,EAAkBR,MAAAA,SAAAA,EAAciC,+BAC/B,CAACzB,EAAmBR,MAOnBkC,EAAcjB,cACjBkB,IACCrC,MAAAA,GAAAA,EAAUqC,IAEZ,CAACrC,IAQGsC,EAAkBnB,EAAWA,YACjC,CAACoB,EAASC,EAAeC,WACvB,MAAMC,EAAyBD,MAAAA,OAAA,EAAAA,EAAmBb,SAASe,SAASC,eAKpE,GAA8B,IAA1B7B,EAAcE,QAMhB,OALAJ,GAAgB,QAEZ6B,GACFX,EAAWc,qBAaf,MAQMC,EAA0BN,EAAQ,EARVzC,EAAKe,OAQiC0B,EAAQ,EAAIA,EAAQ,EAGxF,GAAIM,GAA2B,GAAKJ,EAAwB,CAC1D,MAAMK,EAAiBhD,EAAK+C,GAAyB1B,IACd,QAAvCM,EAAAtB,EAAYa,QAAQU,IAAIoB,UAAe,IAAArB,GAAAA,EAAEF,UAG7C,CAACO,EAAYhC,IAyBf,OApBAiD,EAAAA,UAAU,KACJjD,EAAKe,QAEPD,GAAgB,GACZd,EAAKe,OAASE,EAAkBC,SAGlCP,EAAkBR,MAAAA,SAAAA,EAAc+C,4BAElClB,EAAWmB,cAIXxC,EAAkB,IAEpBM,EAAkBC,QAAUlB,EAAKe,QAChC,CAACiB,EAAYhC,EAAMG,IAIjBU,GAAgC,IAAhBb,EAAKe,OAKxBqC,EAAAC,IAAA,MAAA5D,OAAAC,OAAA,CACE4B,IAAKd,EACL8C,MAAM,qBACNC,UAAW,GACPtB,EAAQ,CAAAuB,SACZC,EAACC,KAAAC,EAAIA,KAAClE,OAAAC,OAAA,CAAAkE,UAAU,SAASC,IAAc,YAATzD,EAAqB,UAAO0D,GACxD,CAAAN,SAAA,CAAAJ,EAAAA,IAACW,EAAeA,gBACdtE,OAAAC,OAAA,CAAAZ,gBAAiBA,GACjBe,uBAAwBA,GACxBG,KAAMA,EACNgE,oBAAqBzB,GAAe,CAAAiB,SACnC,EAAGf,MAAAA,EAAOH,KAAAA,KACTc,EAACC,IAAAY,UACC,CAAAC,WAAY/C,EAAcmB,EAAKjB,KAC/BiB,KAAMA,EACNxC,oBAAqBA,EACrBqE,eAAgBC,cAAY9B,EAAMvC,EAAmBG,GACrDuC,MAAOA,EAEP4B,QAAkB,SAATjE,EAAkB,aAAe,gBAC1CH,QAASoC,EACTlC,aAAcA,GAHTmC,EAAKjB,QAOhB+B,EAAAA,IAACkB,EAAUA,WAAA,CAAAd,SAAE9C,WA7BV"}

package/amd/UNSAFE_MessageToast.css

@@ -1 +1 @@
-.lyf4sh{height:fit-content;width:fit-content;}
+.pik71i{height:fit-content;width:fit-content;}

package/amd/UNSAFE_MessageToast.js

@@ -1,2 +1,2 @@
-define(["exports","./MessageToast-104da69d","preact/jsx-runtime","css!./UNSAFE_MessageToast.css","preact/hooks","./UNSAFE_Environment","preact","./UNSAFE_Layer","preact/compat","./hooks/PRIVATE_useMessagesFocusManager","./hooks/UNSAFE_useBreakpointValues","./hooks/UNSAFE_useBreakpoints","./hooks/UNSAFE_useTranslationBundle","./PRIVATE_Message","./UNSAFE_Flex","./Flex-0dec0de8","./tslib.es6-d070fafc","./utils/UNSAFE_interpolations/dimensions","./utils/UNSAFE_arrayUtils","./utils/UNSAFE_size","./_curry1-b9493cf6","./utils/UNSAFE_mergeInterpolations","./utils/UNSAFE_classNames","./classNames-3c307969","./_curry3-8ffdde1d","./_curry2-b02f6247","./_has-fad415e9","./utils/UNSAFE_interpolations/boxalignment","./keys-9d7cdf1f","./utils/UNSAFE_interpolations/flexbox","./flexbox-b8de8bb4","./utils/UNSAFE_interpolations/flexitem","./flexitem-d8628091","./utils/PRIVATE_timer","./MessageCloseButton-c76a52a8","./UNSAFE_Button","./Button-18083439","./UNSAFE_BaseButton","./BaseButton-c6deca8c","./hooks/UNSAFE_usePress","./hooks/UNSAFE_useHover","./hooks/UNSAFE_useToggle","./hooks/UNSAFE_useActive","./utils/PRIVATE_clientHints","./clientHints-7d8b1c52","./hooks/UNSAFE_useTabbableMode","./utils/UNSAFE_mergeProps","./index-55b2db15","./index-bd92b0b3","./UNSAFE_Icon","./Icon-87f4ca0b","./hooks/UNSAFE_useTooltip","./hooks/UNSAFE_useId","./UNSAFE_Floating","./Floating-a320db48","./index-2f5333e8","./hooks/UNSAFE_useUser","./utils/PRIVATE_floatingUtils","./utils/PRIVATE_refUtils","./hooks/UNSAFE_useOutsideClick","./hooks/UNSAFE_useFocus","./hooks/UNSAFE_useTouch","./hooks/UNSAFE_useAnimation","./useAnimation-8e4e9999","./hooks/UNSAFE_useTheme","./MessageDetail-43b9aea2","./MessageFormattingUtils-b6297ef3","./utils/UNSAFE_getLocale","./utils/UNSAFE_stringUtils","./stringUtils-48915fb5","./Message.types-2209616d","./MessageStartIcon-6ef050cb","./MessageSummary-6829e689","./MessageTimestamp-663c8997","./MessageUtils-d33dd1be","./utils/UNSAFE_logger","./utils/UNSAFE_soundUtils","./MessagesManager-d5b3671c","./PRIVATE_TransitionGroup","./hooks/UNSAFE_useMessagesContext","./PRIVATE_MessageLayer","./MessageLayer-75166056","./UNSAFE_WindowOverlay","./UNSAFE_FocusTrap","./FocusTrap-444cf340","./utils/PRIVATE_tabbableUtils","./UNSAFE_LiveRegion"],(function(s,e,o,t,a,i,l,n,u,_,A,r,E,U,F,N,S,c,d,g,b,f,k,h,T,p,M,m,x,I,y,P,B,R,V,v,L,C,H,O,j,w,z,D,G,W,q,J,K,Q,X,Y,Z,$,ss,es,os,ts,as,is,ls,ns,us,_s,As,rs,Es,Us,Fs,Ns,Ss,cs,ds,gs,bs,fs,ks,hs,Ts,ps,Ms,ms,xs,Is,ys,Ps,Bs){"use strict";s.MessageToast=e.MessageToast,Object.defineProperty(s,"__esModule",{value:!0})}));
+define(["exports","./MessageToast-c1228272","preact/jsx-runtime","css!./UNSAFE_MessageToast.css","preact/hooks","./UNSAFE_Environment","preact","./UNSAFE_Layer","preact/compat","./hooks/PRIVATE_useMessagesFocusManager","./hooks/UNSAFE_useBreakpointValues","./hooks/UNSAFE_useBreakpoints","./hooks/UNSAFE_useTranslationBundle","./PRIVATE_Message","./UNSAFE_Flex","./Flex-bfc6c229","./tslib.es6-fa3971d7","./utils/UNSAFE_interpolations/dimensions","./utils/UNSAFE_arrayUtils","./utils/UNSAFE_size","./_curry1-9eeaf6ed","./utils/UNSAFE_mergeInterpolations","./utils/UNSAFE_classNames","./classNames-e580c7c7","./_curry3-167fa665","./_curry2-466cc994","./_has-aa07e02d","./utils/UNSAFE_interpolations/boxalignment","./keys-992a0824","./utils/UNSAFE_interpolations/flexbox","./flexbox-37da5c1b","./utils/UNSAFE_interpolations/flexitem","./flexitem-f592cd81","./utils/PRIVATE_timer","./MessageCloseButton-8366a158","./UNSAFE_Button","./Button-26513e96","./UNSAFE_BaseButton","./BaseButton-a31275cc","./hooks/UNSAFE_usePress","./hooks/UNSAFE_useHover","./hooks/UNSAFE_useToggle","./hooks/UNSAFE_useActive","./utils/PRIVATE_clientHints","./clientHints-914fecb1","./hooks/UNSAFE_useTabbableMode","./utils/UNSAFE_mergeProps","./index-03ab344e","./index-4d399da7","./UNSAFE_Icon","./Icon-66acac47","./hooks/UNSAFE_useTooltip","./hooks/UNSAFE_useId","./UNSAFE_Floating","./Floating-863a4a52","./index-17cde748","./hooks/UNSAFE_useUser","./utils/PRIVATE_floatingUtils","./utils/PRIVATE_refUtils","./hooks/UNSAFE_useOutsideClick","./hooks/UNSAFE_useFocus","./hooks/UNSAFE_useTouch","./hooks/UNSAFE_useAnimation","./useAnimation-215b2be2","./hooks/UNSAFE_useTheme","./MessageDetail-d500a9a3","./MessageFormattingUtils-bdfaac26","./utils/UNSAFE_getLocale","./utils/UNSAFE_stringUtils","./stringUtils-e3a47803","./Message.types-eb760bd7","./MessageStartIcon-20e17ea1","./MessageSummary-c91f9b00","./MessageTimestamp-de77475d","./MessageUtils-8216ac4e","./utils/UNSAFE_logger","./utils/UNSAFE_soundUtils","./MessagesManager-615b69fb","./PRIVATE_TransitionGroup","./hooks/UNSAFE_useMessagesContext","./PRIVATE_MessageLayer","./MessageLayer-21a1fac3","./UNSAFE_WindowOverlay","./UNSAFE_FocusTrap","./FocusTrap-4796ed88","./utils/PRIVATE_tabbableUtils","./UNSAFE_LiveRegion"],function(e,s,a,o,t,i,l,n,u,_,A,r,E,U,F,c,N,S,g,d,b,k,h,T,p,M,m,f,x,I,y,P,B,R,V,v,L,C,H,O,j,w,z,D,G,W,q,J,K,Q,X,Y,Z,$,ee,se,ae,oe,te,ie,le,ne,ue,_e,Ae,re,Ee,Ue,Fe,ce,Ne,Se,ge,de,be,ke,he,Te,pe,Me,me,fe,xe,Ie,ye,Pe,Be){"use strict";e.MessageToast=s.MessageToast,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=UNSAFE_MessageToast.js.map