@oracle/oraclejet-preact 14.0.6 → 14.0.7

package/amd/Badge-3a3bc336.js

@@ -0,0 +1,40 @@
+/* @oracle/oraclejet-preact: 14.0.7 */
+define(['exports', 'preact/jsx-runtime', './utils/UNSAFE_classNames', 'module', './classNames-027de734'], (function (exports, jsxRuntime, utils_UNSAFE_classNames, linaria, classNames) { 'use strict';
+
+    const styles = {
+      base: "base-1xjy4o6",
+      //right-aligned with the right edge of another component for ltr direction
+      //left-aligned for rtl direction pending by
+      //https://jira.oraclecorp.com/jira/browse/JET-47572: need an api for rtl
+      end: "end-1ctukc0",
+      neutral: "neutral-1nmz899",
+      danger: "danger-5ysw4v",
+      warning: "warning-176abij",
+      success: "success-14i8mee",
+      info: "info-1mzxgyi",
+      neutralSubtle: "neutralSubtle-1b4gwtd",
+      dangerSubtle: "dangerSubtle-u0gys3",
+      warningSubtle: "warningSubtle-pbjmxc",
+      successSubtle: "successSubtle-hy1ns",
+      infoSubtle: "infoSubtle-1vewd82",
+      childrenMargins: "childrenMargins-1sz0l67"
+    };
+    function Badge({
+      variant = 'neutral',
+      size = 'md',
+      edge = 'none',
+      children
+    }) {
+      const textClasses = classNames.classNames([styles.base, size === 'sm' && 'oj-badge-sm', edge === 'end' && styles.end, styles[variant], styles.childrenMargins]);
+      return jsxRuntime.jsx("span", Object.assign({
+        class: textClasses
+      }, {
+        children: children
+      }));
+    }
+
+    exports.Badge = Badge;
+
+}));
+/*  */
+//# sourceMappingURL=Badge-3a3bc336.js.map

package/{cjs/Badge-1a50236d.js.map → amd/Badge-3a3bc336.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Badge-1a50236d.js","sources":["../../src/UNSAFE_Badge/Badge.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\n\nexport type Props = {\n  /**\n   * Sets the variant for the badge. Badge can be subtle or solid with different colors.\n   */\n  variant?:\n    | 'neutral'\n    | 'neutralSubtle'\n    | 'danger'\n    | 'dangerSubtle'\n    | 'success'\n    | 'successSubtle'\n    | 'warning'\n    | 'warningSubtle'\n    | 'info'\n    | 'infoSubtle';\n  /**\n   * Specifies the size of the badge. Consists of two options: Medium and small.\n   */\n  size?: 'sm' | 'md';\n  /**\n   * Specifies the edge of the badge. Badges can be attached to the end edge of another component. They lose their default corner rounding on right side for ltr direction or left side for rtl direction.\n   */\n  edge?: 'none' | 'end';\n  /**\n   * Specifies the string that will be rendered in the badge.\n   */\n  children: string;\n};\n\nconst styles = {\n  base: cssProps`${{\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color)',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-text-color)',\n    display: 'inline-block',\n    paddingTop: '0',\n    paddingBottom: '0',\n    paddingLeft: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-padding)',\n    paddingRight: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-padding)',\n    boxSizing: 'border-box',\n    borderTopLeftRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-border-radius)',\n    borderTopRightRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-border-radius)',\n    borderBottomRightRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-border-radius)',\n    borderBottomLeftRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-border-radius)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-height)',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-height)',\n    minWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-height)',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-font-weight)',\n    fontStretch: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-font-stretch)',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n    textAlign: 'center',\n    verticalAlign: 'middle'\n  }}`,\n\n  //right-aligned with the right edge of another component for ltr direction\n  //left-aligned for rtl direction pending by\n  //https://jira.oraclecorp.com/jira/browse/JET-47572: need an api for rtl\n  end: cssProps`${{\n    borderTopRightRadius: '0',\n    borderBottomRightRadius: '0'\n  }}`,\n\n  neutral: cssProps`${{\n    /* solid neutral badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-neutral-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-neutral-contrast)'\n  }}`,\n  danger: cssProps`${{\n    /* solid danger badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-contrast)'\n  }}`,\n  warning: cssProps`${{\n    /* solid warning badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-contrast)'\n  }}`,\n  success: cssProps`${{\n    /* solid success badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-success-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-success-contrast)'\n  }}`,\n  info: cssProps`${{\n    /* solid info badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-info-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-info-contrast)'\n  }}`,\n\n  neutralSubtle: cssProps`${{\n    /* subtle neutral badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-neutral-secondary-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-neutral-secondary-contrast)'\n  }}`,\n  dangerSubtle: cssProps`${{\n    /* subtle danger badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-secondary-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-secondary-contrast)'\n  }}`,\n  warningSubtle: cssProps`${{\n    /* subtle warning badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-secondary-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-secondary-contrast)'\n  }}`,\n  successSubtle: cssProps`${{\n    /* subtle success badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-success-secondary-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-success-secondary-contrast)'\n  }}`,\n  infoSubtle: cssProps`${{\n    /* subtle info badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-info-secondary-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-info--secondarycontrast)'\n  }}`,\n\n  childrenMargins: cssProps`${{\n    /* @ts-ignore */\n    '& > *': {\n      marginTop: '0 !important',\n      marginBottom: '0 !important',\n      marginLeft: '0 !important',\n      marginRight: '0 !important'\n    }\n  }}`\n};\n\nexport function Badge({ variant = 'neutral', size = 'md', edge = 'none', children }: Props) {\n  const textClasses = classNames([\n    styles.base,\n    size === 'sm' && 'oj-badge-sm',\n    edge === 'end' && styles.end,\n    styles[variant],\n    styles.childrenMargins\n  ]);\n  return <span class={textClasses}>{children}</span>;\n}\n"],"names":["styles","Badge","variant","size","edge","children","base","end","childrenMargins","_jsx","Object","assign","class","textClasses"],"mappings":";;;;;;;;AAuCA,MAAAA,MAAA,GAAA;QAAA,UAAA;;;;OAAA,UAAA;WAAA,QAAA;UAAA,UAAA;WAAA,UAAA;WAAA,QAAA;QAAA,UAAA;iBAAA,UAAA;gBAAA,QAAA;iBAAA,UAAA;iBAAA,UAAA;cAAA,UAAA;;AAAA,CAAA,CAAA;AAkHA,SAAAC,KAAA,CAAA;AAAAC,EAAAA,OAAA,GAAA,SAAA;AAAAC,EAAAA,IAAA,GAAA,IAAA;AAAAC,EAAAA,IAAA,GAAA,MAAA;AAAAC,EAAAA,QAAAA;AAAA,CAAA,EAAA;6CAEIL,MAAA,CAAAM,sCAEAF,IAAA,KAAA,KAAA,IAAAJ,MAAA,CAAAO,sBAEAP,MAAA,CAAAQ;AAEF,EAAA,OAAAC,cAAA,CAAA,MAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAAC,IAAAA,KAAA,EAAAC,WAAAA;AAAA,GAAA,EAAA;AAAAR,IAAAA,QAAA,EAAAA,QAAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AACF;;;;;;;"}
+{"version":3,"file":"Badge-3a3bc336.js","sources":["../../src/UNSAFE_Badge/Badge.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\n\nexport type Props = {\n  /**\n   * Sets the variant for the badge. Badge can be subtle or solid with different colors.\n   */\n  variant?:\n    | 'neutral'\n    | 'neutralSubtle'\n    | 'danger'\n    | 'dangerSubtle'\n    | 'success'\n    | 'successSubtle'\n    | 'warning'\n    | 'warningSubtle'\n    | 'info'\n    | 'infoSubtle';\n  /**\n   * Specifies the size of the badge. Consists of two options: Medium and small.\n   */\n  size?: 'sm' | 'md';\n  /**\n   * Specifies the edge of the badge. Badges can be attached to the end edge of another component. They lose their default corner rounding on right side for ltr direction or left side for rtl direction.\n   */\n  edge?: 'none' | 'end';\n  /**\n   * Specifies the string that will be rendered in the badge.\n   */\n  children: string;\n};\n\nconst styles = {\n  base: cssProps`${{\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color)',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-text-color)',\n    display: 'inline-block',\n    paddingTop: '0',\n    paddingBottom: '0',\n    paddingLeft: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-padding)',\n    paddingRight: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-padding)',\n    boxSizing: 'border-box',\n    borderTopLeftRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-border-radius)',\n    borderTopRightRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-border-radius)',\n    borderBottomRightRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-border-radius)',\n    borderBottomLeftRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-border-radius)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-height)',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-height)',\n    minWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-height)',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-font-weight)',\n    fontStretch: 'var(--oj-c-PRIVATE-DO-NOT-USE-badge-font-stretch)',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n    textAlign: 'center',\n    verticalAlign: 'middle'\n  }}`,\n\n  //right-aligned with the right edge of another component for ltr direction\n  //left-aligned for rtl direction pending by\n  //https://jira.oraclecorp.com/jira/browse/JET-47572: need an api for rtl\n  end: cssProps`${{\n    borderTopRightRadius: '0',\n    borderBottomRightRadius: '0'\n  }}`,\n\n  neutral: cssProps`${{\n    /* solid neutral badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-neutral-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-neutral-contrast)'\n  }}`,\n  danger: cssProps`${{\n    /* solid danger badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-contrast)'\n  }}`,\n  warning: cssProps`${{\n    /* solid warning badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-contrast)'\n  }}`,\n  success: cssProps`${{\n    /* solid success badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-success-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-success-contrast)'\n  }}`,\n  info: cssProps`${{\n    /* solid info badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-info-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-info-contrast)'\n  }}`,\n\n  neutralSubtle: cssProps`${{\n    /* subtle neutral badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-neutral-secondary-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-neutral-secondary-contrast)'\n  }}`,\n  dangerSubtle: cssProps`${{\n    /* subtle danger badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-secondary-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-secondary-contrast)'\n  }}`,\n  warningSubtle: cssProps`${{\n    /* subtle warning badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-secondary-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-secondary-contrast)'\n  }}`,\n  successSubtle: cssProps`${{\n    /* subtle success badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-success-secondary-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-success-secondary-contrast)'\n  }}`,\n  infoSubtle: cssProps`${{\n    /* subtle info badges */\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-bg-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-info-secondary-1)',\n    '--oj-c-PRIVATE-DO-NOT-USE-badge-text-color':\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-info--secondarycontrast)'\n  }}`,\n\n  childrenMargins: cssProps`${{\n    /* @ts-ignore */\n    '& > *': {\n      marginTop: '0 !important',\n      marginBottom: '0 !important',\n      marginLeft: '0 !important',\n      marginRight: '0 !important'\n    }\n  }}`\n};\n\nexport function Badge({ variant = 'neutral', size = 'md', edge = 'none', children }: Props) {\n  const textClasses = classNames([\n    styles.base,\n    size === 'sm' && 'oj-badge-sm',\n    edge === 'end' && styles.end,\n    styles[variant],\n    styles.childrenMargins\n  ]);\n  return <span class={textClasses}>{children}</span>;\n}\n"],"names":["styles","Badge","variant","size","edge","children","base","end","childrenMargins","_jsx","Object","assign","class","textClasses"],"mappings":";;;IAuCA,MAAAA,MAAA,GAAA;YAAA,cAAA;;;;WAAA,aAAA;eAAA,iBAAA;cAAA,eAAA;eAAA,iBAAA;eAAA,iBAAA;YAAA,cAAA;qBAAA,uBAAA;oBAAA,qBAAA;qBAAA,sBAAA;qBAAA,qBAAA;kBAAA,oBAAA;;IAAA,CAAA,CAAA;IAkHA,SAAAC,KAAA,CAAA;IAAAC,EAAAA,OAAA,GAAA,SAAA;IAAAC,EAAAA,IAAA,GAAA,IAAA;IAAAC,EAAAA,IAAA,GAAA,MAAA;IAAAC,EAAAA,QAAAA;IAAA,CAAA,EAAA;iDAEIL,MAAA,CAAAM,sCAEAF,IAAA,KAAA,KAAA,IAAAJ,MAAA,CAAAO,sBAEAP,MAAA,CAAAQ;IAEF,EAAA,OAAAC,cAAA,CAAA,MAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;IAAAC,IAAAA,KAAA,EAAAC,WAAAA;IAAA,GAAA,EAAA;IAAAR,IAAAA,QAAA,EAAAA,QAAAA;IAAA,GAAA,CAAA,CAAA,CAAA;IACF;;;;;;;;;;;"}

package/amd/BaseButton-20a653f3.js

@@ -0,0 +1,148 @@
+/* @oracle/oraclejet-preact: 14.0.7 */
+define(['exports', './tslib.es6-71b1ba5b', 'preact/jsx-runtime', './hooks/UNSAFE_usePress', './hooks/UNSAFE_useHover', './hooks/UNSAFE_useActive', './utils/UNSAFE_classNames', 'preact/compat', 'module', './utils/UNSAFE_interpolations/dimensions', './utils/UNSAFE_mergeInterpolations', './utils/PRIVATE_clientHints', './hooks/UNSAFE_useTabbableMode', './utils/UNSAFE_mergeProps', './clientHints-361cde40', './classNames-027de734'], (function (exports, tslib_es6, jsxRuntime, hooks_UNSAFE_usePress, hooks_UNSAFE_useHover, hooks_UNSAFE_useActive, utils_UNSAFE_classNames, compat, linaria, utils_UNSAFE_interpolations_dimensions, utils_UNSAFE_mergeInterpolations, utils_PRIVATE_clientHints, hooks_UNSAFE_useTabbableMode, utils_UNSAFE_mergeProps, clientHints$1, classNames) { 'use strict';
+
+   const NullFunction = () => null;
+
+   const activeStyles = {
+     backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-active)',
+     borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-active)',
+     color: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-active)'
+   };
+   const hoverStyles = {
+     backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-hover)',
+     borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-hover)',
+     color: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-hover)'
+   };
+   const compStyles = {
+     base: "base-1xex7u5",
+     hover: "hover-1073a37",
+     active: "active-139h5i3",
+     pseudohover: "pseudohover-jmoffs",
+     pseudohoverSpan: "pseudohoverSpan-dacrsw",
+     unstyled: "unstyled-1x2rn34",
+     min: "min-1a30tto",
+     fill: "fill-covd16",
+     container: "container-rndlor",
+     embedded: "embedded-1nxt8m6",
+     noBorderRadiusStart: "noBorderRadiusStart-ps1zm8",
+     noBorderRadiusEnd: "noBorderRadiusEnd-g8oik",
+     disabled: "disabled-10heyfa",
+     bottom: "bottom-wfdx68"
+   };
+   const childrenStyles = "childrenStyles-1m0gm13";
+   const interpolations = [...Object.values(utils_UNSAFE_interpolations_dimensions.dimensionInterpolations)];
+   const styleInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations(interpolations);
+   const clientHints = clientHints$1.getClientHints(); // :active only works on IOS devices if a touch handler exists
+
+   const iosProps = clientHints.platform === 'ios' ? {
+     ontouchstart: function () {}
+   } : {};
+   const isHybrid = clientHints$1.getClientHints().isHybrid;
+
+   const roleProps = (elType, hidden) => {
+     switch (elType) {
+       case 'link':
+         return {
+           role: 'link'
+         };
+
+       case 'button':
+         return {};
+
+       default:
+         return hidden ? {
+           role: 'generic'
+         } : {
+           role: 'button'
+         };
+     }
+   };
+
+   const BaseButton = compat.forwardRef((_a, ref) => {
+     var {
+       variant = 'outlined',
+       isDisabled = false,
+       isRepeat = false,
+       size = 'md',
+       elementDetails = {
+         type: 'button'
+       },
+       styling = ['default'],
+       edge = 'none',
+       accessibleLabel,
+       ariaHidden,
+       ariaExpanded,
+       ariaRoledescription
+     } = _a,
+         props = tslib_es6.__rest(_a, ["variant", "isDisabled", "isRepeat", "size", "elementDetails", "styling", "edge", "accessibleLabel", "ariaHidden", "ariaExpanded", "ariaRoledescription"]);
+
+     const {
+       pressProps
+     } = hooks_UNSAFE_usePress.usePress(props.onAction ? props.onAction : NullFunction, {
+       isDisabled,
+       isRepeat
+     });
+
+     const isStyled = name => {
+       return styling.indexOf(name) > -1;
+     };
+
+     const {
+       hoverProps,
+       isHover
+     } = hooks_UNSAFE_useHover.useHover({
+       isDisabled: !isHybrid
+     });
+     const {
+       activeProps,
+       isActive
+     } = hooks_UNSAFE_useActive.useActive();
+
+     const _b = styleInterpolations(props),
+           {
+       class: cls
+     } = _b,
+           styles = tslib_es6.__rest(_b, ["class"]);
+
+     const _c = Object.assign({}, elementDetails),
+           {
+       type: elementType = 'button'
+     } = _c,
+           elementProps = tslib_es6.__rest(_c, ["type"]);
+
+     const role = roleProps(elementType, ariaHidden !== null && ariaHidden !== void 0 ? ariaHidden : false);
+     const tooltip = props.title || accessibleLabel;
+     const ElementType = elementDetails.type;
+     const isSpan = ElementType == 'span';
+     const isBaseButton = ElementType == 'button';
+     const {
+       isTabbable
+     } = hooks_UNSAFE_useTabbableMode.useTabbableMode();
+     const rootStyles = classNames.classNames([!isStyled('unstyled') && compStyles.base, isStyled('unstyled') && compStyles.unstyled, isStyled('embedded') && compStyles.embedded, isStyled('container') && compStyles.container, isStyled('noBorderRadiusStart') && compStyles.noBorderRadiusStart, isStyled('noBorderRadiusEnd') && compStyles.noBorderRadiusEnd, isStyled('active') && compStyles.active, isStyled('fill') && compStyles.fill, isStyled('min') && compStyles.min, `oj-c-base-button-${variant}`, `oj-c-base-button-${size}`, isDisabled && compStyles.disabled, edge === 'bottom' && compStyles.bottom, !isHybrid && !isSpan && !isActive && compStyles.pseudohover, !isHybrid && isSpan && !isActive && !isDisabled && !isStyled('container') && compStyles.pseudohoverSpan, isHybrid && isHover && !isActive && !isDisabled && !isStyled('container') && compStyles.hover, !isStyled('container') && isActive && !isDisabled && compStyles.active, childrenStyles]);
+     const mergedProps = utils_UNSAFE_mergeProps.mergeProps(elementProps, pressProps, iosProps, hoverProps, isStyled('container') ? {} : activeProps, isBaseButton ? {} : {
+       'aria-disabled': isDisabled
+     });
+     return jsxRuntime.jsx(ElementType // The ref casting was done to satisfy TS compiler, when the forwardRef had to be updated to ForwardedRef.
+     , Object.assign({
+       // The ref casting was done to satisfy TS compiler, when the forwardRef had to be updated to ForwardedRef.
+       ref: ref,
+       disabled: isDisabled,
+       class: `${rootStyles} ${cls}`,
+       style: styles,
+       autofocus: props['autofocus'],
+       title: tooltip,
+       tabIndex: isDisabled || !isTabbable ? -1 : 0,
+       "aria-label": accessibleLabel,
+       "aria-hidden": ariaHidden,
+       "aria-roledescription": ariaRoledescription,
+       "aria-expanded": ariaExpanded
+     }, mergedProps, role, {
+       children: props.children
+     }));
+   });
+
+   exports.BaseButton = BaseButton;
+
+}));
+/*  */
+//# sourceMappingURL=BaseButton-20a653f3.js.map

package/amd/{BaseButton-7b3d7ae3.js.map → BaseButton-20a653f3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"BaseButton-7b3d7ae3.js","sources":["../../src/UNSAFE_BaseButton/BaseButton.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Vers.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren } from 'preact';\nimport { usePress } from '../hooks/UNSAFE_usePress';\nimport { useHover } from '../hooks/UNSAFE_useHover';\nimport { useActive } from '../hooks/UNSAFE_useActive';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype BaseButtonElementDetails =\n  | { type: 'button' }\n  | { type: 'a'; href: string; target?: string; rel?: string }\n  | { type: 'span' };\nconst NullFunction = () => null;\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLElement>, 'autofocus' | 'title'>;\nexport type StylingOptions =\n  | 'default'\n  | 'min'\n  | 'embedded'\n  | 'container'\n  | 'unstyled'\n  | 'fill'\n  | 'noBorderRadiusEnd'\n  | 'noBorderRadiusStart'\n  | 'active';\n\ntype AriaProps = {\n  ariaHidden?: boolean;\n  ariaExpanded?: boolean;\n  ariaRoledescription?: string;\n};\n\nexport type Props = IntrinsicProps &\n  AriaProps &\n  DimensionProps & {\n    /**\n     *The default slot is the button's text label. The oj-c-base-button element accepts plain text or DOM nodes as children for the default slot.\"\n     */\n    children?: ComponentChildren;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * Specifies if repeated events are dispatched for key or pointer held down\n     */\n    isRepeat?: boolean;\n\n    /**\n     *\n     * Indicates in what states the button has chrome (background and border).\n     *     \"borderless\"': \"Borderless buttons are the least prominent variation.\n     * Borderless buttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n     * solid buttons. Outlined buttons are useful for secondary actions.\",\n     *     \"solid\"': \"Solid buttons stand out, and direct the user's attention to the\n     *  most important actions in the UI.\",\n     *     \"callToAction\"': \"A Call To Action (CTA) button guides the user to take or\n     * complete the action that is the main goal of the page or page section. There\n     * should only be one CTA button on a page at any given time.\",\n     *     \"danger\"': \"A Danger button alerts the user to a dangerous situation.\",\n     */\n    variant?: 'borderless' | 'outlined' | 'solid' | 'callToAction' | 'danger';\n\n    /**\n     * The size indicates how large the button is rendered: \"sm\", \"md\" (default), \"lg\".\n     */\n    size?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Edge can be used to specify that the button is intended to go at the bottom of\n     * a region, stretching from left to right: \"bottom\" or \"none\" (default).\n     */\n    edge?: 'none' | 'bottom';\n\n    /**\n     * The accessibleLabel is used to provide guidance for screen readers.\n     */\n    accessibleLabel?: string;\n\n    /**\n     * Styling can be used for customizing buttons by removing label padding (\"min\") or\n     * removing all styling (\"unstyled\").\n     */\n    styling?: StylingOptions[];\n\n    /**\n     * Triggered when a button is clicked, whether by keyboard, mouse, or touch events.\n     */\n    onAction?: () => void;\n\n    /**\n     * Indicate element type and associated details\n     */\n    elementDetails?: BaseButtonElementDetails;\n  };\n\nconst activeStyles = {\n  backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-active)',\n  borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-active)',\n  color: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-active)'\n};\n\nconst hoverStyles = {\n  backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-hover)',\n  borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-hover)',\n  color: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-hover)'\n};\n\nconst compStyles = {\n  base: cssProps`${{\n    alignItems: 'center',\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color)',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color)',\n    borderRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-radius)',\n    borderStyle: 'solid',\n    borderWidth: '1px',\n    boxSizing: 'border-box',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-color)',\n    cursor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable)',\n    display: 'inline-block',\n    fontFamily: 'inherit',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-font-weight)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-height)',\n    justifyContent: 'center',\n    minWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-height)',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-to-edge-padding)',\n    paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-to-edge-padding)',\n    paddingTop: 0,\n    paddingBottom: 0,\n    pointerEvents: 'auto',\n    textOverflow: 'ellipsis',\n    verticalAlign: 'top',\n    WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n    whiteSpace: 'nowrap',\n\n    // @ts-ignore\n    '&:active': activeStyles,\n\n    '&:focus-visible': {\n      outlineStyle: 'dotted',\n      outlineOffset: '1px',\n      outlineWidth: '1px',\n      outlineColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)'\n    }\n  }}`,\n\n  hover: cssProps`${{\n    // @ts-ignore\n    '&:not(:active)': hoverStyles\n  }}`,\n\n  active: cssProps`${activeStyles}`,\n\n  pseudohover: cssProps`${{\n    // @ts-ignore\n    '@media(hover: hover)': {\n      '&:hover:enabled:not(:active)': hoverStyles\n    }\n  }}`,\n\n  pseudohoverSpan: cssProps`${{\n    // @ts-ignore\n    '@media(hover: hover)': {\n      '&:hover:not(:active)': hoverStyles\n    }\n  }}`,\n\n  unstyled: cssProps`${{\n    boxSizing: 'border-box',\n    cursor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-height)'\n  }}`,\n\n  min: cssProps`${{\n    paddingInlineStart: '0',\n    paddingInlineEnd: '0'\n  }}`,\n\n  fill: cssProps`${{\n    width: '100%'\n  }}`,\n\n  container: cssProps`\n   ${{\n     backgroundColor: 'transparent',\n     borderStyle: 'hidden',\n     cursor: 'none',\n     display: 'flex',\n     '&:active': {\n       backgroundColor: 'transparent',\n       borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color)'\n     }\n   }}\n `,\n\n  embedded: cssProps`\n   ${{\n     height: '100%',\n     display: 'flex',\n     '&:focus-visible': {\n       outlineStyle: 'none'\n     }\n   }}\n `,\n\n  noBorderRadiusStart: cssProps`\n ${{\n   borderStartStartRadius: 0,\n   borderEndStartRadius: 0,\n   borderInlineStartWidth: '0px'\n }}\n `,\n\n  noBorderRadiusEnd: cssProps`\n ${{\n   borderEndEndRadius: 0,\n   borderStartEndRadius: 0,\n   borderInlineEndWidth: '0px'\n }}\n `,\n\n  disabled: cssProps`${{\n    pointerEvents: 'none',\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-disabled)',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-disabled)',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-disabled)'\n  }}`,\n\n  bottom: cssProps`${{\n    borderLeftWidth: '0',\n    borderRightWidth: '0',\n    borderBlockEndWidth: '0',\n    width: '100%',\n    borderTopLeftRadius: '0',\n    borderTopRightRadius: '0'\n  }}`\n};\n\nconst childrenStyles = cssProps`${{\n  /* @ts-ignore */\n  '& > *': {\n    marginTop: '0 !important',\n    marginBottom: '0 !important',\n    marginLeft: '0 !important',\n    marginRight: '0 !important'\n  }\n}}`;\n\nconst interpolations = [...Object.values(dimensionInterpolations)];\n\nconst styleInterpolations = mergeInterpolations<Props>(interpolations);\n\nconst clientHints = getClientHints();\n// :active only works on IOS devices if a touch handler exists\nconst iosProps = clientHints.platform === 'ios' ? { ontouchstart: function () {} } : {};\nconst isHybrid = getClientHints().isHybrid;\n\nconst roleProps = (elType: string, hidden: boolean) => {\n  switch (elType) {\n    case 'link':\n      return { role: 'link' };\n    case 'button':\n      return {};\n    default:\n      return hidden ? { role: 'generic' } : { role: 'button' };\n  }\n};\n\nexport const BaseButton = forwardRef(\n  (\n    {\n      variant = 'outlined',\n      isDisabled = false,\n      isRepeat = false,\n      size = 'md',\n      elementDetails = { type: 'button' },\n      styling = ['default'],\n      edge = 'none',\n      accessibleLabel,\n      ariaHidden,\n      ariaExpanded,\n      ariaRoledescription,\n      ...props\n    }: Props,\n    ref?:\n      | ForwardedRef<HTMLButtonElement>\n      | ForwardedRef<HTMLAnchorElement>\n      | ForwardedRef<HTMLSpanElement>\n  ) => {\n    const { pressProps } = usePress(props.onAction ? props.onAction : NullFunction, {\n      isDisabled,\n      isRepeat\n    });\n    const isStyled = (name: StylingOptions) => {\n      return styling.indexOf(name) > -1;\n    };\n    const { hoverProps, isHover } = useHover({ isDisabled: !isHybrid });\n    const { activeProps, isActive } = useActive();\n    const { class: cls, ...styles } = styleInterpolations(props);\n    const { type: elementType = 'button', ...elementProps } = { ...elementDetails };\n    const role = roleProps(elementType, ariaHidden ?? false);\n    const tooltip = props.title || accessibleLabel;\n    const ElementType = elementDetails.type;\n    const isSpan = ElementType == 'span';\n    const isBaseButton = ElementType == 'button';\n    const { isTabbable } = useTabbableMode();\n    const rootStyles = classNames([\n      !isStyled('unstyled') && compStyles.base,\n      isStyled('unstyled') && compStyles.unstyled,\n      isStyled('embedded') && compStyles.embedded,\n      isStyled('container') && compStyles.container,\n      isStyled('noBorderRadiusStart') && compStyles.noBorderRadiusStart,\n      isStyled('noBorderRadiusEnd') && compStyles.noBorderRadiusEnd,\n      isStyled('active') && compStyles.active,\n      isStyled('fill') && compStyles.fill,\n      isStyled('min') && compStyles.min,\n      `oj-c-base-button-${variant}`,\n      `oj-c-base-button-${size}`,\n      isDisabled && compStyles.disabled,\n      edge === 'bottom' && compStyles.bottom,\n      !isHybrid && !isSpan && !isActive && compStyles.pseudohover,\n      !isHybrid &&\n        isSpan &&\n        !isActive &&\n        !isDisabled &&\n        !isStyled('container') &&\n        compStyles.pseudohoverSpan,\n      isHybrid && isHover && !isActive && !isDisabled && !isStyled('container') && compStyles.hover,\n      !isStyled('container') && isActive && !isDisabled && compStyles.active,\n      childrenStyles\n    ]);\n\n    const mergedProps = mergeProps(\n      elementProps,\n      pressProps,\n      iosProps,\n      hoverProps,\n      isStyled('container') ? {} : activeProps,\n      isBaseButton ? {} : { 'aria-disabled': isDisabled }\n    );\n\n    return (\n      <ElementType\n        // The ref casting was done to satisfy TS compiler, when the forwardRef had to be updated to ForwardedRef.\n        ref={\n          ref as ForwardedRef<HTMLButtonElement> &\n            ForwardedRef<HTMLAnchorElement> &\n            ForwardedRef<HTMLSpanElement>\n        }\n        disabled={isDisabled}\n        class={`${rootStyles} ${cls}`}\n        style={styles}\n        autofocus={props['autofocus']}\n        title={tooltip}\n        tabIndex={isDisabled || !isTabbable ? -1 : 0}\n        aria-label={accessibleLabel}\n        aria-hidden={ariaHidden}\n        aria-roledescription={ariaRoledescription}\n        aria-expanded={ariaExpanded}\n        {...mergedProps}\n        {...role}>\n        {props.children}\n      </ElementType>\n    );\n  }\n);\n"],"names":["NullFunction","compStyles","interpolations","Object","values","dimensionInterpolations","styleInterpolations","mergeInterpolations","iosProps","getClientHints","platform","ontouchstart","isHybrid","BaseButton","forwardRef","_a","ref","pressProps","usePress","props","onAction","isStyled","name","hoverProps","isHover","useHover","isDisabled","_b","class","cls","styles","__rest","_c","assign","elementDetails","type","elementType","elementProps","role","elType","hidden","roleProps","ariaHidden","tooltip","title","accessibleLabel","ElementType","isSpan","isBaseButton","isTabbable","useTabbableMode","variant","size","edge","isActive","mergedProps","mergeProps","activeProps","disabled","rootStyles","style","autofocus","tabIndex","ariaRoledescription","ariaExpanded","children"],"mappings":"udA0BA,MAAAA,EAAA,IAAA,KAmGAC,EAAA,SAAAA,EAAA,SAAAA,EAAA,WAAAA,EAAA,WAAAA,EAAA,SAAAA,EAAA,WAAAA,EAAA,WAAAA,EAAA,SAAAA,EAAA,SAAAA,EAAA,SAAAA,EAAA,WAAAA,EAAA,SAAAA,EAAA,WAAAA,aA+IAC,EAAA,IAAAC,OAAAC,OAAAC,EAAAA,0BAEAC,EAAAC,EAAAA,oBAAAL,GAIAM,EAAA,QAFAC,EAAAA,iBAEAC,SAAA,CAAAC,aAAA,cAAA,GACAC,EAAAH,EAAAA,iBAAAG,SAaAC,EAAAC,EAAAA,WAAA,CAAAC,EAAAC,mXAqBI,MAAAC,WAAAA,GAAAC,EAAAA,SAAAC,EAAAC,SAAAD,EAAAC,SAAApB,EAAA,2BAIAqB,EAAAC,oBAGAC,WAAAA,EAAAC,QAAAA,GAAAC,WAAA,CAAAC,YAAAd,6CAEAe,EAAArB,EAAAa,IAAAS,MAAAC,GAAAF,EAAAG,EAAAC,EAAAA,OAAAJ,EAAA,CAAA,UACAK,EAAA7B,OAAA8B,OAAA,GAAAC,IAAAC,KAAAC,EAAA,UAAAJ,EAAAK,EAAAN,EAAAA,OAAAC,EAAA,CAAA,SACAM,EA3CJ,EAAAC,EAAAC,KACE,OAAAD,GACE,IAAA,OACE,MAAA,CAAAD,KAAA,QACF,IAAA,SACE,MAAA,GACF,QACE,OAAAE,EAAA,CAAAF,KAAA,WAAA,CAAAA,KAAA,YAoCFG,CAAAL,EAAAM,MAAAA,GAAAA,GACAC,EAAAxB,EAAAyB,OAAAC,EACAC,GAAAZ,EAAAC,KACAY,GAAA,QAAAD,GACAE,GAAA,UAAAF,IACAG,WAAAA,IAAAC,EAAAA,oCAEE7B,EAAA,aAAApB,EACAoB,EAAA,aAAApB,EACAoB,EAAA,aAAApB,EACAoB,EAAA,cAAApB,EACAoB,EAAA,wBAAApB,EACAoB,EAAA,sBAAApB,EACAoB,EAAA,WAAApB,EACAoB,EAAA,SAAApB,EACAoB,EAAA,QAAApB,EACA,oBAAAkD,IACA,oBAAAC,SAEA,WAAAC,GAAApD,kBAEAW,QAEE0C,IACA5B,oBAEAzB,EACFW,GAAAY,IAAA8B,IAAA5B,IAAAL,EAAA,cAAApB,GACAoB,EAAA,cAAAiC,IAAA5B,GAAAzB,EA1FN,WA8FIsD,GAAAC,EAAAA,WAAAnB,EAAApB,EAAAT,EAAAe,EAAAF,EAAA,aAAA,GAAAoC,EAAAT,GAAA,GAAA,CAAA,gBAAAtB,mCAYIV,IAAAA,EAAA0C,SAAAhC,EAAAE,MAAA,GAAA+B,MAAA9B,IAAA+B,MAAA9B,EAAA+B,UAAA1C,EAAA,UAAAyB,MAAAD,EAAAmB,SAAApC,IAAAuB,IAAA,EAAA,EAAA,aAAAJ,EAAA,cAAAH,EAAA,uBAAAqB,EAAA,gBAAAC,GAAAT,GAAAjB,EAAA,CAAA2B,SAAA9C,EAAA8C"}
+{"version":3,"file":"BaseButton-20a653f3.js","sources":["../../src/UNSAFE_BaseButton/BaseButton.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Vers.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren } from 'preact';\nimport { usePress } from '../hooks/UNSAFE_usePress';\nimport { useHover } from '../hooks/UNSAFE_useHover';\nimport { useActive } from '../hooks/UNSAFE_useActive';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype BaseButtonElementDetails =\n  | { type: 'button' }\n  | { type: 'a'; href: string; target?: string; rel?: string }\n  | { type: 'span' };\nconst NullFunction = () => null;\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLElement>, 'autofocus' | 'title'>;\nexport type StylingOptions =\n  | 'default'\n  | 'min'\n  | 'embedded'\n  | 'container'\n  | 'unstyled'\n  | 'fill'\n  | 'noBorderRadiusEnd'\n  | 'noBorderRadiusStart'\n  | 'active';\n\ntype AriaProps = {\n  ariaHidden?: boolean;\n  ariaExpanded?: boolean;\n  ariaRoledescription?: string;\n};\n\nexport type Props = IntrinsicProps &\n  AriaProps &\n  DimensionProps & {\n    /**\n     *The default slot is the button's text label. The oj-c-base-button element accepts plain text or DOM nodes as children for the default slot.\"\n     */\n    children?: ComponentChildren;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * Specifies if repeated events are dispatched for key or pointer held down\n     */\n    isRepeat?: boolean;\n\n    /**\n     *\n     * Indicates in what states the button has chrome (background and border).\n     *     \"borderless\"': \"Borderless buttons are the least prominent variation.\n     * Borderless buttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n     * solid buttons. Outlined buttons are useful for secondary actions.\",\n     *     \"solid\"': \"Solid buttons stand out, and direct the user's attention to the\n     *  most important actions in the UI.\",\n     *     \"callToAction\"': \"A Call To Action (CTA) button guides the user to take or\n     * complete the action that is the main goal of the page or page section. There\n     * should only be one CTA button on a page at any given time.\",\n     *     \"danger\"': \"A Danger button alerts the user to a dangerous situation.\",\n     */\n    variant?: 'borderless' | 'outlined' | 'solid' | 'callToAction' | 'danger';\n\n    /**\n     * The size indicates how large the button is rendered: \"sm\", \"md\" (default), \"lg\".\n     */\n    size?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Edge can be used to specify that the button is intended to go at the bottom of\n     * a region, stretching from left to right: \"bottom\" or \"none\" (default).\n     */\n    edge?: 'none' | 'bottom';\n\n    /**\n     * The accessibleLabel is used to provide guidance for screen readers.\n     */\n    accessibleLabel?: string;\n\n    /**\n     * Styling can be used for customizing buttons by removing label padding (\"min\") or\n     * removing all styling (\"unstyled\").\n     */\n    styling?: StylingOptions[];\n\n    /**\n     * Triggered when a button is clicked, whether by keyboard, mouse, or touch events.\n     */\n    onAction?: () => void;\n\n    /**\n     * Indicate element type and associated details\n     */\n    elementDetails?: BaseButtonElementDetails;\n  };\n\nconst activeStyles = {\n  backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-active)',\n  borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-active)',\n  color: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-active)'\n};\n\nconst hoverStyles = {\n  backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-hover)',\n  borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-hover)',\n  color: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-hover)'\n};\n\nconst compStyles = {\n  base: cssProps`${{\n    alignItems: 'center',\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color)',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color)',\n    borderRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-radius)',\n    borderStyle: 'solid',\n    borderWidth: '1px',\n    boxSizing: 'border-box',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-color)',\n    cursor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable)',\n    display: 'inline-block',\n    fontFamily: 'inherit',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-font-weight)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-height)',\n    justifyContent: 'center',\n    minWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-height)',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-to-edge-padding)',\n    paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-to-edge-padding)',\n    paddingTop: 0,\n    paddingBottom: 0,\n    pointerEvents: 'auto',\n    textOverflow: 'ellipsis',\n    verticalAlign: 'top',\n    WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n    whiteSpace: 'nowrap',\n\n    // @ts-ignore\n    '&:active': activeStyles,\n\n    '&:focus-visible': {\n      outlineStyle: 'dotted',\n      outlineOffset: '1px',\n      outlineWidth: '1px',\n      outlineColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)'\n    }\n  }}`,\n\n  hover: cssProps`${{\n    // @ts-ignore\n    '&:not(:active)': hoverStyles\n  }}`,\n\n  active: cssProps`${activeStyles}`,\n\n  pseudohover: cssProps`${{\n    // @ts-ignore\n    '@media(hover: hover)': {\n      '&:hover:enabled:not(:active)': hoverStyles\n    }\n  }}`,\n\n  pseudohoverSpan: cssProps`${{\n    // @ts-ignore\n    '@media(hover: hover)': {\n      '&:hover:not(:active)': hoverStyles\n    }\n  }}`,\n\n  unstyled: cssProps`${{\n    boxSizing: 'border-box',\n    cursor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-height)'\n  }}`,\n\n  min: cssProps`${{\n    paddingInlineStart: '0',\n    paddingInlineEnd: '0'\n  }}`,\n\n  fill: cssProps`${{\n    width: '100%'\n  }}`,\n\n  container: cssProps`\n   ${{\n     backgroundColor: 'transparent',\n     borderStyle: 'hidden',\n     cursor: 'none',\n     display: 'flex',\n     '&:active': {\n       backgroundColor: 'transparent',\n       borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color)'\n     }\n   }}\n `,\n\n  embedded: cssProps`\n   ${{\n     height: '100%',\n     display: 'flex',\n     '&:focus-visible': {\n       outlineStyle: 'none'\n     }\n   }}\n `,\n\n  noBorderRadiusStart: cssProps`\n ${{\n   borderStartStartRadius: 0,\n   borderEndStartRadius: 0,\n   borderInlineStartWidth: '0px'\n }}\n `,\n\n  noBorderRadiusEnd: cssProps`\n ${{\n   borderEndEndRadius: 0,\n   borderStartEndRadius: 0,\n   borderInlineEndWidth: '0px'\n }}\n `,\n\n  disabled: cssProps`${{\n    pointerEvents: 'none',\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-disabled)',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-disabled)',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-disabled)'\n  }}`,\n\n  bottom: cssProps`${{\n    borderLeftWidth: '0',\n    borderRightWidth: '0',\n    borderBlockEndWidth: '0',\n    width: '100%',\n    borderTopLeftRadius: '0',\n    borderTopRightRadius: '0'\n  }}`\n};\n\nconst childrenStyles = cssProps`${{\n  /* @ts-ignore */\n  '& > *': {\n    marginTop: '0 !important',\n    marginBottom: '0 !important',\n    marginLeft: '0 !important',\n    marginRight: '0 !important'\n  }\n}}`;\n\nconst interpolations = [...Object.values(dimensionInterpolations)];\n\nconst styleInterpolations = mergeInterpolations<Props>(interpolations);\n\nconst clientHints = getClientHints();\n// :active only works on IOS devices if a touch handler exists\nconst iosProps = clientHints.platform === 'ios' ? { ontouchstart: function () {} } : {};\nconst isHybrid = getClientHints().isHybrid;\n\nconst roleProps = (elType: string, hidden: boolean) => {\n  switch (elType) {\n    case 'link':\n      return { role: 'link' };\n    case 'button':\n      return {};\n    default:\n      return hidden ? { role: 'generic' } : { role: 'button' };\n  }\n};\n\nexport const BaseButton = forwardRef(\n  (\n    {\n      variant = 'outlined',\n      isDisabled = false,\n      isRepeat = false,\n      size = 'md',\n      elementDetails = { type: 'button' },\n      styling = ['default'],\n      edge = 'none',\n      accessibleLabel,\n      ariaHidden,\n      ariaExpanded,\n      ariaRoledescription,\n      ...props\n    }: Props,\n    ref?:\n      | ForwardedRef<HTMLButtonElement>\n      | ForwardedRef<HTMLAnchorElement>\n      | ForwardedRef<HTMLSpanElement>\n  ) => {\n    const { pressProps } = usePress(props.onAction ? props.onAction : NullFunction, {\n      isDisabled,\n      isRepeat\n    });\n    const isStyled = (name: StylingOptions) => {\n      return styling.indexOf(name) > -1;\n    };\n    const { hoverProps, isHover } = useHover({ isDisabled: !isHybrid });\n    const { activeProps, isActive } = useActive();\n    const { class: cls, ...styles } = styleInterpolations(props);\n    const { type: elementType = 'button', ...elementProps } = { ...elementDetails };\n    const role = roleProps(elementType, ariaHidden ?? false);\n    const tooltip = props.title || accessibleLabel;\n    const ElementType = elementDetails.type;\n    const isSpan = ElementType == 'span';\n    const isBaseButton = ElementType == 'button';\n    const { isTabbable } = useTabbableMode();\n    const rootStyles = classNames([\n      !isStyled('unstyled') && compStyles.base,\n      isStyled('unstyled') && compStyles.unstyled,\n      isStyled('embedded') && compStyles.embedded,\n      isStyled('container') && compStyles.container,\n      isStyled('noBorderRadiusStart') && compStyles.noBorderRadiusStart,\n      isStyled('noBorderRadiusEnd') && compStyles.noBorderRadiusEnd,\n      isStyled('active') && compStyles.active,\n      isStyled('fill') && compStyles.fill,\n      isStyled('min') && compStyles.min,\n      `oj-c-base-button-${variant}`,\n      `oj-c-base-button-${size}`,\n      isDisabled && compStyles.disabled,\n      edge === 'bottom' && compStyles.bottom,\n      !isHybrid && !isSpan && !isActive && compStyles.pseudohover,\n      !isHybrid &&\n        isSpan &&\n        !isActive &&\n        !isDisabled &&\n        !isStyled('container') &&\n        compStyles.pseudohoverSpan,\n      isHybrid && isHover && !isActive && !isDisabled && !isStyled('container') && compStyles.hover,\n      !isStyled('container') && isActive && !isDisabled && compStyles.active,\n      childrenStyles\n    ]);\n\n    const mergedProps = mergeProps(\n      elementProps,\n      pressProps,\n      iosProps,\n      hoverProps,\n      isStyled('container') ? {} : activeProps,\n      isBaseButton ? {} : { 'aria-disabled': isDisabled }\n    );\n\n    return (\n      <ElementType\n        // The ref casting was done to satisfy TS compiler, when the forwardRef had to be updated to ForwardedRef.\n        ref={\n          ref as ForwardedRef<HTMLButtonElement> &\n            ForwardedRef<HTMLAnchorElement> &\n            ForwardedRef<HTMLSpanElement>\n        }\n        disabled={isDisabled}\n        class={`${rootStyles} ${cls}`}\n        style={styles}\n        autofocus={props['autofocus']}\n        title={tooltip}\n        tabIndex={isDisabled || !isTabbable ? -1 : 0}\n        aria-label={accessibleLabel}\n        aria-hidden={ariaHidden}\n        aria-roledescription={ariaRoledescription}\n        aria-expanded={ariaExpanded}\n        {...mergedProps}\n        {...role}>\n        {props.children}\n      </ElementType>\n    );\n  }\n);\n"],"names":["NullFunction","activeStyles","backgroundColor","borderColor","color","hoverStyles","compStyles","active","childrenStyles","interpolations","Object","values","dimensionInterpolations","styleInterpolations","mergeInterpolations","clientHints","getClientHints","iosProps","platform","ontouchstart","isHybrid","roleProps","elType","hidden","role","BaseButton","forwardRef","_a","ref","pressProps","usePress","props","onAction","isStyled","name","hoverProps","isHover","useHover","isDisabled","_b","class","cls","styles","__rest","_c","assign","elementDetails","type","elementType","elementProps","ariaHidden","tooltip","title","accessibleLabel","ElementType","isSpan","isBaseButton","isTabbable","useTabbableMode","base","unstyled","embedded","container","noBorderRadiusStart","noBorderRadiusEnd","fill","min","variant","size","edge","bottom","isActive","pseudohoverSpan","hover","mergedProps","mergeProps","activeProps","disabled","rootStyles","style","autofocus","tabIndex","ariaRoledescription","ariaExpanded","children"],"mappings":"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"}

package/amd/Button-87280b4a.js

@@ -0,0 +1,68 @@
+/* @oracle/oraclejet-preact: 14.0.7 */
+define(['exports', 'preact/jsx-runtime', './UNSAFE_BaseButton', './tslib.es6-71b1ba5b', 'module', './utils/UNSAFE_classNames', './classNames-027de734', 'preact/compat', './BaseButton-20a653f3'], (function (exports, jsxRuntime, UNSAFE_BaseButton, tslib_es6, linaria, utils_UNSAFE_classNames, classNames, compat, BaseButton) { 'use strict';
+
+  const compStyles = {
+    text: "text-1noahl4",
+    icon: "icon-1rnzxvk",
+    startText: "startText-19osiyh",
+    endText: "endText-1ug92y4",
+    startIcon: "startIcon-18h9kq7",
+    startIconOnly: "startIconOnly-1vrr0wj",
+    endIcon: "endIcon-1ul85jx",
+    label: "label-ii41ug"
+  };
+
+  const isNullOrUndefined = value => {
+    return value === null || value === undefined;
+  };
+
+  function ButtonLayout(_a) {
+    var {
+      size = 'md',
+      display = 'all',
+      styling = 'default'
+    } = _a,
+        props = tslib_es6.__rest(_a, ["size", "display", "styling"]);
+
+    const showIcons = display === 'all' || display === 'icons';
+    const showText = display === 'all' || display === 'label';
+    const labelClass = compStyles.label;
+    const isOnlyIcon = props.startIcon && (display === 'icons' || !props.children) && !props.endIcon;
+    const isEmbedded = styling === 'embedded';
+    const textStartIcon = !isNullOrUndefined(props.startIcon) && display === 'all';
+    const textEndIcon = !isNullOrUndefined(props.endIcon) && display === 'all';
+    const isTwoIcons = props.startIcon && props.endIcon;
+    const endIconClass = `${compStyles.icon} oj-c-button-layout-${size} ${compStyles.endIcon}`;
+    const startIconStyles = classNames.classNames([compStyles.icon, isEmbedded ? `oj-c-button-layout-embedded-${size}` : `oj-c-button-layout-${size}`, isOnlyIcon ? compStyles.startIconOnly : compStyles.startIcon]);
+    const textStyles = classNames.classNames([compStyles.text, textStartIcon && !isTwoIcons && compStyles.endText, textEndIcon && !isTwoIcons && compStyles.startText]);
+    return jsxRuntime.jsxs("span", Object.assign({
+      class: labelClass
+    }, {
+      children: [showIcons && props.startIcon && jsxRuntime.jsx("span", Object.assign({
+        class: startIconStyles
+      }, {
+        children: props.startIcon
+      })), showText && props.children && jsxRuntime.jsxs("span", Object.assign({
+        class: textStyles
+      }, {
+        children: [" ", props.children, " "]
+      })), showIcons && props.endIcon && jsxRuntime.jsx("span", Object.assign({
+        class: endIconClass
+      }, {
+        children: props.endIcon
+      }))]
+    }));
+  }
+
+  const Button = compat.forwardRef(({ variant = 'outlined', isDisabled = false, isRepeat = false, size = 'md', display = 'all', endIcon, startIcon, autofocus, edge, onAction, label = '', accessibleLabel, title, width }, ref) => {
+      const labelOnly = (!startIcon && !endIcon) || display === 'label';
+      const content = labelOnly ? (label) : (jsxRuntime.jsx(ButtonLayout, Object.assign({ display: display, startIcon: startIcon, endIcon: endIcon, size: size }, { children: label })));
+      return (jsxRuntime.jsx(BaseButton.BaseButton, Object.assign({ ref: ref, isDisabled: isDisabled, isRepeat: isRepeat, size: size, width: width, autofocus: autofocus, edge: edge, variant: variant, styling: [labelOnly ? 'default' : 'min'], onAction: onAction, accessibleLabel: accessibleLabel !== null && accessibleLabel !== void 0 ? accessibleLabel : (display === 'icons' ? label : undefined), title: title !== null && title !== void 0 ? title : (display === 'icons' ? accessibleLabel !== null && accessibleLabel !== void 0 ? accessibleLabel : label : undefined), "aria-label": display === 'icons' ? label : null }, { children: content })));
+  });
+
+  exports.Button = Button;
+  exports.ButtonLayout = ButtonLayout;
+
+}));
+/*  */
+//# sourceMappingURL=Button-87280b4a.js.map

package/{cjs/Button-fe2eda28.js.map → amd/Button-87280b4a.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Button-fe2eda28.js","sources":["../../src/UNSAFE_Button/ButtonLayout.tsx","../../src/UNSAFE_Button/Button.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren, ComponentProps } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { BaseButton } from '../UNSAFE_BaseButton';\n\nexport type ButtonDisplay = 'icons' | 'label' | 'all';\n\nexport type Props = {\n  /**\n   *The default slot is the button's text label. The oj-c-button element accepts plain text or DOM nodes as children for the default slot.\"\n   */\n  children?: ComponentChildren;\n\n  /**\n   * The startIcon is the button's start icon.\n   */\n  startIcon?: ComponentChildren;\n\n  /**\n   * The endIcon is the button's end icon.\n   */\n  endIcon?: ComponentChildren;\n\n  /**\n   * Styling can be used for customizing icon layout by limiting padding (\"embedded\")\n   */\n  styling?: 'default' | 'embedded';\n\n  /**\n   * The size indicates how large the button is rendered.\n   */\n  size?: ComponentProps<typeof BaseButton>['size'];\n\n  /**\n   * Display indicates whether the label, the icons, or all elements should be rendered by the button.\n   */\n  display?: ButtonDisplay;\n};\n\nexport const compStyles = {\n  text: cssProps`\n    ${{\n      overflowX: 'hidden',\n      overflowY: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      display: 'inline-flex'\n    }}\n  `,\n\n  icon: cssProps`\n    ${{\n      display: 'inline-flex',\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-size)',\n      fontWeight: 'normal',\n      marginTop: 0,\n      marginBottom: 0\n    }}\n  `,\n\n  startText: cssProps`\n    ${{\n      marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-to-edge-padding)'\n    }}\n  `,\n\n  endText: cssProps`\n    ${{\n      marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-to-edge-padding)'\n    }}\n  `,\n\n  startIcon: cssProps`\n    ${{\n      marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding)',\n      marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding)'\n    }}\n  `,\n\n  startIconOnly: cssProps`\n    ${{\n      marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding)',\n      marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding)'\n    }}\n  `,\n\n  endIcon: cssProps`\n    ${{\n      marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding)',\n      marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding)'\n    }}\n  `,\n\n  label: cssProps`\n    ${{\n      cursor: 'inherit',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '100%',\n      height: '100%'\n    }}\n  `\n};\n\nconst isNullOrUndefined = (\n  value: ComponentChildren | null | undefined\n): value is null | undefined => {\n  return value === null || value === undefined;\n};\n\nexport function ButtonLayout({\n  size = 'md',\n  display = 'all',\n  styling = 'default',\n  ...props\n}: Props) {\n  const showIcons = display === 'all' || display === 'icons';\n  const showText = display === 'all' || display === 'label';\n  const labelClass = compStyles.label;\n  const isOnlyIcon = props.startIcon && (display === 'icons' || !props.children) && !props.endIcon;\n  const isEmbedded = styling === 'embedded';\n  const textStartIcon = !isNullOrUndefined(props.startIcon) && display === 'all';\n  const textEndIcon = !isNullOrUndefined(props.endIcon) && display === 'all';\n  const isTwoIcons = props.startIcon && props.endIcon;\n\n  const endIconClass = `${compStyles.icon} oj-c-button-layout-${size} ${compStyles.endIcon}`;\n  const startIconStyles = classNames([\n    compStyles.icon,\n    isEmbedded ? `oj-c-button-layout-embedded-${size}` : `oj-c-button-layout-${size}`,\n    isOnlyIcon ? compStyles.startIconOnly : compStyles.startIcon\n  ]);\n  const textStyles = classNames([\n    compStyles.text,\n    textStartIcon && !isTwoIcons && compStyles.endText,\n    textEndIcon && !isTwoIcons && compStyles.startText\n  ]);\n\n  return (\n    <span class={labelClass}>\n      {showIcons && props.startIcon && <span class={startIconStyles}>{props.startIcon}</span>}\n      {showText && props.children && <span class={textStyles}> {props.children} </span>}\n      {showIcons && props.endIcon && <span class={endIconClass}>{props.endIcon}</span>}\n    </span>\n  );\n}\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren, ComponentProps, Ref } from 'preact';\nimport { BaseButton } from '../UNSAFE_BaseButton';\nimport { ButtonLayout } from './ButtonLayout';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { forwardRef } from 'preact/compat';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLButtonElement>, 'autofocus'>;\n\ntype WidthProps = Pick<DimensionProps, 'width'>;\n\ntype Props = IntrinsicProps &\n  WidthProps & {\n    /**\n     * The startIcon is the button's start icon.\n     */\n    startIcon?: ComponentChildren;\n\n    /**\n     * The endIcon is the button's end icon.\n     */\n    endIcon?: ComponentChildren;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * Specifies if repeated events are dispatched for key or pointer held down\n     */\n    isRepeat?: boolean;\n\n    /**\n     * label - button label, used for accessibility if no override\n     */\n    label?: string;\n\n    /**\n     * accessibleLabel - override label for accessibility\n     */\n    accessibleLabel?: string;\n\n    /**\n     * Indicates in what states the button has chrome (background and border).\n     *     \"borderless\"': \"Borderless buttons are the least prominent variation.\n     * Borderless buttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n     * solid buttons. Outlined buttons are useful for secondary actions.\",\n     *     \"solid\"': \"Solid buttons stand out, and direct the user's attention to the\n     *  most important actions in the UI.\",\n     *     \"callToAction\"': \"A Call To Action (CTA) button guides the user to take or\n     * complete the action that is the main goal of the page or page section. There\n     * should only be one CTA button on a page at any given time.\",\n     *     \"danger\"': \"A Danger button alerts the user to a dangerous situation.\",\n     */\n    variant?: ComponentProps<typeof BaseButton>['variant'];\n\n    /**\n     * The size indicates how large the button is rendered.\n     */\n    size?: ComponentProps<typeof BaseButton>['size'];\n\n    /**\n     * Edge can be used to specify that the button is intended to go at the bottom of\n     * a region, stretching from left to right.\n     */\n    edge?: ComponentProps<typeof BaseButton>['edge'];\n\n    /**\n     * Triggered when a button is clicked, whether by keyboard, mouse, or touch events.\n     */\n    onAction?: () => void | null;\n\n    /**\n     * Display indicates whether the label, the icons, or all elements should be rendered by the button.\n     */\n    display?: ComponentProps<typeof ButtonLayout>['display'];\n\n    /**\n     * The title is used to provide a tooltip.\n     */\n    title?: string;\n  };\n\nexport const Button = forwardRef(\n  (\n    {\n      variant = 'outlined',\n      isDisabled = false,\n      isRepeat = false,\n      size = 'md',\n      display = 'all',\n      endIcon,\n      startIcon,\n      autofocus,\n      edge,\n      onAction,\n      label = '',\n      accessibleLabel,\n      title,\n      width\n    }: Props,\n    ref?: Ref<HTMLButtonElement>\n  ) => {\n    const labelOnly = (!startIcon && !endIcon) || display === 'label';\n    const content = labelOnly ? (\n      label\n    ) : (\n      <ButtonLayout display={display} startIcon={startIcon} endIcon={endIcon} size={size}>\n        {label}\n      </ButtonLayout>\n    );\n    return (\n      <BaseButton\n        ref={ref as Ref<HTMLButtonElement> & Ref<HTMLAnchorElement> & Ref<HTMLSpanElement>}\n        isDisabled={isDisabled}\n        isRepeat={isRepeat}\n        size={size}\n        width={width}\n        autofocus={autofocus}\n        edge={edge}\n        variant={variant}\n        styling={[labelOnly ? 'default' : 'min']}\n        onAction={onAction}\n        accessibleLabel={accessibleLabel ?? (display === 'icons' ? label : undefined)}\n        title={title ?? (display === 'icons' ? accessibleLabel ?? label : undefined)}\n        aria-label={display === 'icons' ? label : null}>\n        {content}\n      </BaseButton>\n    );\n  }\n);\n"],"names":["compStyles","isNullOrUndefined","value","undefined","ButtonLayout","_a","size","display","styling","props","__rest","labelClass","label","isEmbedded","textStartIcon","startIcon","textEndIcon","endIcon","endIconClass","icon","text","isTwoIcons","endText","startText","forwardRef","_jsx","BaseButton"],"mappings":"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"}
+{"version":3,"file":"Button-87280b4a.js","sources":["../../src/UNSAFE_Button/ButtonLayout.tsx","../../src/UNSAFE_Button/Button.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren, ComponentProps } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { BaseButton } from '../UNSAFE_BaseButton';\n\nexport type ButtonDisplay = 'icons' | 'label' | 'all';\n\nexport type Props = {\n  /**\n   *The default slot is the button's text label. The oj-c-button element accepts plain text or DOM nodes as children for the default slot.\"\n   */\n  children?: ComponentChildren;\n\n  /**\n   * The startIcon is the button's start icon.\n   */\n  startIcon?: ComponentChildren;\n\n  /**\n   * The endIcon is the button's end icon.\n   */\n  endIcon?: ComponentChildren;\n\n  /**\n   * Styling can be used for customizing icon layout by limiting padding (\"embedded\")\n   */\n  styling?: 'default' | 'embedded';\n\n  /**\n   * The size indicates how large the button is rendered.\n   */\n  size?: ComponentProps<typeof BaseButton>['size'];\n\n  /**\n   * Display indicates whether the label, the icons, or all elements should be rendered by the button.\n   */\n  display?: ButtonDisplay;\n};\n\nexport const compStyles = {\n  text: cssProps`\n    ${{\n      overflowX: 'hidden',\n      overflowY: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      display: 'inline-flex'\n    }}\n  `,\n\n  icon: cssProps`\n    ${{\n      display: 'inline-flex',\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-size)',\n      fontWeight: 'normal',\n      marginTop: 0,\n      marginBottom: 0\n    }}\n  `,\n\n  startText: cssProps`\n    ${{\n      marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-to-edge-padding)'\n    }}\n  `,\n\n  endText: cssProps`\n    ${{\n      marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-to-edge-padding)'\n    }}\n  `,\n\n  startIcon: cssProps`\n    ${{\n      marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding)',\n      marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding)'\n    }}\n  `,\n\n  startIconOnly: cssProps`\n    ${{\n      marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding)',\n      marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding)'\n    }}\n  `,\n\n  endIcon: cssProps`\n    ${{\n      marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding)',\n      marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding)'\n    }}\n  `,\n\n  label: cssProps`\n    ${{\n      cursor: 'inherit',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '100%',\n      height: '100%'\n    }}\n  `\n};\n\nconst isNullOrUndefined = (\n  value: ComponentChildren | null | undefined\n): value is null | undefined => {\n  return value === null || value === undefined;\n};\n\nexport function ButtonLayout({\n  size = 'md',\n  display = 'all',\n  styling = 'default',\n  ...props\n}: Props) {\n  const showIcons = display === 'all' || display === 'icons';\n  const showText = display === 'all' || display === 'label';\n  const labelClass = compStyles.label;\n  const isOnlyIcon = props.startIcon && (display === 'icons' || !props.children) && !props.endIcon;\n  const isEmbedded = styling === 'embedded';\n  const textStartIcon = !isNullOrUndefined(props.startIcon) && display === 'all';\n  const textEndIcon = !isNullOrUndefined(props.endIcon) && display === 'all';\n  const isTwoIcons = props.startIcon && props.endIcon;\n\n  const endIconClass = `${compStyles.icon} oj-c-button-layout-${size} ${compStyles.endIcon}`;\n  const startIconStyles = classNames([\n    compStyles.icon,\n    isEmbedded ? `oj-c-button-layout-embedded-${size}` : `oj-c-button-layout-${size}`,\n    isOnlyIcon ? compStyles.startIconOnly : compStyles.startIcon\n  ]);\n  const textStyles = classNames([\n    compStyles.text,\n    textStartIcon && !isTwoIcons && compStyles.endText,\n    textEndIcon && !isTwoIcons && compStyles.startText\n  ]);\n\n  return (\n    <span class={labelClass}>\n      {showIcons && props.startIcon && <span class={startIconStyles}>{props.startIcon}</span>}\n      {showText && props.children && <span class={textStyles}> {props.children} </span>}\n      {showIcons && props.endIcon && <span class={endIconClass}>{props.endIcon}</span>}\n    </span>\n  );\n}\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren, ComponentProps, Ref } from 'preact';\nimport { BaseButton } from '../UNSAFE_BaseButton';\nimport { ButtonLayout } from './ButtonLayout';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { forwardRef } from 'preact/compat';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLButtonElement>, 'autofocus'>;\n\ntype WidthProps = Pick<DimensionProps, 'width'>;\n\ntype Props = IntrinsicProps &\n  WidthProps & {\n    /**\n     * The startIcon is the button's start icon.\n     */\n    startIcon?: ComponentChildren;\n\n    /**\n     * The endIcon is the button's end icon.\n     */\n    endIcon?: ComponentChildren;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * Specifies if repeated events are dispatched for key or pointer held down\n     */\n    isRepeat?: boolean;\n\n    /**\n     * label - button label, used for accessibility if no override\n     */\n    label?: string;\n\n    /**\n     * accessibleLabel - override label for accessibility\n     */\n    accessibleLabel?: string;\n\n    /**\n     * Indicates in what states the button has chrome (background and border).\n     *     \"borderless\"': \"Borderless buttons are the least prominent variation.\n     * Borderless buttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n     * solid buttons. Outlined buttons are useful for secondary actions.\",\n     *     \"solid\"': \"Solid buttons stand out, and direct the user's attention to the\n     *  most important actions in the UI.\",\n     *     \"callToAction\"': \"A Call To Action (CTA) button guides the user to take or\n     * complete the action that is the main goal of the page or page section. There\n     * should only be one CTA button on a page at any given time.\",\n     *     \"danger\"': \"A Danger button alerts the user to a dangerous situation.\",\n     */\n    variant?: ComponentProps<typeof BaseButton>['variant'];\n\n    /**\n     * The size indicates how large the button is rendered.\n     */\n    size?: ComponentProps<typeof BaseButton>['size'];\n\n    /**\n     * Edge can be used to specify that the button is intended to go at the bottom of\n     * a region, stretching from left to right.\n     */\n    edge?: ComponentProps<typeof BaseButton>['edge'];\n\n    /**\n     * Triggered when a button is clicked, whether by keyboard, mouse, or touch events.\n     */\n    onAction?: () => void | null;\n\n    /**\n     * Display indicates whether the label, the icons, or all elements should be rendered by the button.\n     */\n    display?: ComponentProps<typeof ButtonLayout>['display'];\n\n    /**\n     * The title is used to provide a tooltip.\n     */\n    title?: string;\n  };\n\nexport const Button = forwardRef(\n  (\n    {\n      variant = 'outlined',\n      isDisabled = false,\n      isRepeat = false,\n      size = 'md',\n      display = 'all',\n      endIcon,\n      startIcon,\n      autofocus,\n      edge,\n      onAction,\n      label = '',\n      accessibleLabel,\n      title,\n      width\n    }: Props,\n    ref?: Ref<HTMLButtonElement>\n  ) => {\n    const labelOnly = (!startIcon && !endIcon) || display === 'label';\n    const content = labelOnly ? (\n      label\n    ) : (\n      <ButtonLayout display={display} startIcon={startIcon} endIcon={endIcon} size={size}>\n        {label}\n      </ButtonLayout>\n    );\n    return (\n      <BaseButton\n        ref={ref as Ref<HTMLButtonElement> & Ref<HTMLAnchorElement> & Ref<HTMLSpanElement>}\n        isDisabled={isDisabled}\n        isRepeat={isRepeat}\n        size={size}\n        width={width}\n        autofocus={autofocus}\n        edge={edge}\n        variant={variant}\n        styling={[labelOnly ? 'default' : 'min']}\n        onAction={onAction}\n        accessibleLabel={accessibleLabel ?? (display === 'icons' ? label : undefined)}\n        title={title ?? (display === 'icons' ? accessibleLabel ?? label : undefined)}\n        aria-label={display === 'icons' ? label : null}>\n        {content}\n      </BaseButton>\n    );\n  }\n);\n"],"names":["compStyles","isNullOrUndefined","value","undefined","ButtonLayout","_a","size","display","styling","props","__rest","labelClass","label","isEmbedded","textStartIcon","startIcon","textEndIcon","endIcon","endIconClass","icon","text","isTwoIcons","endText","startText","forwardRef","_jsx","BaseButton"],"mappings":"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"}

package/amd/Chip-8cd23568.js

@@ -0,0 +1,55 @@
+/* @oracle/oraclejet-preact: 14.0.7 */
+define(['exports', 'preact/jsx-runtime', './hooks/UNSAFE_useActionable', 'module', 'preact/hooks', './utils/UNSAFE_classNames', './hooks/UNSAFE_useTabbableMode', './classNames-027de734'], (function (exports, jsxRuntime, hooks_UNSAFE_useActionable, linaria, hooks, utils_UNSAFE_classNames, hooks_UNSAFE_useTabbableMode, classNames) { 'use strict';
+
+    const cursorandFocusStyle = "cursorandFocusStyle-1bcv7un";
+    const styles = {
+      base: "base-1v81fzo",
+      disabled: "disabled-1r55901",
+      info: "info-q7wuls",
+      infoSubtle: "infoSubtle-rdzcey",
+      infoSubtleLighter: "infoSubtleLighter-cdbxj7",
+      childrenMargins: "childrenMargins-adsjzt"
+    };
+    function Chip({
+      isSelected,
+      isDisabled,
+      accessibleLabel,
+      children,
+      onToggle
+    }) {
+      const handleAction = hooks.useCallback(() => {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle({
+          previousValue: isSelected,
+          value: !isSelected
+        });
+      }, [isSelected, onToggle]);
+      const {
+        actionableProps,
+        isHover,
+        isActive
+      } = hooks_UNSAFE_useActionable.useActionable(handleAction);
+      const variant = isDisabled ? 'disabled' : isSelected || isActive ? 'info' : isHover ? 'infoSubtle' : 'infoSubtleLighter';
+      const classes = classNames.classNames([styles.base, isDisabled ? styles.disabled : `${styles.base} ${styles[variant]} ${cursorandFocusStyle}`, styles.childrenMargins]);
+      const {
+        isTabbable
+      } = hooks_UNSAFE_useTabbableMode.useTabbableMode();
+      return isDisabled ? jsxRuntime.jsx("div", Object.assign({
+        class: classes
+      }, {
+        children: children
+      })) : jsxRuntime.jsx("div", Object.assign({}, actionableProps, {
+        class: classes,
+        tabIndex: isTabbable ? 0 : -1,
+        "aria-label": accessibleLabel,
+        role: "switch",
+        "aria-checked": isSelected ? 'true' : 'false'
+      }, {
+        children: children
+      }));
+    }
+
+    exports.Chip = Chip;
+
+}));
+/*  */
+//# sourceMappingURL=Chip-8cd23568.js.map

package/{cjs/Chip-949fdcd8.js.map → amd/Chip-8cd23568.js.map}

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

package/amd/ClearIcon-27a5c275.js

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