@oracle/oraclejet-preact 15.1.1 → 15.1.2

package/cjs/useAnimation-802f3cdb.js

@@ -0,0 +1,254 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var hooks = require('preact/hooks');
+
+/**
+ * Converts shorthand translate props into transform string representation.
+ *
+ * @param translateX
+ * @param translateY
+ * @param translateZ
+ * @returns Longhand transform string representation.
+ */
+function convertTranslateShortcuts(translateX, translateY, translateZ) {
+    return `${translateX ? ` translateX(${translateX})` : ''}${translateY ? ` translateY(${translateY})` : ''}${translateZ ? ` translateZ(${translateZ})` : ''}`;
+}
+/**
+ * Converts shorthand rotate props into transform string representation.
+ *
+ * @param rotateX
+ * @param rotateY
+ * @param rotateZ
+ * @returns Longhand transform string representation.
+ */
+function convertRotateShortcuts(rotateX, rotateY, rotateZ) {
+    return `${rotateX ? ` rotateX(${rotateX})` : ''}${rotateY ? ` rotateY(${rotateY})` : ''}${rotateZ ? ` rotateZ(${rotateZ})` : ''}`;
+}
+/**
+ * Converts shorthand scale props into transform string representation.
+ *
+ * @param scaleX
+ * @param scaleY
+ * @param scaleZ
+ * @returns Longhand transform string representation.
+ */
+function convertScaleShortcuts(scaleX, scaleY, scaleZ) {
+    return `${scaleX || scaleX === 0 ? ` scaleX(${scaleX})` : ''}${scaleY || scaleY === 0 ? ` scaleY(${scaleY})` : ''}${scaleZ || scaleZ === 0 ? ` scaleZ(${scaleZ})` : ''}`;
+}
+/**
+ * Converts shorthand skew props into transform string representation.
+ *
+ * @param skewX
+ * @param skewY
+ * @returns Longhand transform string representation.
+ */
+function convertSkewShortcuts(skewX, skewY) {
+    return `${skewX ? ` skewX(${skewX})` : ''}${skewY ? ` skewY(${skewY})` : ''}`;
+}
+/**
+ * Converts animation CSS properties into Regular camel cased CSS properties.
+ *
+ * @param useAnimationCssProperties This include transform shorthand props.
+ * @returns Regular camel cased CSS properties.
+ */
+function convertUseAnimationCssPropertiesToRegularCSS(useAnimationCssProperties) {
+    if (!useAnimationCssProperties) {
+        return {};
+    }
+    const { translateX, translateY, translateZ, rotateX, rotateY, rotateZ, scaleX, scaleY, scaleZ, skewX, skewY, ...otherCssProperties } = useAnimationCssProperties;
+    const initialTransformValue = useAnimationCssProperties['transform'] || '';
+    // Now we just add values pased in shortcuts to transform property, do we want to replace it instead?
+    const finalTransformValue = `${initialTransformValue}${convertTranslateShortcuts(translateX, translateY, translateZ)}${convertRotateShortcuts(rotateX, rotateY, rotateZ)}${convertScaleShortcuts(scaleX, scaleY, scaleZ)}${convertSkewShortcuts(skewX, skewY)}`;
+    return {
+        ...otherCssProperties,
+        ...(finalTransformValue && { transform: finalTransformValue })
+    };
+}
+/**
+ * Converts animation CSS properties into WAAPI keyframe properties.
+ * Since keyframes have a difference between offset and cssOffset this collision is avoided here.
+ *
+ * @param useAnimationCssProperties This include transform shorthand props.
+ * @returns WAAPI keyframe
+ */
+function convertUseAnimationCssPropertiesToWAAPIKeyframe(useAnimationCssProperties) {
+    if (!useAnimationCssProperties) {
+        return {};
+    }
+    const { offset, ...otherCssProperties } = convertUseAnimationCssPropertiesToRegularCSS(useAnimationCssProperties);
+    return {
+        ...otherCssProperties,
+        ...(offset && { cssOffset: offset })
+    };
+}
+/**
+ * Stops an animation.
+ *
+ * @param animation Animation that is going to be stopped.
+ * @returns
+ */
+function stopAnimation(animation, node) {
+    // TO DO: rollup-plugin-typescript seems to have an outdated Animation typing. That produces warnings while bulding.
+    // Update picked type to get rid of this casting.
+    // We have to check if the element is visible to commit styles
+    isVisible(node) && animation.commitStyles();
+    animation.cancel();
+}
+/**
+ * Check if an element is visible. Similar to jQuery :visible selector.
+ *
+ * @param element HTML element that is going to be checked for its visibility.
+ * @returns
+ */
+function isVisible(element) {
+    return !!(element?.offsetWidth || element?.offsetHeight || element?.getClientRects().length);
+}
+
+/**
+ * Hook to animate single components.
+ * It allows n number of animation states.
+ * @param animationState
+ * @param animationConfig
+ * @returns
+ */
+function useAnimation(animationState, { animationStates, isAnimatedOnMount = false, onAnimationEnd = () => { } }) {
+    const didMountRef = hooks.useRef(false);
+    const nodeRef = hooks.useRef(null);
+    const currentAnimationState = hooks.useRef();
+    const currentAnimation = hooks.useRef();
+    // We don't allow changing animationStates. Ref to keep "first run" animation states.
+    const animationStatesRef = hooks.useRef(animationStates);
+    hooks.useEffect(() => {
+        // UseEffect just have to be ran when there is a change on animationState
+        if (currentAnimationState.current === animationState)
+            return;
+        // It makes sense to keep track of animation states even if there's no animated element to animate.
+        const previousAnimationState = currentAnimationState.current;
+        currentAnimationState.current = animationState;
+        //Stop an animation here only makes sense if the previous one is running
+        if (currentAnimation.current?.playState === 'running') {
+            stopAnimation(currentAnimation.current, nodeRef.current);
+        }
+        const animatedElement = nodeRef.current;
+        if (!animatedElement) {
+            return;
+        }
+        if (!didMountRef.current) {
+            didMountRef.current = true;
+            if (!isAnimatedOnMount) {
+                return;
+            }
+        }
+        const animationConfig = getConfig(animationStatesRef.current, animatedElement, animationState, previousAnimationState);
+        if (!animationConfig) {
+            return;
+        }
+        currentAnimation.current = startAnimation(animationConfig, animatedElement, animationState, onAnimationEnd);
+    }, [animationState, isAnimatedOnMount, onAnimationEnd]);
+    /**
+     * Used to cancel current animation. When animation is canceled node style goes back to beginning style of canceled animation.
+     * @returns
+     */
+    const cancelCurrentAnimation = hooks.useCallback(() => {
+        const animation = currentAnimation.current;
+        if (animation?.playState === 'running') {
+            animation.cancel();
+        }
+    }, []);
+    /**
+     * Callback ref use to set nodeRef.
+     *
+     * @param node Actual element user set.
+     * @returns
+     */
+    const callbackRef = hooks.useCallback((node) => {
+        if (node != nodeRef.current) {
+            //If for any reason element is unmounted we have to cancel animation(if there is one) and
+            //set currentAnimation as undefined so we don't keep running this animation
+            if (nodeRef.current) {
+                currentAnimation.current?.cancel();
+                currentAnimation.current = undefined;
+            }
+            nodeRef.current = node;
+        }
+    }, []);
+    return { nodeRef: callbackRef, controller: { cancel: cancelCurrentAnimation } };
+}
+/**
+ * Gets animation configuration.
+ *
+ * @param animationStates Set of animation configurations provided by the user.
+ * @param animatedElement Element that is going to be styled.
+ * @param animationState Current animation state.
+ * @param previousAnimationState Previous animation state.
+ * @returns AnimationConfig.
+ */
+function getConfig(animationStates, animatedElement, animationState, previousAnimationState) {
+    const currentAnimationStateConfig = animationStates[`${previousAnimationState} => ${animationState}`] ||
+        animationStates[animationState];
+    const animationConfig = typeof currentAnimationStateConfig === 'function'
+        ? currentAnimationStateConfig(animatedElement)
+        : currentAnimationStateConfig;
+    return animationConfig && Object.keys(animationConfig).length > 0 ? animationConfig : null;
+}
+/**
+ * Starts an animation.
+ *
+ * @param animationConfig Animation configuration used by the animation.
+ * @param animatedElement Element that is going to be styled.
+ * @param animationState Current animation state.
+ * @param onAnimationEnd Callback called once the animation is completed.
+ * @returns Animation.
+ */
+function startAnimation(animationConfig, animatedElement, animationState, onAnimationEnd) {
+    const { delay, duration, easing } = animationConfig.options || {};
+    //Now, if user does not pass a value we override it by hand. We will use theming tools in future.
+    const animationOptions = {
+        delay: delay || 0,
+        duration: duration || 400,
+        easing: easing
+            ? typeof easing === 'string'
+                ? easing
+                : `cubic-bezier(${easing[0]}, ${easing[1]}, ${easing[2]}, ${easing[3]})`
+            : 'ease'
+    };
+    // WAAPI animation method. https://developer.mozilla.org/en-US/docs/Web/API/Element/animate
+    // TO DO: Check for required browser compatibility in case we need pollyfill.
+    // https://github.com/web-animations/web-animations-js/blob/dev/docs/support.md#browser-support
+    const startedAnimation = animatedElement.animate([
+        convertUseAnimationCssPropertiesToWAAPIKeyframe(animationConfig.from),
+        convertUseAnimationCssPropertiesToWAAPIKeyframe(animationConfig.to)
+    ], { ...animationOptions });
+    startedAnimation.onfinish = () => {
+        //We commit styles to have an only source of truth.
+        setEndStyle(animatedElement, true, animationConfig);
+        // On animationEnd is only called when animation actually finished. If an animation is interruped by other one
+        // or animated element is not longer rendered onAnimationEnd will not be called. Do we want to have a callback for those cases?
+        onAnimationEnd?.({ animationState });
+    };
+    return startedAnimation;
+}
+/**
+ * Sets element style.
+ *
+ * @param animatedElement Element that is going to be styled.
+ * @param toAndEndStyle Represents which data will be used to set style. If set to true it uses "to" and "endStyle".
+ * If set to false it uses just "endStyle".
+ * @param animationConfig Style that is going to be set.
+ */
+function setEndStyle(animatedElement, toAndEndStyle, animationConfig) {
+    const endStyle = toAndEndStyle
+        ? {
+            ...convertUseAnimationCssPropertiesToRegularCSS(animationConfig.to),
+            ...convertUseAnimationCssPropertiesToRegularCSS(animationConfig.end)
+        }
+        : convertUseAnimationCssPropertiesToRegularCSS(animationConfig.end);
+    for (const key in endStyle) {
+        //TO DO: Look for a better way to handle types.
+        animatedElement.style[key] = endStyle[key];
+    }
+}
+
+exports.useAnimation = useAnimation;
+//# sourceMappingURL=useAnimation-802f3cdb.js.map

package/cjs/useAnimation-802f3cdb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimation-802f3cdb.js","sources":["../../src/hooks/UNSAFE_useAnimation/animationUtils.ts","../../src/hooks/UNSAFE_useAnimation/useAnimation.ts"],"sourcesContent":["import { StandardProperties } from 'csstype';\n\nexport type UseAnimationCssProperties = StandardProperties & TransformProperties;\n\n// This represents shorthand UseAnimationCssProperties props.\ntype TransformProperties = Partial<\n  Record<\n    | 'translateX'\n    | 'translateY'\n    | 'translateZ'\n    | 'rotateX'\n    | 'rotateY'\n    | 'rotateZ'\n    | 'skewX'\n    | 'skewY',\n    string\n  > &\n    Record<'scaleX' | 'scaleY' | 'scaleZ', string | number>\n>;\n\n/**\n * Converts shorthand translate props into transform string representation.\n *\n * @param translateX\n * @param translateY\n * @param translateZ\n * @returns Longhand transform string representation.\n */\nfunction convertTranslateShortcuts(\n  translateX: TransformProperties['translateX'],\n  translateY: TransformProperties['translateY'],\n  translateZ: TransformProperties['translateZ']\n) {\n  return `${translateX ? ` translateX(${translateX})` : ''}${\n    translateY ? ` translateY(${translateY})` : ''\n  }${translateZ ? ` translateZ(${translateZ})` : ''}`;\n}\n\n/**\n * Converts shorthand rotate props into transform string representation.\n *\n * @param rotateX\n * @param rotateY\n * @param rotateZ\n * @returns Longhand transform string representation.\n */\nfunction convertRotateShortcuts(\n  rotateX?: TransformProperties['rotateX'],\n  rotateY?: TransformProperties['rotateY'],\n  rotateZ?: TransformProperties['rotateZ']\n) {\n  return `${rotateX ? ` rotateX(${rotateX})` : ''}${rotateY ? ` rotateY(${rotateY})` : ''}${\n    rotateZ ? ` rotateZ(${rotateZ})` : ''\n  }`;\n}\n\n/**\n * Converts shorthand scale props into transform string representation.\n *\n * @param scaleX\n * @param scaleY\n * @param scaleZ\n * @returns Longhand transform string representation.\n */\nfunction convertScaleShortcuts(\n  scaleX: TransformProperties['scaleX'],\n  scaleY: TransformProperties['scaleY'],\n  scaleZ: TransformProperties['scaleZ']\n) {\n  return `${scaleX || scaleX === 0 ? ` scaleX(${scaleX})` : ''}${\n    scaleY || scaleY === 0 ? ` scaleY(${scaleY})` : ''\n  }${scaleZ || scaleZ === 0 ? ` scaleZ(${scaleZ})` : ''}`;\n}\n\n/**\n * Converts shorthand skew props into transform string representation.\n *\n * @param skewX\n * @param skewY\n * @returns Longhand transform string representation.\n */\nfunction convertSkewShortcuts(\n  skewX: TransformProperties['skewX'],\n  skewY: TransformProperties['skewY']\n) {\n  return `${skewX ? ` skewX(${skewX})` : ''}${skewY ? ` skewY(${skewY})` : ''}`;\n}\n\n/**\n * Converts animation CSS properties into Regular camel cased CSS properties.\n *\n * @param useAnimationCssProperties This include transform shorthand props.\n * @returns Regular camel cased CSS properties.\n */\nexport function convertUseAnimationCssPropertiesToRegularCSS(\n  useAnimationCssProperties?: UseAnimationCssProperties\n) {\n  if (!useAnimationCssProperties) {\n    return {};\n  }\n  const {\n    translateX,\n    translateY,\n    translateZ,\n    rotateX,\n    rotateY,\n    rotateZ,\n    scaleX,\n    scaleY,\n    scaleZ,\n    skewX,\n    skewY,\n    ...otherCssProperties\n  } = useAnimationCssProperties;\n  const initialTransformValue = useAnimationCssProperties['transform'] || '';\n  // Now we just add values pased in shortcuts to transform property, do we want to replace it instead?\n  const finalTransformValue = `${initialTransformValue}${convertTranslateShortcuts(\n    translateX,\n    translateY,\n    translateZ\n  )}${convertRotateShortcuts(rotateX, rotateY, rotateZ)}${convertScaleShortcuts(\n    scaleX,\n    scaleY,\n    scaleZ\n  )}${convertSkewShortcuts(skewX, skewY)}`;\n  return {\n    ...otherCssProperties,\n    ...(finalTransformValue && { transform: finalTransformValue })\n  };\n}\n\n/**\n * Converts animation CSS properties into WAAPI keyframe properties.\n * Since keyframes have a difference between offset and cssOffset this collision is avoided here.\n *\n * @param useAnimationCssProperties This include transform shorthand props.\n * @returns WAAPI keyframe\n */\nexport function convertUseAnimationCssPropertiesToWAAPIKeyframe(\n  useAnimationCssProperties?: UseAnimationCssProperties\n) {\n  if (!useAnimationCssProperties) {\n    return {};\n  }\n  const { offset, ...otherCssProperties } =\n    convertUseAnimationCssPropertiesToRegularCSS(useAnimationCssProperties);\n  return {\n    ...otherCssProperties,\n    ...(offset && { cssOffset: offset })\n  };\n}\n\n/**\n * Stops an animation.\n *\n * @param animation Animation that is going to be stopped.\n * @returns\n */\nexport function stopAnimation<E extends HTMLElement>(animation: Animation, node: E | null) {\n  // TO DO: rollup-plugin-typescript seems to have an outdated Animation typing. That produces warnings while bulding.\n  // Update picked type to get rid of this casting.\n  // We have to check if the element is visible to commit styles\n  isVisible(node) && (animation as any).commitStyles();\n  animation.cancel();\n}\n\n/**\n * Check if an element is visible. Similar to jQuery :visible selector.\n *\n * @param element HTML element that is going to be checked for its visibility.\n * @returns\n */\nfunction isVisible<E extends HTMLElement>(element: E | null): boolean {\n  return !!(element?.offsetWidth || element?.offsetHeight || element?.getClientRects().length);\n}\n","import { useRef, useEffect, useCallback } from 'preact/hooks';\nimport {\n  convertUseAnimationCssPropertiesToRegularCSS,\n  convertUseAnimationCssPropertiesToWAAPIKeyframe,\n  UseAnimationCssProperties,\n  stopAnimation\n} from './animationUtils';\n\nexport type UseAnimationConfig<V extends string, E extends HTMLElement> = {\n  animationStates: Partial<\n    Record<AnimationStateKey<V>, ((node: E) => AnimationConfig) | AnimationConfig>\n  >;\n  isAnimatedOnMount?: boolean;\n  onAnimationEnd?: ({ animationState }: { animationState: V }) => void;\n};\n\n// Used to filter simple states and ones that include previous state\ntype AnimationStateKey<PA extends string> = ExtractAnimationStates<PA | `${PA} => ${PA}`>;\n\n// Used to get previous and current states and do deeper typing\ntype ExtractAnimationStates<StateString extends string> =\n  StateString extends `${infer From} => ${infer To}`\n    ? KeyWithPreviousAndCurrentState<From, To>\n    : StateString;\n\n// Used to just allow keys with different previous and current states\ntype KeyWithPreviousAndCurrentState<PreviousState extends string, CurrentState extends string> = {\n  b: PreviousState;\n} extends { b: CurrentState }\n  ? never\n  : `${PreviousState} => ${CurrentState}`;\n\ntype AnimationConfig = {\n  from?: UseAnimationCssProperties;\n  to: UseAnimationCssProperties;\n  end?: UseAnimationCssProperties;\n  options?: AnimationOptions;\n};\n\ntype AnimationOptions = {\n  delay?: number;\n  duration?: number;\n  easing?:\n    | 'linear'\n    | 'ease'\n    | 'ease-in'\n    | 'ease-out'\n    | 'ease-in-out'\n    | [number, number, number, number];\n};\n\n// Used to exclude states that include => since this string is used to represent a transition from state to another.\ntype PermittedAnimationState<V extends string> = Exclude<V, `${string}=>${string}`>;\n\n/**\n * Hook to animate single components.\n * It allows n number of animation states.\n * @param animationState\n * @param animationConfig\n * @returns\n */\nexport function useAnimation<V extends string, E extends HTMLElement = HTMLElement>(\n  animationState: PermittedAnimationState<V>,\n  {\n    animationStates,\n    isAnimatedOnMount = false,\n    onAnimationEnd = () => {}\n  }: UseAnimationConfig<PermittedAnimationState<V>, E>\n) {\n  const didMountRef = useRef(false);\n  const nodeRef = useRef<E | null>(null);\n  const currentAnimationState = useRef<PermittedAnimationState<V>>();\n  const currentAnimation = useRef<Animation>();\n\n  // We don't allow changing animationStates. Ref to keep \"first run\" animation states.\n  const animationStatesRef =\n    useRef<UseAnimationConfig<PermittedAnimationState<V>, E>['animationStates']>(animationStates);\n\n  useEffect(() => {\n    // UseEffect just have to be ran when there is a change on animationState\n    if (currentAnimationState.current === animationState) return;\n\n    // It makes sense to keep track of animation states even if there's no animated element to animate.\n    const previousAnimationState = currentAnimationState.current;\n    currentAnimationState.current = animationState;\n\n    //Stop an animation here only makes sense if the previous one is running\n    if (currentAnimation.current?.playState === 'running') {\n      stopAnimation(currentAnimation.current, nodeRef.current);\n    }\n\n    const animatedElement = nodeRef.current;\n    if (!animatedElement) {\n      return;\n    }\n\n    if (!didMountRef.current) {\n      didMountRef.current = true;\n      if (!isAnimatedOnMount) {\n        return;\n      }\n    }\n\n    const animationConfig = getConfig(\n      animationStatesRef.current,\n      animatedElement,\n      animationState,\n      previousAnimationState\n    );\n\n    if (!animationConfig) {\n      return;\n    }\n\n    currentAnimation.current = startAnimation(\n      animationConfig,\n      animatedElement,\n      animationState,\n      onAnimationEnd\n    );\n  }, [animationState, isAnimatedOnMount, onAnimationEnd]);\n\n  /**\n   * Used to cancel current animation. When animation is canceled node style goes back to beginning style of canceled animation.\n   * @returns\n   */\n  const cancelCurrentAnimation = useCallback(() => {\n    const animation = currentAnimation.current;\n    if (animation?.playState === 'running') {\n      animation.cancel();\n    }\n  }, []);\n\n  /**\n   * Callback ref use to set nodeRef.\n   *\n   * @param node Actual element user set.\n   * @returns\n   */\n  const callbackRef = useCallback((node: E | null) => {\n    if (node != nodeRef.current) {\n      //If for any reason element is unmounted we have to cancel animation(if there is one) and\n      //set currentAnimation as undefined so we don't keep running this animation\n      if (nodeRef.current) {\n        currentAnimation.current?.cancel();\n        currentAnimation.current = undefined;\n      }\n      nodeRef.current = node;\n    }\n  }, []);\n\n  return { nodeRef: callbackRef, controller: { cancel: cancelCurrentAnimation } };\n}\n\n/**\n * Gets animation configuration.\n *\n * @param animationStates Set of animation configurations provided by the user.\n * @param animatedElement Element that is going to be styled.\n * @param animationState Current animation state.\n * @param previousAnimationState Previous animation state.\n * @returns AnimationConfig.\n */\nfunction getConfig<V extends string, E extends HTMLElement>(\n  animationStates: UseAnimationConfig<PermittedAnimationState<V>, E>['animationStates'],\n  animatedElement: E,\n  animationState: PermittedAnimationState<V>,\n  previousAnimationState?: PermittedAnimationState<V>\n) {\n  const currentAnimationStateConfig =\n    animationStates[\n      `${previousAnimationState} => ${animationState}` as keyof UseAnimationConfig<\n        PermittedAnimationState<V>,\n        E\n      >['animationStates']\n    ] ||\n    animationStates[\n      animationState as keyof UseAnimationConfig<PermittedAnimationState<V>, E>['animationStates']\n    ];\n\n  const animationConfig =\n    typeof currentAnimationStateConfig === 'function'\n      ? currentAnimationStateConfig(animatedElement)\n      : (currentAnimationStateConfig as AnimationConfig);\n\n  return animationConfig && Object.keys(animationConfig).length > 0 ? animationConfig : null;\n}\n\n/**\n * Starts an animation.\n *\n * @param animationConfig Animation configuration used by the animation.\n * @param animatedElement Element that is going to be styled.\n * @param animationState Current animation state.\n * @param onAnimationEnd Callback called once the animation is completed.\n * @returns Animation.\n */\nfunction startAnimation<V extends string, E extends HTMLElement>(\n  animationConfig: AnimationConfig,\n  animatedElement: E,\n  animationState: PermittedAnimationState<V>,\n  onAnimationEnd: UseAnimationConfig<PermittedAnimationState<V>, E>['onAnimationEnd']\n) {\n  const { delay, duration, easing } = animationConfig.options || {};\n\n  //Now, if user does not pass a value we override it by hand. We will use theming tools in future.\n  const animationOptions = {\n    delay: delay || 0,\n    duration: duration || 400,\n    easing: easing\n      ? typeof easing === 'string'\n        ? easing\n        : `cubic-bezier(${easing[0]}, ${easing[1]}, ${easing[2]}, ${easing[3]})`\n      : 'ease'\n  };\n\n  // WAAPI animation method. https://developer.mozilla.org/en-US/docs/Web/API/Element/animate\n  // TO DO: Check for required browser compatibility in case we need pollyfill.\n  // https://github.com/web-animations/web-animations-js/blob/dev/docs/support.md#browser-support\n  const startedAnimation = animatedElement.animate(\n    [\n      convertUseAnimationCssPropertiesToWAAPIKeyframe(animationConfig.from),\n      convertUseAnimationCssPropertiesToWAAPIKeyframe(animationConfig.to)\n    ],\n    { ...animationOptions }\n  );\n\n  startedAnimation.onfinish = () => {\n    //We commit styles to have an only source of truth.\n    setEndStyle(animatedElement, true, animationConfig);\n    // On animationEnd is only called when animation actually finished. If an animation is interruped by other one\n    // or animated element is not longer rendered onAnimationEnd will not be called. Do we want to have a callback for those cases?\n    onAnimationEnd?.({ animationState });\n  };\n\n  return startedAnimation;\n}\n\n/**\n * Sets element style.\n *\n * @param animatedElement Element that is going to be styled.\n * @param toAndEndStyle Represents which data will be used to set style. If set to true it uses \"to\" and \"endStyle\".\n * If set to false it uses just \"endStyle\".\n * @param animationConfig Style that is going to be set.\n */\nfunction setEndStyle<E extends HTMLElement>(\n  animatedElement: E,\n  toAndEndStyle: boolean,\n  animationConfig: AnimationConfig\n) {\n  const endStyle = toAndEndStyle\n    ? {\n        ...convertUseAnimationCssPropertiesToRegularCSS(animationConfig.to),\n        ...convertUseAnimationCssPropertiesToRegularCSS(animationConfig.end)\n      }\n    : convertUseAnimationCssPropertiesToRegularCSS(animationConfig.end);\n  for (const key in endStyle) {\n    //TO DO: Look for a better way to handle types.\n    (<any>animatedElement.style)[key] = endStyle[key as keyof typeof endStyle];\n  }\n}\n"],"names":["useRef","useEffect","useCallback"],"mappings":"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"}

package/cjs/useFocusWithin-3c76895a.js

@@ -0,0 +1,49 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var hooks = require('preact/hooks');
+
+function useFocusWithin({ isDisabled, onBlurWithin, onFocusWithin } = {}) {
+    const [isFocused, setIsFocused] = hooks.useState(false);
+    // Maintain a ref for whether we're focused so that we can update it synchronously and check
+    // it in the listeners.  It's possible for an element to receive and lose focus before
+    // the next render happens, in which case the isFocused state hasn't been updated yet for
+    // the focusin event.  The focusout listener would not do anything based on that stale state,
+    // which would result in the isFocused state incorrectly remaining true.
+    // We still need the isFocused state because that state change will trigger a rerender,
+    // whereas updating the ref will not.
+    const isFocusedRef = hooks.useRef(false);
+    const onfocusin = hooks.useCallback((event) => {
+        if (!isFocusedRef.current) {
+            onFocusWithin?.(event);
+            setIsFocused(true);
+            isFocusedRef.current = true;
+        }
+    }, [onFocusWithin]);
+    const onfocusout = hooks.useCallback((event) => {
+        // Trigger focus event changes only when the focus goes outside of the current
+        // target. Ignore focus changes within the current target
+        if (isFocusedRef.current &&
+            (event.relatedTarget == null ||
+                !event.currentTarget.contains(event.relatedTarget))) {
+            onBlurWithin?.(event);
+            setIsFocused(false);
+            isFocusedRef.current = false;
+        }
+    }, [onBlurWithin]);
+    return isDisabled
+        ? {
+            isFocused: false,
+            focusProps: {}
+        }
+        : {
+            isFocused,
+            focusProps: {
+                onfocusin,
+                onfocusout
+            }
+        };
+}
+
+exports.useFocusWithin = useFocusWithin;
+//# sourceMappingURL=useFocusWithin-3c76895a.js.map

package/cjs/useFocusWithin-3c76895a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusWithin-3c76895a.js","sources":["../../src/hooks/UNSAFE_useFocusWithin/useFocusWithin.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'preact/hooks';\n\ntype FocusEvents = {\n  onBlurWithin?: (e: FocusEvent) => void;\n  onFocusWithin?: (e: FocusEvent) => void;\n};\n\ntype UseFocusWithinProps = FocusEvents & {\n  isDisabled?: boolean;\n};\n\nexport function useFocusWithin({\n  isDisabled,\n  onBlurWithin,\n  onFocusWithin\n}: UseFocusWithinProps = {}) {\n  const [isFocused, setIsFocused] = useState(false);\n  // Maintain a ref for whether we're focused so that we can update it synchronously and check\n  // it in the listeners.  It's possible for an element to receive and lose focus before\n  // the next render happens, in which case the isFocused state hasn't been updated yet for\n  // the focusin event.  The focusout listener would not do anything based on that stale state,\n  // which would result in the isFocused state incorrectly remaining true.\n  // We still need the isFocused state because that state change will trigger a rerender,\n  // whereas updating the ref will not.\n  const isFocusedRef = useRef(false);\n  const onfocusin = useCallback(\n    (event: FocusEvent) => {\n      if (!isFocusedRef.current) {\n        onFocusWithin?.(event);\n        setIsFocused(true);\n        isFocusedRef.current = true;\n      }\n    },\n    [onFocusWithin]\n  );\n  const onfocusout = useCallback(\n    (event: FocusEvent) => {\n      // Trigger focus event changes only when the focus goes outside of the current\n      // target. Ignore focus changes within the current target\n      if (\n        isFocusedRef.current &&\n        (event.relatedTarget == null ||\n          !(event.currentTarget as HTMLElement).contains(event.relatedTarget as HTMLElement))\n      ) {\n        onBlurWithin?.(event);\n        setIsFocused(false);\n        isFocusedRef.current = false;\n      }\n    },\n    [onBlurWithin]\n  );\n\n  return isDisabled\n    ? {\n        isFocused: false,\n        focusProps: {}\n      }\n    : {\n        isFocused,\n        focusProps: {\n          onfocusin,\n          onfocusout\n        }\n      };\n}\n"],"names":["useState","useRef","useCallback"],"mappings":";;;;;AAWM,SAAU,cAAc,CAAC,EAC7B,UAAU,EACV,YAAY,EACZ,aAAa,EAAA,GACU,EAAE,EAAA;IACzB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,CAAC;;;;;;;;AAQlD,IAAA,MAAM,YAAY,GAAGC,YAAM,CAAC,KAAK,CAAC,CAAC;AACnC,IAAA,MAAM,SAAS,GAAGC,iBAAW,CAC3B,CAAC,KAAiB,KAAI;AACpB,QAAA,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;AACzB,YAAA,aAAa,GAAG,KAAK,CAAC,CAAC;YACvB,YAAY,CAAC,IAAI,CAAC,CAAC;AACnB,YAAA,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;AAC7B,SAAA;AACH,KAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;AACF,IAAA,MAAM,UAAU,GAAGA,iBAAW,CAC5B,CAAC,KAAiB,KAAI;;;QAGpB,IACE,YAAY,CAAC,OAAO;AACpB,aAAC,KAAK,CAAC,aAAa,IAAI,IAAI;gBAC1B,CAAE,KAAK,CAAC,aAA6B,CAAC,QAAQ,CAAC,KAAK,CAAC,aAA4B,CAAC,CAAC,EACrF;AACA,YAAA,YAAY,GAAG,KAAK,CAAC,CAAC;YACtB,YAAY,CAAC,KAAK,CAAC,CAAC;AACpB,YAAA,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;AAC9B,SAAA;AACH,KAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;AAEF,IAAA,OAAO,UAAU;AACf,UAAE;AACE,YAAA,SAAS,EAAE,KAAK;AAChB,YAAA,UAAU,EAAE,EAAE;AACf,SAAA;AACH,UAAE;YACE,SAAS;AACT,YAAA,UAAU,EAAE;gBACV,SAAS;gBACT,UAAU;AACX,aAAA;SACF,CAAC;AACR;;;;"}

package/cjs/useModal-2ac2ced5.js

@@ -0,0 +1,46 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var compat = require('preact/compat');
+
+/**
+ *
+ * @param props
+ */
+const useModal = (props) => {
+    const { isOpen, onBackdropClick: onBackdropClickProp } = props;
+    const backdropRef = compat.useRef(null);
+    const mouseDownTarget = compat.useRef(null);
+    const onMouseDown = compat.useCallback((event) => {
+        if (backdropRef.current === event.target) {
+            mouseDownTarget.current = event.target;
+        }
+    }, []);
+    const onBackdropClick = compat.useCallback((event) => {
+        if (backdropRef.current === event.target) {
+            event.stopPropagation();
+            // event should originate on the same target
+            if (mouseDownTarget.current === event.target) {
+                onBackdropClickProp?.();
+            }
+        }
+    }, [onBackdropClickProp]);
+    compat.useEffect(() => {
+        const modal = backdropRef.current;
+        if (modal) {
+            modal.addEventListener('mousedown', onMouseDown);
+            modal.addEventListener('click', onBackdropClick);
+            return () => {
+                modal.removeEventListener('mousedown', onMouseDown);
+                modal.removeEventListener('click', onBackdropClick);
+            };
+        }
+        return () => { };
+    }, [isOpen, onMouseDown, onBackdropClick]);
+    return {
+        backdropRef
+    };
+};
+
+exports.useModal = useModal;
+//# sourceMappingURL=useModal-2ac2ced5.js.map

package/cjs/useModal-2ac2ced5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal-2ac2ced5.js","sources":["../../src/UNSAFE_Modal/hooks/useModal.ts"],"sourcesContent":["import { useRef, useCallback, useEffect } from 'preact/compat';\n\nexport type UseModalProps = Readonly<{\n  /**\n   * Determines whether the Modal is open.\n   */\n  isOpen: boolean;\n  /**\n   * On backdrop click callback.\n   */\n  onBackdropClick?: () => void;\n}>;\n\n/**\n *\n * @param props\n */\nexport const useModal = (props: UseModalProps) => {\n  const { isOpen, onBackdropClick: onBackdropClickProp } = props;\n\n  const backdropRef = useRef<HTMLDivElement>(null);\n\n  const mouseDownTarget = useRef<EventTarget | null>(null);\n\n  const onMouseDown = useCallback((event: MouseEvent) => {\n    if (backdropRef.current === event.target) {\n      mouseDownTarget.current = event.target;\n    }\n  }, []);\n\n  const onBackdropClick = useCallback(\n    (event: MouseEvent) => {\n      if (backdropRef.current === event.target) {\n        event.stopPropagation();\n        // event should originate on the same target\n        if (mouseDownTarget.current === event.target) {\n          onBackdropClickProp?.();\n        }\n      }\n    },\n    [onBackdropClickProp]\n  );\n\n  useEffect(() => {\n    const modal = backdropRef.current;\n\n    if (modal) {\n      modal.addEventListener('mousedown', onMouseDown);\n      modal.addEventListener('click', onBackdropClick);\n\n      return () => {\n        modal.removeEventListener('mousedown', onMouseDown);\n        modal.removeEventListener('click', onBackdropClick);\n      };\n    }\n\n    return () => {};\n  }, [isOpen, onMouseDown, onBackdropClick]);\n\n  return {\n    backdropRef\n  };\n};\n\nexport default useModal;\n"],"names":["useRef","useCallback","useEffect"],"mappings":";;;;;AAaA;;;AAGG;AACU,MAAA,QAAQ,GAAG,CAAC,KAAoB,KAAI;IAC/C,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC;AAE/D,IAAA,MAAM,WAAW,GAAGA,aAAM,CAAiB,IAAI,CAAC,CAAC;AAEjD,IAAA,MAAM,eAAe,GAAGA,aAAM,CAAqB,IAAI,CAAC,CAAC;AAEzD,IAAA,MAAM,WAAW,GAAGC,kBAAW,CAAC,CAAC,KAAiB,KAAI;AACpD,QAAA,IAAI,WAAW,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,EAAE;AACxC,YAAA,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;AACxC,SAAA;KACF,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,eAAe,GAAGA,kBAAW,CACjC,CAAC,KAAiB,KAAI;AACpB,QAAA,IAAI,WAAW,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,EAAE;YACxC,KAAK,CAAC,eAAe,EAAE,CAAC;;AAExB,YAAA,IAAI,eAAe,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,EAAE;gBAC5C,mBAAmB,IAAI,CAAC;AACzB,aAAA;AACF,SAAA;AACH,KAAC,EACD,CAAC,mBAAmB,CAAC,CACtB,CAAC;IAEFC,gBAAS,CAAC,MAAK;AACb,QAAA,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC;AAElC,QAAA,IAAI,KAAK,EAAE;AACT,YAAA,KAAK,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AACjD,YAAA,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;AAEjD,YAAA,OAAO,MAAK;AACV,gBAAA,KAAK,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AACpD,gBAAA,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;AACtD,aAAC,CAAC;AACH,SAAA;AAED,QAAA,OAAO,MAAO,GAAC,CAAC;KACjB,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC;IAE3C,OAAO;QACL,WAAW;KACZ,CAAC;AACJ;;;;"}

package/cjs/useSingleSelection-4d4d555e.js

@@ -0,0 +1,42 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var hooks = require('preact/hooks');
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+function useSingleSelection(keyExtractor, selected, onChange) {
+    const onClick = hooks.useCallback((event) => {
+        handleSelect(event, keyExtractor, selected, onChange);
+    }, [keyExtractor, selected, onChange]);
+    const onKeyUp = hooks.useCallback((event) => {
+        if (event.key === 'Enter') {
+            handleSelect(event, keyExtractor, selected, onChange);
+        }
+    }, [keyExtractor, selected, onChange]);
+    const selectionProps = onChange ? { onClick, onKeyDown, onKeyUp } : {};
+    return { selectionProps };
+}
+// prevent default (propagation) for keyDown to prevent arrow keys from scrolling the container
+const onKeyDown = (event) => {
+    if (event.key === 'Enter') {
+        event.preventDefault();
+    }
+};
+const handleSelect = (event, keyExtractor, selected, onChange) => {
+    const itemKey = keyExtractor(event.target);
+    if (onChange && itemKey && selected !== itemKey) {
+        onChange({ value: itemKey });
+        if (event.type === 'click') {
+            event.stopPropagation();
+        }
+    }
+};
+
+exports.useSingleSelection = useSingleSelection;
+//# sourceMappingURL=useSingleSelection-4d4d555e.js.map

package/cjs/useSingleSelection-4d4d555e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSingleSelection-4d4d555e.js","sources":["../../src/hooks/PRIVATE_useSingleSelection/useSingleSelection.ts"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { useCallback } from 'preact/hooks';\nimport { SingleSelectionDetail } from '../../UNSAFE_Collection';\n\nexport function useSingleSelection<K>(\n  keyExtractor: (element: HTMLElement) => K | null,\n  selected?: K,\n  onChange?: (detail: SingleSelectionDetail<K>) => void\n) {\n  const onClick = useCallback(\n    (event: MouseEvent) => {\n      handleSelect(event, keyExtractor, selected, onChange);\n    },\n    [keyExtractor, selected, onChange]\n  );\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        handleSelect(event, keyExtractor, selected, onChange);\n      }\n    },\n    [keyExtractor, selected, onChange]\n  );\n\n  const selectionProps = onChange ? { onClick, onKeyDown, onKeyUp } : {};\n  return { selectionProps };\n}\n\n// prevent default (propagation) for keyDown to prevent arrow keys from scrolling the container\nconst onKeyDown = (event: KeyboardEvent) => {\n  if (event.key === 'Enter') {\n    event.preventDefault();\n  }\n};\n\nconst handleSelect = <K>(\n  event: Event,\n  keyExtractor: (element: HTMLElement) => K | null,\n  selected?: K,\n  onChange?: (detail: SingleSelectionDetail<K>) => void\n) => {\n  const itemKey = keyExtractor(event.target as HTMLElement);\n  if (onChange && itemKey && selected !== itemKey) {\n    onChange({ value: itemKey });\n    if (event.type === 'click') {\n      event.stopPropagation();\n    }\n  }\n};\n"],"names":["useCallback"],"mappings":";;;;;AAAA;;;;;;AAMG;SAIa,kBAAkB,CAChC,YAAgD,EAChD,QAAY,EACZ,QAAqD,EAAA;AAErD,IAAA,MAAM,OAAO,GAAGA,iBAAW,CACzB,CAAC,KAAiB,KAAI;QACpB,YAAY,CAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;KACvD,EACD,CAAC,YAAY,EAAE,QAAQ,EAAE,QAAQ,CAAC,CACnC,CAAC;AAEF,IAAA,MAAM,OAAO,GAAGA,iBAAW,CACzB,CAAC,KAAoB,KAAI;AACvB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,YAAY,CAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;AACvD,SAAA;KACF,EACD,CAAC,YAAY,EAAE,QAAQ,EAAE,QAAQ,CAAC,CACnC,CAAC;AAEF,IAAA,MAAM,cAAc,GAAG,QAAQ,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;IACvE,OAAO,EAAE,cAAc,EAAE,CAAC;AAC5B,CAAC;AAED;AACA,MAAM,SAAS,GAAG,CAAC,KAAoB,KAAI;AACzC,IAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;QACzB,KAAK,CAAC,cAAc,EAAE,CAAC;AACxB,KAAA;AACH,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,KAAY,EACZ,YAAgD,EAChD,QAAY,EACZ,QAAqD,KACnD;IACF,MAAM,OAAO,GAAG,YAAY,CAAC,KAAK,CAAC,MAAqB,CAAC,CAAC;AAC1D,IAAA,IAAI,QAAQ,IAAI,OAAO,IAAI,QAAQ,KAAK,OAAO,EAAE;AAC/C,QAAA,QAAQ,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;AAC7B,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YAC1B,KAAK,CAAC,eAAe,EAAE,CAAC;AACzB,SAAA;AACF,KAAA;AACH,CAAC;;;;"}

package/cjs/useThemeInterpolations-ee4e7934.js

@@ -0,0 +1,33 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var hooks_UNSAFE_useColorScheme = require('./hooks/UNSAFE_useColorScheme.js');
+var hooks_UNSAFE_useScale = require('./hooks/UNSAFE_useScale.js');
+var utils_UNSAFE_interpolations_theme = require('./utils/UNSAFE_interpolations/theme.js');
+var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
+var UNSAFE_Environment = require('./index-c3ee789d.js');
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+// This hook encasulates the logic required to determine which theme style classes are needed
+// for the current environment context's colorScheme and scale value.  This would be used when
+// rendering dom outside of the current dom tree, but desire to match the colorScheme and scale
+// of the original dom tree.
+function useThemeInterpolations() {
+    const colorScheme = hooks_UNSAFE_useColorScheme.useColorScheme();
+    const currentScale = hooks_UNSAFE_useScale.useScale();
+    // We don't want to interpolate the default environment values for scacle.  Those should get picked up by default.
+    // This fixes an issue for core pack components that utilize the Layer component, when in a legacy cookbook page.
+    const scale = currentScale !== UNSAFE_Environment.DefaultEnvironment.scale ? currentScale : undefined;
+    const interpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations([...Object.values(utils_UNSAFE_interpolations_theme.themeInterpolations)]);
+    const { class: classes } = interpolations({ colorScheme, scale });
+    return classes;
+}
+
+exports.useThemeInterpolations = useThemeInterpolations;
+//# sourceMappingURL=useThemeInterpolations-ee4e7934.js.map

package/cjs/useThemeInterpolations-ee4e7934.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeInterpolations-ee4e7934.js","sources":["../../src/hooks/UNSAFE_useThemeInterpolations/useThemeInterpolations.ts"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { useColorScheme } from '../UNSAFE_useColorScheme';\nimport { useScale } from '../UNSAFE_useScale';\nimport { themeInterpolations } from '../../utils/UNSAFE_interpolations/theme';\nimport type { ThemeProps } from '../../utils/UNSAFE_interpolations/theme';\nimport { mergeInterpolations } from '../../utils/UNSAFE_mergeInterpolations';\nimport { DefaultEnvironment } from '../../UNSAFE_Environment/EnvironmentContext';\n\n// This hook encasulates the logic required to determine which theme style classes are needed\n// for the current environment context's colorScheme and scale value.  This would be used when\n// rendering dom outside of the current dom tree, but desire to match the colorScheme and scale\n// of the original dom tree.\nexport function useThemeInterpolations() {\n  const colorScheme = useColorScheme();\n  const currentScale = useScale();\n  // We don't want to interpolate the default environment values for scacle.  Those should get picked up by default.\n  // This fixes an issue for core pack components that utilize the Layer component, when in a legacy cookbook page.\n  const scale = currentScale !== DefaultEnvironment.scale ? currentScale : undefined;\n\n  const interpolations = mergeInterpolations<ThemeProps>([...Object.values(themeInterpolations)]);\n  const { class: classes } = interpolations({ colorScheme, scale });\n  return classes;\n}\n"],"names":["useColorScheme","useScale","DefaultEnvironment","mergeInterpolations","themeInterpolations"],"mappings":";;;;;;;;;AAAA;;;;;;AAMG;AAQH;AACA;AACA;AACA;SACgB,sBAAsB,GAAA;AACpC,IAAA,MAAM,WAAW,GAAGA,0CAAc,EAAE,CAAC;AACrC,IAAA,MAAM,YAAY,GAAGC,8BAAQ,EAAE,CAAC;;;AAGhC,IAAA,MAAM,KAAK,GAAG,YAAY,KAAKC,qCAAkB,CAAC,KAAK,GAAG,YAAY,GAAG,SAAS,CAAC;AAEnF,IAAA,MAAM,cAAc,GAAGC,oDAAmB,CAAa,CAAC,GAAG,MAAM,CAAC,MAAM,CAACC,qDAAmB,CAAC,CAAC,CAAC,CAAC;AAChG,IAAA,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,cAAc,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;AAClE,IAAA,OAAO,OAAO,CAAC;AACjB;;;;"}

package/cjs/utils/PRIVATE_clientHints.js

@@ -1,9 +1,9 @@
-/* @oracle/oraclejet-preact: 15.1.1 */
+/* @oracle/oraclejet-preact: 15.1.2 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var clientHints = require('../clientHints-098ca7ba.js');
+var clientHints = require('../clientHints-b9e7be1e.js');
 
 
 

package/cjs/utils/PRIVATE_collectionUtils.js

@@ -1,11 +1,11 @@
-/* @oracle/oraclejet-preact: 15.1.1 */
+/* @oracle/oraclejet-preact: 15.1.2 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var utils_UNSAFE_keys = require('./UNSAFE_keys.js');
 require('./PRIVATE_clientHints.js');
-var clientHints = require('../clientHints-098ca7ba.js');
+var clientHints = require('../clientHints-b9e7be1e.js');
 
 /**
  * Returns the key from the item element

package/cjs/utils/PRIVATE_dvtTestUtils.js

@@ -1,4 +1,4 @@
-/* @oracle/oraclejet-preact: 15.1.1 */
+/* @oracle/oraclejet-preact: 15.1.2 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -6,7 +6,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('preact/jsx-runtime');
 var preact = require('@testing-library/preact');
 var utils_UNSAFE_matchTranslationBundle = require('./UNSAFE_matchTranslationBundle.js');
-var UNSAFE_Environment = require('../index-e3bf143b.js');
+var UNSAFE_Environment = require('../index-c3ee789d.js');
 var hooks_UNSAFE_useTabbableMode = require('../hooks/UNSAFE_useTabbableMode.js');
 require('preact');
 require('../Common.js');

package/cjs/utils/PRIVATE_floatingUtils.js

@@ -1,4 +1,4 @@
-/* @oracle/oraclejet-preact: 15.1.1 */
+/* @oracle/oraclejet-preact: 15.1.2 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/utils/PRIVATE_keyboardUtils.js

@@ -1,10 +1,10 @@
-/* @oracle/oraclejet-preact: 15.1.1 */
+/* @oracle/oraclejet-preact: 15.1.2 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('./PRIVATE_clientHints.js');
-var clientHints$1 = require('../clientHints-098ca7ba.js');
+var clientHints$1 = require('../clientHints-b9e7be1e.js');
 
 /**
  * @license

package/cjs/utils/PRIVATE_meterUtils.js

@@ -1,4 +1,4 @@
-/* @oracle/oraclejet-preact: 15.1.1 */
+/* @oracle/oraclejet-preact: 15.1.2 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/utils/PRIVATE_refUtils.js

@@ -1,4 +1,4 @@
-/* @oracle/oraclejet-preact: 15.1.1 */
+/* @oracle/oraclejet-preact: 15.1.2 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/utils/PRIVATE_tabbableUtils.js

@@ -1,12 +1,12 @@
-/* @oracle/oraclejet-preact: 15.1.1 */
+/* @oracle/oraclejet-preact: 15.1.2 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _curry1$2 = require('../_curry1-60c5742a.js');
-var _curry2$3 = require('../_curry2-380766c2.js');
-var _arity$2 = require('../_arity-bd090664.js');
-var _curry3$2 = require('../_curry3-838df3c3.js');
+var _curry1$2 = require('../_curry1-6e9511bf.js');
+var _curry2$3 = require('../_curry2-53a902bf.js');
+var _arity$2 = require('../_arity-353457ba.js');
+var _curry3$2 = require('../_curry3-ad2313fd.js');
 
 function _isString$2(x) {
   return Object.prototype.toString.call(x) === '[object String]';

package/cjs/utils/PRIVATE_timer.js

@@ -1,4 +1,4 @@
-/* @oracle/oraclejet-preact: 15.1.1 */
+/* @oracle/oraclejet-preact: 15.1.2 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/utils/PRIVATE_visColorUtils.js

@@ -1,9 +1,9 @@
-/* @oracle/oraclejet-preact: 15.1.1 */
+/* @oracle/oraclejet-preact: 15.1.2 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ColorUtils = require('../ColorUtils-d1e00c59.js');
+var ColorUtils = require('../ColorUtils-5f0fa06c.js');
 
 /**
  * @license

package/cjs/utils/PRIVATE_visLayoutUtils.js

@@ -1,9 +1,9 @@
-/* @oracle/oraclejet-preact: 15.1.1 */
+/* @oracle/oraclejet-preact: 15.1.2 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LayoutUtils = require('../LayoutUtils-ba2f23a5.js');
+var LayoutUtils = require('../LayoutUtils-5e8b62d4.js');
 
 /**
  * @license