@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/dist/esm/ui-shell/renderUiShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderUiShell.js","names":["ErrorBoundary","bufferLatest","createMessageBus","UiShell","renderReactInWebComponent","uiShellDataAttribute","jsx","_jsx","optionalComponentSlotNames","banners","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appBackgroundColor","appBackgroundContrastMode","appContainerScrollingMode","appRootElement","explicitAppRootElement","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","sideNavBackgroundColor","topNavBackgroundColor","uiShellRootElement","document","createElement","setAttribute","publish","publishPropChanges","subscribe","subscribeToPropChanges","publishSubscriptionCreated","subscribeToReactAppSubscribed","publishAfterReactAppReadyForProps","slottedElements","Object","fromEntries","entries","map","optionalComponentKey","slotName","element","appContainerElement","appendChild","webComponentChildren","values","appComponent","uiShellElement","getReactComponent","reactRootElements","fallback","children","onSubscriptionCreated","optionalComponents","name","stylesRootElement","webComponentRootElement","setComponentProps"],"sources":["../../../src/ui-shell/renderUiShell.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { bufferLatest } from \"./bufferLatest.js\";\nimport { createMessageBus } from \"./createMessageBus.js\";\nimport { UiShell, UiShellProps } from \"./UiShell.js\";\nimport { renderReactInWebComponent } from \"../web-component/renderReactInWebComponent.js\";\nimport { type UiShellNavComponentProps } from \"./UiShellContent.js\";\nimport { uiShellDataAttribute } from \"./useHasUiShell.js\";\n\nexport const optionalComponentSlotNames: Record<\n  keyof Required<UiShellProps>[\"optionalComponents\"],\n  string\n> = {\n  banners: \"banners\",\n  sideNavFooter: \"side-nav-footer\",\n  topNavLeftSide: \"top-nav-left-side\",\n  topNavRightSide: \"top-nav-right-side\",\n};\n\n/**\n * This function renders UI Shell in a web component.\n * This function is agnostic to the UI framework for your app is using. Your application can be another web component, a React app, or even vanilla HTML.\n *\n * **All styles are self-contained.** Even though your application visually renders as children of the web component, its within the global `document` scope, not the web component's `ShadowRoot`. That means any global styles will not affect UI Shell but will affect your application.\n *\n * It places your app's root element in a web component <slot> and ensures it remains rendered in the event of a UI Shell error.\n * It also provides you with other elements fitted to slots in the web component. **In React, you can portal to these components.**\n */\nexport const renderUiShell = ({\n  appBackgroundColor,\n  appBackgroundContrastMode,\n  appContainerScrollingMode,\n  appRootElement: explicitAppRootElement,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  sideNavBackgroundColor,\n  topNavBackgroundColor,\n  uiShellRootElement,\n}: {\n  /**\n   * HTML element used as the root for a React app.\n   */\n  appRootElement?: HTMLDivElement;\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, reporting priority 0 issues, and recovering UI Shell when errors occur.\n   */\n  onError?: () => void;\n  /**\n   * HTML element used as the root for UI Shell.\n   */\n  uiShellRootElement: HTMLElement;\n} & Pick<\n  UiShellProps,\n  | \"appBackgroundColor\"\n  | \"appBackgroundContrastMode\"\n  | \"appContainerScrollingMode\"\n  | \"hasStandardAppContentPadding\"\n  | \"initialVisibleSections\"\n  | \"sideNavBackgroundColor\"\n  | \"topNavBackgroundColor\"\n>) => {\n  const appRootElement =\n    explicitAppRootElement || document.createElement(\"div\");\n\n  // Add this attribute so `PageTemplate` and potentially other components will know if they're in UI Shell with special padding already available.\n  uiShellRootElement.setAttribute(uiShellDataAttribute, \"\");\n\n  const { publish: publishPropChanges, subscribe: subscribeToPropChanges } =\n    createMessageBus<SetStateAction<UiShellNavComponentProps>>();\n\n  const {\n    publish: publishSubscriptionCreated,\n    subscribe: subscribeToReactAppSubscribed,\n  } = createMessageBus();\n\n  const publishAfterReactAppReadyForProps = bufferLatest({\n    publish: publishPropChanges,\n    subscribe: subscribeToReactAppSubscribed,\n  });\n\n  const slottedElements = Object.fromEntries(\n    Object.entries(optionalComponentSlotNames).map(\n      ([optionalComponentKey, slotName]) => {\n        const element = document.createElement(\"div\");\n\n        element.setAttribute(\"slot\", slotName);\n\n        return [optionalComponentKey, element];\n      },\n    ),\n  ) as Record<\n    keyof Required<UiShellProps>[\"optionalComponents\"],\n    HTMLDivElement\n  >;\n\n  const appContainerElement = document.createElement(\"div\");\n  appContainerElement.appendChild(appRootElement);\n\n  const webComponentChildren = Object.values(slottedElements);\n\n  const appComponent = <slot />;\n\n  const uiShellElement = renderReactInWebComponent({\n    getReactComponent: (reactRootElements) => (\n      <ErrorBoundary fallback={appComponent} onError={onError}>\n        <UiShell\n          appBackgroundColor={appBackgroundColor}\n          appBackgroundContrastMode={appBackgroundContrastMode}\n          appComponent={appComponent}\n          appContainerElement={appContainerElement}\n          appContainerScrollingMode={appContainerScrollingMode}\n          appRootElement={reactRootElements.appRootElement}\n          hasStandardAppContentPadding={hasStandardAppContentPadding}\n          initialVisibleSections={initialVisibleSections}\n          onError={onError}\n          onSubscriptionCreated={publishSubscriptionCreated}\n          // `optionalComponents` doesn't need to be memoized because gets passed in once.\n          optionalComponents={Object.fromEntries(\n            Object.entries(optionalComponentSlotNames).map(\n              ([optionalComponentKey, slotName]) => [\n                optionalComponentKey,\n                <slot name={slotName} />,\n              ],\n            ),\n          )}\n          sideNavBackgroundColor={sideNavBackgroundColor}\n          stylesRootElement={reactRootElements.stylesRootElement}\n          subscribeToPropChanges={subscribeToPropChanges}\n          topNavBackgroundColor={topNavBackgroundColor}\n        />\n      </ErrorBoundary>\n    ),\n    webComponentRootElement: uiShellRootElement,\n    webComponentChildren,\n  });\n  uiShellRootElement.appendChild(appContainerElement);\n\n  return {\n    appRootElement,\n    setComponentProps: publishAfterReactAppReadyForProps,\n    slottedElements,\n    uiShellElement,\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"renderUiShell.js","names":["ErrorBoundary","bufferLatest","createMessageBus","UiShell","uiShellDataAttribute","renderReactInWebComponent","jsx","_jsx","optionalComponentSlotNames","banners","rightSideMenu","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appBackgroundColor","appBackgroundContrastMode","appElement","providedAppElement","appElementScrollingMode","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","parentElement","sideNavBackgroundColor","topNavBackgroundColor","document","createElement","setAttribute","publish","publishPropChanges","subscribe","subscribeToPropChanges","publishSubscriptionCreated","subscribeToReactAppSubscribed","publishAfterReactAppReadyForProps","slottedElements","Object","fromEntries","entries","map","optionalComponentKey","slotName","element","webComponentChildren","values","uiShellElement","getReactComponent","reactRootElements","fallback","children","onSubscriptionCreated","optionalComponents","name","uiShellAppElement","appRootElement","uiShellStylesElement","stylesRootElement","webComponentParentElement","appendChild","setComponentProps"],"sources":["../../../src/ui-shell/renderUiShell.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { bufferLatest } from \"./bufferLatest.js\";\nimport { createMessageBus } from \"./createMessageBus.js\";\nimport { UiShell, UiShellProps } from \"./UiShell.js\";\nimport { UiShellNavComponentProps } from \"./uiShellContentTypes.js\";\nimport { uiShellDataAttribute } from \"./useHasUiShell.js\";\nimport { renderReactInWebComponent } from \"../web-component/renderReactInWebComponent.js\";\n\nexport const optionalComponentSlotNames: Record<\n  keyof Required<UiShellProps>[\"optionalComponents\"],\n  string\n> = {\n  banners: \"banners\",\n  rightSideMenu: \"right-side-menu\",\n  sideNavFooter: \"side-nav-footer\",\n  topNavLeftSide: \"top-nav-left-side\",\n  topNavRightSide: \"top-nav-right-side\",\n};\n\n/**\n * This function renders UI Shell in a web component.\n * This function is agnostic to the UI framework for your app is using. Your application can be another web component, a React app, or even vanilla HTML.\n *\n * **All styles are self-contained.** Even though your application visually renders as children of the web component, its within the global `document` scope, not the web component's `ShadowRoot`. That means any global styles will not affect UI Shell but will affect your application.\n *\n * It places your app's root element in a web component <slot> and ensures it remains rendered in the event of a UI Shell error.\n * It also provides you with other elements fitted to slots in the web component. **In React, you can portal to these components.**\n */\nexport const renderUiShell = ({\n  appBackgroundColor,\n  appBackgroundContrastMode,\n  appElement: providedAppElement,\n  appElementScrollingMode,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  parentElement,\n  sideNavBackgroundColor,\n  topNavBackgroundColor,\n}: {\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, reporting priority 0 issues, and recovering UI Shell when errors occur.\n   */\n  onError?: () => void;\n  /**\n   * HTML element used as the container for UI Shell and the App. They're siblings inside this element.\n   */\n  parentElement: HTMLElement;\n} & Pick<\n  UiShellProps,\n  | \"appBackgroundColor\"\n  | \"appBackgroundContrastMode\"\n  | \"appElementScrollingMode\"\n  | \"hasStandardAppContentPadding\"\n  | \"initialVisibleSections\"\n  | \"sideNavBackgroundColor\"\n  | \"topNavBackgroundColor\"\n> &\n  Partial<Pick<UiShellProps, \"appElement\">>) => {\n  const appElement = providedAppElement || document.createElement(\"div\");\n\n  // Add this attribute so `PageTemplate` and potentially other components will know if they're in UI Shell with special padding already available.\n  parentElement.setAttribute(uiShellDataAttribute, \"\");\n\n  const { publish: publishPropChanges, subscribe: subscribeToPropChanges } =\n    createMessageBus<SetStateAction<UiShellNavComponentProps>>();\n\n  const {\n    publish: publishSubscriptionCreated,\n    subscribe: subscribeToReactAppSubscribed,\n  } = createMessageBus();\n\n  const publishAfterReactAppReadyForProps = bufferLatest({\n    publish: publishPropChanges,\n    subscribe: subscribeToReactAppSubscribed,\n  });\n\n  const slottedElements = Object.fromEntries(\n    Object.entries(optionalComponentSlotNames).map(\n      ([optionalComponentKey, slotName]) => {\n        const element = document.createElement(\"div\");\n\n        element.setAttribute(\"slot\", slotName);\n\n        return [optionalComponentKey, element];\n      },\n    ),\n  ) as Record<\n    keyof Required<UiShellProps>[\"optionalComponents\"],\n    HTMLDivElement\n  >;\n\n  const webComponentChildren = Object.values(slottedElements);\n\n  const uiShellElement = renderReactInWebComponent({\n    getReactComponent: (reactRootElements) => (\n      <ErrorBoundary fallback={<div data-error />} onError={onError}>\n        <UiShell\n          appBackgroundColor={appBackgroundColor}\n          appBackgroundContrastMode={appBackgroundContrastMode}\n          appElement={appElement}\n          appElementScrollingMode={appElementScrollingMode}\n          hasStandardAppContentPadding={hasStandardAppContentPadding}\n          initialVisibleSections={initialVisibleSections}\n          onError={onError}\n          onSubscriptionCreated={publishSubscriptionCreated}\n          // `optionalComponents` doesn't need to be memoized because gets passed in once, and this isn't a React component.\n          optionalComponents={Object.fromEntries(\n            Object.entries(optionalComponentSlotNames).map(\n              ([optionalComponentKey, slotName]) => [\n                optionalComponentKey,\n                <slot name={slotName} />,\n              ],\n            ),\n          )}\n          sideNavBackgroundColor={sideNavBackgroundColor}\n          subscribeToPropChanges={subscribeToPropChanges}\n          topNavBackgroundColor={topNavBackgroundColor}\n          uiShellAppElement={reactRootElements.appRootElement}\n          uiShellStylesElement={reactRootElements.stylesRootElement}\n        />\n      </ErrorBoundary>\n    ),\n    webComponentParentElement: parentElement,\n    webComponentChildren,\n  });\n\n  parentElement.appendChild(appElement);\n\n  return {\n    appElement,\n    setComponentProps: publishAfterReactAppReadyForProps,\n    slottedElements,\n    uiShellElement,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/{src/DataTable/constants.ts → dist/esm/ui-shell/uiShellContentTypes.js}

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
  *
  * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
@@ -10,4 +10,5 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export const densityValues = ["comfortable", "spacious", "compact"] as const;
+export const subComponentNames = ["TopNav", "SideNav", "AppSwitcher"];
+//# sourceMappingURL=uiShellContentTypes.js.map

package/dist/esm/ui-shell/uiShellContentTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uiShellContentTypes.js","names":["subComponentNames"],"sources":["../../../src/ui-shell/uiShellContentTypes.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { ReactElement } from \"react\";\nimport { ErrorBoundaryProps } from \"react-error-boundary\";\n\nimport { AppSwitcherProps } from \"./AppSwitcher/AppSwitcher.js\";\nimport { SideNavProps } from \"./SideNav/types.js\";\nimport { TopNavProps } from \"./TopNav/TopNav.js\";\n\nexport const subComponentNames = [\"TopNav\", \"SideNav\", \"AppSwitcher\"] as const;\nexport type SubComponentName = (typeof subComponentNames)[number];\n\nexport type UiShellNavComponentProps = {\n  /**\n   * Object that gets pass directly to the app switcher component.\n   */\n  appSwitcherProps?: AppSwitcherProps;\n  /**\n   * Object that gets pass directly to the side nav component. If `undefined` and in `initialVisibleSections`, SideNav will be initially rendered. Pass `null` to hide a previously-visible SideNav.\n   */\n  sideNavProps?: Omit<SideNavProps, \"footerComponent\"> | null;\n  /**\n   * Object that gets pass directly to the top nav component. If `undefined` and in `initialVisibleSections`, TopNav will be initially rendered. Pass `null` to hide a previously-visible TopNav.\n   */\n  topNavProps?: Omit<\n    TopNavProps,\n    \"leftSideComponent\" | \"rightSideComponent\"\n  > | null;\n};\n\nexport type UiShellContentProps = {\n  /**\n   * **WARNING:** UI Shell will modify the styling of this element.\n   * HTML element where the app gets rendered. This typically called the React root element for your app.\n   *\n   * When passed, the app is expected to render into this element, not the Shadow DOM.\n   *\n   * UI Shell will position this element appropriately to match the content area inside the Shadow DOM.\n   *\n   * A major benefit to having this element separate from UI Shell is related to encapsulation. UI Shell has the capability of rendering inside a web component, but in doing so, the app would be subject to the styles in the web component and not the page itself.\n   * The app should either be in its own web component or use the global styles, and having this separate element allows us to accomplish that goal.\n   */\n  appElement: HTMLDivElement;\n  /**\n   * Controls the scrolling behavior of the app element area.\n   *\n   * In the case of an app wanting to control their own scrolling, use `\"none\"`.\n   *\n   * Most apps will want to use `\"vertical\"` and let UI Shell manage scrolling behavior.\n   */\n  appElementScrollingMode: \"none\" | \"horizontal\" | \"vertical\" | \"both\";\n  /**\n   * Defaults to `true`.\n   *\n   * If `false`, the content area will have no padding provided. This is for the case where an app wants to manage this separate from UI Shell.\n   */\n  hasStandardAppContentPadding?: boolean;\n  /**\n   * Parts of UI Shell that are visible when rendered.\n   *\n   * For example, if `sideNavProps` is `undefined`, should there be a space left for side nav or should that space not exist?\n   */\n  initialVisibleSections?: SubComponentName[];\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, flagging \"p0\"s, and recovering UI Shell when errors occur.\n   */\n  onError?: ErrorBoundaryProps[\"onError\"];\n  /**\n   * Components that will render as children of various other components such as the top nav or side nav.\n   */\n  optionalComponents?: {\n    /**\n     * Spot for banners to go at the top of the page.\n     */\n    banners?: ReactElement;\n    /**\n     * In narrow view, this is the right-side menu area.\n     */\n    rightSideMenu?: ReactElement;\n    /**\n     * Footer in the side nav.\n     */\n    sideNavFooter?: SideNavProps[\"footerComponent\"];\n    /**\n     * Top nav is divided into 2 parts. This is the left-aligned half.\n     */\n    topNavLeftSide?: TopNavProps[\"leftSideComponent\"];\n    /**\n     * Top nav is divided into 2 parts. This is the right-aligned half.\n     */\n    topNavRightSide?: TopNavProps[\"rightSideComponent\"];\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AASA,OAAO,MAAMA,iBAAiB,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,aAAa,CAAU","ignoreList":[]}

package/{src/CssBaseline.tsx → dist/esm/ui-shell/uiShellSharedConstants.js}

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
  *
  * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
@@ -8,13 +8,9 @@
  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  *
  * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import {
-  CssBaseline as MuiCssBaseline,
-  CssBaselineProps as MuiCssBaselineProps,
-} from "@mui/material";
-
-export const CssBaseline = (props: MuiCssBaselineProps) => (
-  <MuiCssBaseline {...props} />
-);
+ */export const SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION = "77px";
+export const SIDE_NAV_WIDTH = "300px";
+export const TOP_NAV_HEIGHT = `${64 / 14}rem`;
+export const UI_SHELL_BASE_Z_INDEX = 100;
+export const UI_SHELL_OVERLAY_Z_INDEX = 200;
+//# sourceMappingURL=uiShellSharedConstants.js.map

package/dist/esm/ui-shell/uiShellSharedConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uiShellSharedConstants.js","names":["SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION","SIDE_NAV_WIDTH","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","UI_SHELL_OVERLAY_Z_INDEX"],"sources":["../../../src/ui-shell/uiShellSharedConstants.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\n// It's important to bring all our constant values together, so we can change them in one location and ensure the values are all correct relative to each other.\n// This also lends us the capability of swapping these out for a more robust solution in the future.\n\n/* The side nav collapse icon is placed absolutely from the top (Logo container + nav header height) to align it in the middle of the nav header text */\nexport const SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION = \"77px\";\n\nexport const SIDE_NAV_WIDTH = \"300px\";\n\nexport const TOP_NAV_HEIGHT = `${64 / 14}rem`;\n\nexport const UI_SHELL_BASE_Z_INDEX = 100;\n\nexport const UI_SHELL_OVERLAY_Z_INDEX = 200;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAMA,OAAO,MAAMA,wCAAwC,GAAG,MAAM;AAE9D,OAAO,MAAMC,cAAc,GAAG,OAAO;AAErC,OAAO,MAAMC,cAAc,GAAG,GAAG,EAAE,GAAG,EAAE,KAAK;AAE7C,OAAO,MAAMC,qBAAqB,GAAG,GAAG;AAExC,OAAO,MAAMC,wBAAwB,GAAG,GAAG","ignoreList":[]}

package/dist/esm/ui-shell/useMatchAppElementToUiShellAppArea.js

@@ -0,0 +1,99 @@
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useEffect, useMemo, useRef } from "react";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+export const convertCamelCaseToKebabCase = string => string.replace(/([A-Z])/g, "-$1").toLowerCase();
+export const setStylesToMatchElement = ({
+  additionalStyles,
+  appContainerElement,
+  appContentReferenceElement,
+  parentElement
+}) => {
+  const appContentReferenceRectangle = appContentReferenceElement.getBoundingClientRect();
+  const parentElementRectangle = parentElement.getBoundingClientRect();
+  appContainerElement.style.setProperty("position", "absolute");
+  appContainerElement.style.setProperty("top", `${appContentReferenceRectangle.top - parentElementRectangle.top}px`);
+  appContainerElement.style.setProperty("left", `${appContentReferenceRectangle.left - parentElementRectangle.left}px`);
+  appContainerElement.style.setProperty("width", `${appContentReferenceRectangle.width}px`);
+  appContainerElement.style.setProperty("height", `${appContentReferenceRectangle.height}px`);
+  appContainerElement.style.setProperty("z-index", "1");
+  Object.entries(additionalStyles).forEach(([cssPropertyName, cssPropertyValue]) => {
+    appContainerElement.style.setProperty(convertCamelCaseToKebabCase(cssPropertyName), String(cssPropertyValue));
+  });
+};
+export const useMatchAppElementToUiShellAppArea = ({
+  appElement,
+  appElementScrollingMode,
+  paddingMode,
+  uiShellAppAreaRef,
+  uiShellResizableRefs
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const parentContainerRef = useRef(null);
+  const appContainerElementStyles = useMemo(() => ({
+    ...(paddingMode === "comfortable" ? {
+      paddingBlock: odysseyDesignTokens.Spacing5,
+      paddingInline: odysseyDesignTokens.Spacing8
+    } : {}),
+    ...(paddingMode === "compact" ? {
+      paddingBlock: odysseyDesignTokens.Spacing5,
+      paddingInline: odysseyDesignTokens.Spacing5
+    } : {}),
+    ...(appElementScrollingMode === "horizontal" || appElementScrollingMode === "both" ? {
+      overflowX: "auto"
+    } : {
+      overflowX: "hidden"
+    }),
+    ...(appElementScrollingMode === "vertical" || appElementScrollingMode === "both" ? {
+      overflowY: "auto"
+    } : {
+      overflowY: "hidden"
+    })
+  }), [appElementScrollingMode, paddingMode, odysseyDesignTokens]);
+  useEffect(() => {
+    if (uiShellAppAreaRef.current && appElement && parentContainerRef.current) {
+      let animationFrameId;
+      const updateStyles = () => {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = requestAnimationFrame(() => {
+          if (uiShellAppAreaRef.current && parentContainerRef.current) {
+            setStylesToMatchElement({
+              additionalStyles: appContainerElementStyles,
+              appContentReferenceElement: uiShellAppAreaRef.current,
+              appContainerElement: appElement,
+              parentElement: parentContainerRef.current
+            });
+          }
+        });
+      };
+      const resizingElements = uiShellResizableRefs.map(resizingRef => resizingRef.current).filter(element => Boolean(element));
+      const observer = new ResizeObserver(updateStyles);
+      resizingElements.forEach(resizingElement => {
+        resizingElement.addEventListener("transitionend", updateStyles);
+        observer.observe(resizingElement);
+      });
+      updateStyles();
+      return () => {
+        observer.disconnect();
+        resizingElements.forEach(resizingElement => {
+          resizingElement.removeEventListener("transitionend", updateStyles);
+        });
+      };
+    }
+    return () => {};
+  }, [appElement, appContainerElementStyles, uiShellAppAreaRef]);
+  return {
+    parentContainerRef
+  };
+};
+//# sourceMappingURL=useMatchAppElementToUiShellAppArea.js.map

package/dist/esm/ui-shell/useMatchAppElementToUiShellAppArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMatchAppElementToUiShellAppArea.js","names":["useEffect","useMemo","useRef","useOdysseyDesignTokens","convertCamelCaseToKebabCase","string","replace","toLowerCase","setStylesToMatchElement","additionalStyles","appContainerElement","appContentReferenceElement","parentElement","appContentReferenceRectangle","getBoundingClientRect","parentElementRectangle","style","setProperty","top","left","width","height","Object","entries","forEach","cssPropertyName","cssPropertyValue","String","useMatchAppElementToUiShellAppArea","appElement","appElementScrollingMode","paddingMode","uiShellAppAreaRef","uiShellResizableRefs","odysseyDesignTokens","parentContainerRef","appContainerElementStyles","paddingBlock","Spacing5","paddingInline","Spacing8","overflowX","overflowY","current","animationFrameId","updateStyles","cancelAnimationFrame","requestAnimationFrame","resizingElements","map","resizingRef","filter","element","Boolean","observer","ResizeObserver","resizingElement","addEventListener","observe","disconnect","removeEventListener"],"sources":["../../../src/ui-shell/useMatchAppElementToUiShellAppArea.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { CSSProperties, RefObject, useEffect, useMemo, useRef } from \"react\";\n\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { UiShellContentProps } from \"./uiShellContentTypes.js\";\n\nexport const convertCamelCaseToKebabCase = (string: string) =>\n  string.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\nexport const setStylesToMatchElement = ({\n  additionalStyles,\n  appContainerElement,\n  appContentReferenceElement,\n  parentElement,\n}: {\n  additionalStyles: CSSProperties;\n  appContainerElement: HTMLElement;\n  appContentReferenceElement: HTMLElement;\n  parentElement: HTMLElement;\n}) => {\n  const appContentReferenceRectangle =\n    appContentReferenceElement.getBoundingClientRect();\n  const parentElementRectangle = parentElement.getBoundingClientRect();\n\n  appContainerElement.style.setProperty(\"position\", \"absolute\");\n  appContainerElement.style.setProperty(\n    \"top\",\n    `${appContentReferenceRectangle.top - parentElementRectangle.top}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"left\",\n    `${appContentReferenceRectangle.left - parentElementRectangle.left}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"width\",\n    `${appContentReferenceRectangle.width}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"height\",\n    `${appContentReferenceRectangle.height}px`,\n  );\n  appContainerElement.style.setProperty(\"z-index\", \"1\");\n\n  (\n    Object.entries(additionalStyles) as Array<\n      [\n        keyof typeof additionalStyles,\n        (typeof additionalStyles)[keyof typeof additionalStyles],\n      ]\n    >\n  ).forEach(([cssPropertyName, cssPropertyValue]) => {\n    appContainerElement.style.setProperty(\n      convertCamelCaseToKebabCase(cssPropertyName),\n      String(cssPropertyValue),\n    );\n  });\n};\n\nexport type UseMatchAppElementToUiShellAppAreaProps = {\n  /**\n   * Padding around the app area. \"comfortable\" is designed for wider views whereas \"compact\" is designed for narrower views.\n   */\n  paddingMode: \"comfortable\" | \"compact\" | \"none\";\n  /**\n   * Ref for the App Container in UI Shell. This should be the one inside the Shell, **not** the element we're going to align.\n   */\n  uiShellAppAreaRef: RefObject<HTMLDivElement>;\n  /**\n   * Array of refs of items that indirectly resize the app content area such as \"side nav\" and \"top nav\".\n   */\n  uiShellResizableRefs: Array<RefObject<HTMLDivElement>>;\n} & Pick<UiShellContentProps, \"appElement\" | \"appElementScrollingMode\">;\n\nexport const useMatchAppElementToUiShellAppArea = ({\n  appElement,\n  appElementScrollingMode,\n  paddingMode,\n  uiShellAppAreaRef,\n  uiShellResizableRefs,\n}: UseMatchAppElementToUiShellAppAreaProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const parentContainerRef = useRef<HTMLDivElement>(null);\n\n  const appContainerElementStyles = useMemo<CSSProperties>(\n    () => ({\n      ...(paddingMode === \"comfortable\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing8,\n          }\n        : {}),\n      ...(paddingMode === \"compact\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing5,\n          }\n        : {}),\n      ...(appElementScrollingMode === \"horizontal\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowX: \"auto\",\n          }\n        : {\n            overflowX: \"hidden\",\n          }),\n      ...(appElementScrollingMode === \"vertical\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowY: \"auto\",\n          }\n        : {\n            overflowY: \"hidden\",\n          }),\n    }),\n    [appElementScrollingMode, paddingMode, odysseyDesignTokens],\n  );\n\n  useEffect(() => {\n    // Once `appContainerRef` is rendered, we can position `appContainerElement` on top to match.\n    if (uiShellAppAreaRef.current && appElement && parentContainerRef.current) {\n      let animationFrameId: number;\n\n      const updateStyles = () => {\n        cancelAnimationFrame(animationFrameId);\n\n        animationFrameId = requestAnimationFrame(() => {\n          if (uiShellAppAreaRef.current && parentContainerRef.current) {\n            setStylesToMatchElement({\n              additionalStyles: appContainerElementStyles,\n              appContentReferenceElement: uiShellAppAreaRef.current,\n              appContainerElement: appElement,\n              parentElement: parentContainerRef.current,\n            });\n          }\n        });\n      };\n\n      // These refs might change by the time we unsubscribe, so we need to keep references to the original elements.\n      const resizingElements = uiShellResizableRefs\n        .map((resizingRef) => resizingRef.current)\n        .filter((element): element is NonNullable<typeof element> =>\n          Boolean(element),\n        );\n\n      // Set up a mutation observer to sync later updates\n      const observer = new ResizeObserver(updateStyles);\n\n      // document.addEventListener(\"ready\", updateStyles);\n\n      resizingElements.forEach((resizingElement) => {\n        resizingElement.addEventListener(\"transitionend\", updateStyles);\n\n        observer.observe(resizingElement);\n      });\n\n      // Set the initial styles\n      updateStyles();\n\n      return () => {\n        observer.disconnect();\n\n        resizingElements.forEach((resizingElement) => {\n          resizingElement.removeEventListener(\"transitionend\", updateStyles);\n        });\n      };\n    }\n    return () => {};\n  }, [appElement, appContainerElementStyles, uiShellAppAreaRef]);\n\n  return {\n    parentContainerRef,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/ui-shell/useScrollState.js

@@ -10,11 +10,10 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 export const useScrollState = scrollableContentElement => {
   const [isContentScrolled, setIsContentScrolled] = useState(false);
-  const scrollableContentRef = useRef(null);
-  const scrollableElement = useMemo(() => scrollableContentElement ?? scrollableContentRef.current, [scrollableContentElement, scrollableContentRef.current]);
+  const scrollableElement = useMemo(() => scrollableContentElement, [scrollableContentElement]);
   useEffect(() => {
     if (scrollableElement) {
       let requestedAnimationFrameId;
@@ -34,8 +33,7 @@ export const useScrollState = scrollableContentElement => {
     return () => {};
   }, [scrollableElement]);
   return {
-    isContentScrolled,
-    scrollableContentRef
+    isContentScrolled
   };
 };
 //# sourceMappingURL=useScrollState.js.map

package/dist/esm/ui-shell/useScrollState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollState.js","names":["useEffect","useMemo","useRef","useState","useScrollState","scrollableContentElement","isContentScrolled","setIsContentScrolled","scrollableContentRef","scrollableElement","current","requestedAnimationFrameId","updateScrollState","cancelAnimationFrame","requestAnimationFrame","scrollTop","addEventListener","removeEventListener"],"sources":["../../../src/ui-shell/useScrollState.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nexport const useScrollState = <\n  ScrollableContentElement extends HTMLElement = HTMLDivElement,\n>(\n  scrollableContentElement?: ScrollableContentElement,\n) => {\n  const [isContentScrolled, setIsContentScrolled] = useState(false);\n\n  const scrollableContentRef = useRef<ScrollableContentElement>(null);\n\n  const scrollableElement = useMemo(\n    () => scrollableContentElement ?? scrollableContentRef.current,\n    [scrollableContentElement, scrollableContentRef.current],\n  );\n\n  useEffect(() => {\n    if (scrollableElement) {\n      let requestedAnimationFrameId: number;\n\n      const updateScrollState = () => {\n        cancelAnimationFrame(requestedAnimationFrameId);\n\n        requestedAnimationFrameId = requestAnimationFrame(() => {\n          setIsContentScrolled(scrollableElement.scrollTop > 0);\n        });\n      };\n\n      scrollableElement.addEventListener(\"scroll\", updateScrollState);\n\n      updateScrollState();\n\n      return () => {\n        scrollableElement.removeEventListener(\"scroll\", updateScrollState);\n\n        cancelAnimationFrame(requestedAnimationFrameId);\n      };\n    }\n\n    return () => {};\n  }, [scrollableElement]);\n\n  return {\n    isContentScrolled,\n    scrollableContentRef,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAE5D,OAAO,MAAMC,cAAc,GAGzBC,wBAAmD,IAChD;EACH,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGJ,QAAQ,CAAC,KAAK,CAAC;EAEjE,MAAMK,oBAAoB,GAAGN,MAAM,CAA2B,IAAI,CAAC;EAEnE,MAAMO,iBAAiB,GAAGR,OAAO,CAC/B,MAAMI,wBAAwB,IAAIG,oBAAoB,CAACE,OAAO,EAC9D,CAACL,wBAAwB,EAAEG,oBAAoB,CAACE,OAAO,CACzD,CAAC;EAEDV,SAAS,CAAC,MAAM;IACd,IAAIS,iBAAiB,EAAE;MACrB,IAAIE,yBAAiC;MAErC,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;QAC9BC,oBAAoB,CAACF,yBAAyB,CAAC;QAE/CA,yBAAyB,GAAGG,qBAAqB,CAAC,MAAM;UACtDP,oBAAoB,CAACE,iBAAiB,CAACM,SAAS,GAAG,CAAC,CAAC;QACvD,CAAC,CAAC;MACJ,CAAC;MAEDN,iBAAiB,CAACO,gBAAgB,CAAC,QAAQ,EAAEJ,iBAAiB,CAAC;MAE/DA,iBAAiB,CAAC,CAAC;MAEnB,OAAO,MAAM;QACXH,iBAAiB,CAACQ,mBAAmB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;QAElEC,oBAAoB,CAACF,yBAAyB,CAAC;MACjD,CAAC;IACH;IAEA,OAAO,MAAM,CAAC,CAAC;EACjB,CAAC,EAAE,CAACF,iBAAiB,CAAC,CAAC;EAEvB,OAAO;IACLH,iBAAiB;IACjBE;EACF,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"file":"useScrollState.js","names":["useEffect","useMemo","useState","useScrollState","scrollableContentElement","isContentScrolled","setIsContentScrolled","scrollableElement","requestedAnimationFrameId","updateScrollState","cancelAnimationFrame","requestAnimationFrame","scrollTop","addEventListener","removeEventListener"],"sources":["../../../src/ui-shell/useScrollState.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useEffect, useMemo, useState } from \"react\";\n\nexport const useScrollState = <\n  ScrollableContentElement extends HTMLElement = HTMLDivElement,\n>(\n  scrollableContentElement?: ScrollableContentElement,\n) => {\n  const [isContentScrolled, setIsContentScrolled] = useState(false);\n\n  const scrollableElement = useMemo(\n    () => scrollableContentElement,\n    [scrollableContentElement],\n  );\n\n  useEffect(() => {\n    if (scrollableElement) {\n      let requestedAnimationFrameId: number;\n\n      const updateScrollState = () => {\n        cancelAnimationFrame(requestedAnimationFrameId);\n\n        requestedAnimationFrameId = requestAnimationFrame(() => {\n          setIsContentScrolled(scrollableElement.scrollTop > 0);\n        });\n      };\n\n      scrollableElement.addEventListener(\"scroll\", updateScrollState);\n\n      updateScrollState();\n\n      return () => {\n        scrollableElement.removeEventListener(\"scroll\", updateScrollState);\n\n        cancelAnimationFrame(requestedAnimationFrameId);\n      };\n    }\n\n    return () => {};\n  }, [scrollableElement]);\n\n  return {\n    isContentScrolled,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAEpD,OAAO,MAAMC,cAAc,GAGzBC,wBAAmD,IAChD;EACH,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGJ,QAAQ,CAAC,KAAK,CAAC;EAEjE,MAAMK,iBAAiB,GAAGN,OAAO,CAC/B,MAAMG,wBAAwB,EAC9B,CAACA,wBAAwB,CAC3B,CAAC;EAEDJ,SAAS,CAAC,MAAM;IACd,IAAIO,iBAAiB,EAAE;MACrB,IAAIC,yBAAiC;MAErC,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;QAC9BC,oBAAoB,CAACF,yBAAyB,CAAC;QAE/CA,yBAAyB,GAAGG,qBAAqB,CAAC,MAAM;UACtDL,oBAAoB,CAACC,iBAAiB,CAACK,SAAS,GAAG,CAAC,CAAC;QACvD,CAAC,CAAC;MACJ,CAAC;MAEDL,iBAAiB,CAACM,gBAAgB,CAAC,QAAQ,EAAEJ,iBAAiB,CAAC;MAE/DA,iBAAiB,CAAC,CAAC;MAEnB,OAAO,MAAM;QACXF,iBAAiB,CAACO,mBAAmB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;QAElEC,oBAAoB,CAACF,yBAAyB,CAAC;MACjD,CAAC;IACH;IAEA,OAAO,MAAM,CAAC,CAAC;EACjB,CAAC,EAAE,CAACD,iBAAiB,CAAC,CAAC;EAEvB,OAAO;IACLF;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/esm/ui-shell/useUiShellBreakpoints.js

@@ -0,0 +1,34 @@
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useMediaQuery } from "../theme/useMediaQuery.js";
+export const uiShellBreakpoint = {
+  comfortable: 800,
+  compact: 600,
+  constrained: 0
+};
+export const useUiShellBreakpoints = () => {
+  const isConstrainedView = useMediaQuery(`(min-width: ${uiShellBreakpoint.constrained}px)`);
+  const isCompactView = useMediaQuery(`(min-width: ${uiShellBreakpoint.compact}px)`);
+  const isComfortableView = useMediaQuery(`(min-width: ${uiShellBreakpoint.comfortable}px)`);
+  if (isComfortableView) {
+    return "comfortable";
+  }
+  if (isCompactView) {
+    return "compact";
+  }
+  if (isConstrainedView) {
+    return "constrained";
+  }
+  return "none";
+};
+//# sourceMappingURL=useUiShellBreakpoints.js.map

package/dist/esm/ui-shell/useUiShellBreakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUiShellBreakpoints.js","names":["useMediaQuery","uiShellBreakpoint","comfortable","compact","constrained","useUiShellBreakpoints","isConstrainedView","isCompactView","isComfortableView"],"sources":["../../../src/ui-shell/useUiShellBreakpoints.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useMediaQuery } from \"../theme/useMediaQuery.js\";\n\nexport const uiShellBreakpoint = {\n  comfortable: 800,\n  compact: 600,\n  constrained: 0,\n} as const;\n\nexport const useUiShellBreakpoints = ():\n  | keyof typeof uiShellBreakpoint\n  | \"none\" => {\n  const isConstrainedView = useMediaQuery(\n    `(min-width: ${uiShellBreakpoint.constrained}px)`,\n  );\n\n  const isCompactView = useMediaQuery(\n    `(min-width: ${uiShellBreakpoint.compact}px)`,\n  );\n\n  const isComfortableView = useMediaQuery(\n    `(min-width: ${uiShellBreakpoint.comfortable}px)`,\n  );\n\n  if (isComfortableView) {\n    return \"comfortable\";\n  }\n\n  if (isCompactView) {\n    return \"compact\";\n  }\n\n  if (isConstrainedView) {\n    return \"constrained\";\n  }\n\n  // For the initial page load as we don't have media queries until the page loads.\n  return \"none\";\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,QAAQ,2BAA2B;AAEzD,OAAO,MAAMC,iBAAiB,GAAG;EAC/BC,WAAW,EAAE,GAAG;EAChBC,OAAO,EAAE,GAAG;EACZC,WAAW,EAAE;AACf,CAAU;AAEV,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KAEvB;EACZ,MAAMC,iBAAiB,GAAGN,aAAa,CACrC,eAAeC,iBAAiB,CAACG,WAAW,KAC9C,CAAC;EAED,MAAMG,aAAa,GAAGP,aAAa,CACjC,eAAeC,iBAAiB,CAACE,OAAO,KAC1C,CAAC;EAED,MAAMK,iBAAiB,GAAGR,aAAa,CACrC,eAAeC,iBAAiB,CAACC,WAAW,KAC9C,CAAC;EAED,IAAIM,iBAAiB,EAAE;IACrB,OAAO,aAAa;EACtB;EAEA,IAAID,aAAa,EAAE;IACjB,OAAO,SAAS;EAClB;EAEA,IAAID,iBAAiB,EAAE;IACrB,OAAO,aAAa;EACtB;EAGA,OAAO,MAAM;AACf,CAAC","ignoreList":[]}

package/dist/esm/useContrastMode.js

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { createContext, useContext, useRef, useLayoutEffect, useState, useCallback } from "react";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import * as Tokens from "@okta/odyssey-design-tokens";
 import { hexToRgb } from "./hexToRgb.js";
 export const ContrastModeContext = createContext({
@@ -56,7 +56,7 @@ export const useContrastMode = ({
       setContrastMode(newBgColor === Tokens.HueNeutral50 ? "highContrast" : "lowContrast");
     }
   }, [explicitContrastMode]);
-  useLayoutEffect(() => {
+  useEffect(() => {
     const observer = new MutationObserver(updateBackgroundColor);
     observer.observe(document.querySelector("html"), {
       attributes: true,

package/dist/esm/useContrastMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"useContrastMode.js","names":["createContext","useContext","useRef","useLayoutEffect","useState","useCallback","Tokens","hexToRgb","ContrastModeContext","contrastMode","defaultContrast","useContrastModeContext","hueNeutral50Rgb","HueNeutral50","asFormattedString","isTransparentColor","color","normalizeRgbaToRgb","rgba","replace","getElementComputedBackgroundColor","element","window","getComputedStyle","backgroundColor","normalizeBackgroundColor","bgColor","test","normalizedColor","defaultParentBackgroundColor","getBackgroundColor","parentElement","useContrastMode","explicitContrastMode","contrastContainerRef","existingContrastMode","parentBackgroundColor","setParentBackgroundColor","setContrastMode","updateBackgroundColor","newBgColor","current","observer","MutationObserver","observe","document","querySelector","attributes","attributeFilter","head","childList","subtree","onTransitionEnd","event","propertyName","addEventListener","removeEventListener","disconnect"],"sources":["../../src/useContrastMode.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  createContext,\n  useContext,\n  useRef,\n  useLayoutEffect,\n  useState,\n  useCallback,\n} from \"react\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\n\nimport { hexToRgb } from \"./hexToRgb.js\";\n\nexport type ContrastMode = \"lowContrast\" | \"highContrast\";\nexport type ContrastModeContextType = {\n  contrastMode: ContrastMode;\n};\n\nexport const ContrastModeContext = createContext<ContrastModeContextType>({\n  contrastMode: \"lowContrast\",\n});\n\nexport const defaultContrast = \"lowContrast\";\n\nexport const useContrastModeContext = () => useContext(ContrastModeContext);\n\nexport const hueNeutral50Rgb = hexToRgb(Tokens.HueNeutral50).asFormattedString;\n\nexport const isTransparentColor = (color: string) =>\n  color === \"rgba(0, 0, 0, 0)\" || color === \"transparent\";\n\nexport const normalizeRgbaToRgb = (rgba: string) =>\n  rgba.replace(/rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)/, \"rgb($1, $2, $3)\");\n\nexport const getElementComputedBackgroundColor = (\n  element: HTMLElement,\n): string => window.getComputedStyle(element).backgroundColor;\n\nexport const normalizeBackgroundColor = (bgColor: string): string => {\n  if (/rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)/.test(bgColor)) {\n    const normalizedColor = normalizeRgbaToRgb(bgColor);\n    return normalizedColor === hueNeutral50Rgb\n      ? Tokens.HueNeutral50\n      : normalizedColor;\n  }\n\n  return bgColor === hueNeutral50Rgb ? Tokens.HueNeutral50 : bgColor;\n};\n\nexport const defaultParentBackgroundColor = \"#ffffff\";\n\n/**\n * Determines the effective background color of an element.\n *\n * @param element - The HTML element to check.\n * @returns The effective background color. Returns  defaultParentBackgroundColor if no non-transparent background is found.\n *\n * Note:\n * - Low contrast mode is used for white background (defaultParentBackgroundColor or HueNeutralWhite).\n * - High contrast mode is used for gray background (#f4f4f4 or HueNeutral50).\n */\nexport const getBackgroundColor = (element: HTMLElement | null): string => {\n  while (element) {\n    const bgColor = getElementComputedBackgroundColor(element);\n    if (!isTransparentColor(bgColor)) {\n      return normalizeBackgroundColor(bgColor);\n    }\n    element = element.parentElement;\n  }\n  return defaultParentBackgroundColor; // Default to white/low contrast if no background color is found\n};\n\ntype UseContrastModeProps = {\n  contrastMode?: ContrastMode;\n};\n\nexport const useContrastMode = ({\n  contrastMode: explicitContrastMode,\n}: UseContrastModeProps) => {\n  const contrastContainerRef = useRef<HTMLDivElement>(null);\n  const { contrastMode: existingContrastMode } = useContrastModeContext();\n\n  const [parentBackgroundColor, setParentBackgroundColor] = useState(\n    defaultParentBackgroundColor,\n  );\n  const [contrastMode, setContrastMode] = useState<ContrastMode>(\n    () => explicitContrastMode || existingContrastMode,\n  );\n\n  const updateBackgroundColor = useCallback(() => {\n    const newBgColor = getBackgroundColor(contrastContainerRef.current);\n    setParentBackgroundColor(newBgColor);\n\n    if (!explicitContrastMode) {\n      setContrastMode(\n        newBgColor === Tokens.HueNeutral50 ? \"highContrast\" : \"lowContrast\",\n      );\n    }\n  }, [explicitContrastMode]);\n\n  useLayoutEffect(() => {\n    const observer = new MutationObserver(updateBackgroundColor);\n    observer.observe(document.querySelector(\"html\") as HTMLHtmlElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"style\"],\n    });\n    observer.observe(document.head, {\n      childList: true,\n      subtree: true,\n    });\n\n    const onTransitionEnd = (event: TransitionEvent) => {\n      if (event.propertyName === \"background-color\") {\n        updateBackgroundColor();\n      }\n    };\n\n    document.addEventListener(\"transitionend\", onTransitionEnd);\n    updateBackgroundColor();\n\n    return () => {\n      document.removeEventListener(\"transitionend\", onTransitionEnd);\n      observer.disconnect();\n    };\n  }, [updateBackgroundColor]);\n\n  return {\n    contrastContainerRef,\n    contrastMode,\n    parentBackgroundColor,\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"useContrastMode.js","names":["createContext","useCallback","useContext","useEffect","useRef","useState","Tokens","hexToRgb","ContrastModeContext","contrastMode","defaultContrast","useContrastModeContext","hueNeutral50Rgb","HueNeutral50","asFormattedString","isTransparentColor","color","normalizeRgbaToRgb","rgba","replace","getElementComputedBackgroundColor","element","window","getComputedStyle","backgroundColor","normalizeBackgroundColor","bgColor","test","normalizedColor","defaultParentBackgroundColor","getBackgroundColor","parentElement","useContrastMode","explicitContrastMode","contrastContainerRef","existingContrastMode","parentBackgroundColor","setParentBackgroundColor","setContrastMode","updateBackgroundColor","newBgColor","current","observer","MutationObserver","observe","document","querySelector","attributes","attributeFilter","head","childList","subtree","onTransitionEnd","event","propertyName","addEventListener","removeEventListener","disconnect"],"sources":["../../src/useContrastMode.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\n\nimport { hexToRgb } from \"./hexToRgb.js\";\n\nexport type ContrastMode = \"lowContrast\" | \"highContrast\";\nexport type ContrastModeContextType = {\n  contrastMode: ContrastMode;\n};\n\nexport const ContrastModeContext = createContext<ContrastModeContextType>({\n  contrastMode: \"lowContrast\",\n});\n\nexport const defaultContrast = \"lowContrast\";\n\nexport const useContrastModeContext = () => useContext(ContrastModeContext);\n\nexport const hueNeutral50Rgb = hexToRgb(Tokens.HueNeutral50).asFormattedString;\n\nexport const isTransparentColor = (color: string) =>\n  color === \"rgba(0, 0, 0, 0)\" || color === \"transparent\";\n\nexport const normalizeRgbaToRgb = (rgba: string) =>\n  rgba.replace(/rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)/, \"rgb($1, $2, $3)\");\n\nexport const getElementComputedBackgroundColor = (\n  element: HTMLElement,\n): string => window.getComputedStyle(element).backgroundColor;\n\nexport const normalizeBackgroundColor = (bgColor: string): string => {\n  if (/rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)/.test(bgColor)) {\n    const normalizedColor = normalizeRgbaToRgb(bgColor);\n    return normalizedColor === hueNeutral50Rgb\n      ? Tokens.HueNeutral50\n      : normalizedColor;\n  }\n\n  return bgColor === hueNeutral50Rgb ? Tokens.HueNeutral50 : bgColor;\n};\n\nexport const defaultParentBackgroundColor = \"#ffffff\";\n\n/**\n * Determines the effective background color of an element.\n *\n * @param element - The HTML element to check.\n * @returns The effective background color. Returns  defaultParentBackgroundColor if no non-transparent background is found.\n *\n * Note:\n * - Low contrast mode is used for white background (defaultParentBackgroundColor or HueNeutralWhite).\n * - High contrast mode is used for gray background (#f4f4f4 or HueNeutral50).\n */\nexport const getBackgroundColor = (element: HTMLElement | null): string => {\n  while (element) {\n    const bgColor = getElementComputedBackgroundColor(element);\n    if (!isTransparentColor(bgColor)) {\n      return normalizeBackgroundColor(bgColor);\n    }\n    element = element.parentElement;\n  }\n  return defaultParentBackgroundColor; // Default to white/low contrast if no background color is found\n};\n\ntype UseContrastModeProps = {\n  contrastMode?: ContrastMode;\n};\n\nexport const useContrastMode = ({\n  contrastMode: explicitContrastMode,\n}: UseContrastModeProps) => {\n  const contrastContainerRef = useRef<HTMLDivElement>(null);\n  const { contrastMode: existingContrastMode } = useContrastModeContext();\n\n  const [parentBackgroundColor, setParentBackgroundColor] = useState(\n    defaultParentBackgroundColor,\n  );\n  const [contrastMode, setContrastMode] = useState<ContrastMode>(\n    () => explicitContrastMode || existingContrastMode,\n  );\n\n  const updateBackgroundColor = useCallback(() => {\n    const newBgColor = getBackgroundColor(contrastContainerRef.current);\n    setParentBackgroundColor(newBgColor);\n\n    if (!explicitContrastMode) {\n      setContrastMode(\n        newBgColor === Tokens.HueNeutral50 ? \"highContrast\" : \"lowContrast\",\n      );\n    }\n  }, [explicitContrastMode]);\n\n  useEffect(() => {\n    const observer = new MutationObserver(updateBackgroundColor);\n    observer.observe(document.querySelector(\"html\") as HTMLHtmlElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"style\"],\n    });\n    observer.observe(document.head, {\n      childList: true,\n      subtree: true,\n    });\n\n    const onTransitionEnd = (event: TransitionEvent) => {\n      if (event.propertyName === \"background-color\") {\n        updateBackgroundColor();\n      }\n    };\n\n    document.addEventListener(\"transitionend\", onTransitionEnd);\n    updateBackgroundColor();\n\n    return () => {\n      document.removeEventListener(\"transitionend\", onTransitionEnd);\n      observer.disconnect();\n    };\n  }, [updateBackgroundColor]);\n\n  return {\n    contrastContainerRef,\n    contrastMode,\n    parentBackgroundColor,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,aAAa,EACbC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,OAAO,KAAKC,MAAM,MAAM,6BAA6B;AAErD,SAASC,QAAQ,QAAQ,eAAe;AAOxC,OAAO,MAAMC,mBAAmB,GAAGR,aAAa,CAA0B;EACxES,YAAY,EAAE;AAChB,CAAC,CAAC;AAEF,OAAO,MAAMC,eAAe,GAAG,aAAa;AAE5C,OAAO,MAAMC,sBAAsB,GAAGA,CAAA,KAAMT,UAAU,CAACM,mBAAmB,CAAC;AAE3E,OAAO,MAAMI,eAAe,GAAGL,QAAQ,CAACD,MAAM,CAACO,YAAY,CAAC,CAACC,iBAAiB;AAE9E,OAAO,MAAMC,kBAAkB,GAAIC,KAAa,IAC9CA,KAAK,KAAK,kBAAkB,IAAIA,KAAK,KAAK,aAAa;AAEzD,OAAO,MAAMC,kBAAkB,GAAIC,IAAY,IAC7CA,IAAI,CAACC,OAAO,CAAC,2CAA2C,EAAE,iBAAiB,CAAC;AAE9E,OAAO,MAAMC,iCAAiC,GAC5CC,OAAoB,IACTC,MAAM,CAACC,gBAAgB,CAACF,OAAO,CAAC,CAACG,eAAe;AAE7D,OAAO,MAAMC,wBAAwB,GAAIC,OAAe,IAAa;EACnE,IAAI,2CAA2C,CAACC,IAAI,CAACD,OAAO,CAAC,EAAE;IAC7D,MAAME,eAAe,GAAGX,kBAAkB,CAACS,OAAO,CAAC;IACnD,OAAOE,eAAe,KAAKhB,eAAe,GACtCN,MAAM,CAACO,YAAY,GACnBe,eAAe;EACrB;EAEA,OAAOF,OAAO,KAAKd,eAAe,GAAGN,MAAM,CAACO,YAAY,GAAGa,OAAO;AACpE,CAAC;AAED,OAAO,MAAMG,4BAA4B,GAAG,SAAS;AAYrD,OAAO,MAAMC,kBAAkB,GAAIT,OAA2B,IAAa;EACzE,OAAOA,OAAO,EAAE;IACd,MAAMK,OAAO,GAAGN,iCAAiC,CAACC,OAAO,CAAC;IAC1D,IAAI,CAACN,kBAAkB,CAACW,OAAO,CAAC,EAAE;MAChC,OAAOD,wBAAwB,CAACC,OAAO,CAAC;IAC1C;IACAL,OAAO,GAAGA,OAAO,CAACU,aAAa;EACjC;EACA,OAAOF,4BAA4B;AACrC,CAAC;AAMD,OAAO,MAAMG,eAAe,GAAGA,CAAC;EAC9BvB,YAAY,EAAEwB;AACM,CAAC,KAAK;EAC1B,MAAMC,oBAAoB,GAAG9B,MAAM,CAAiB,IAAI,CAAC;EACzD,MAAM;IAAEK,YAAY,EAAE0B;EAAqB,CAAC,GAAGxB,sBAAsB,CAAC,CAAC;EAEvE,MAAM,CAACyB,qBAAqB,EAAEC,wBAAwB,CAAC,GAAGhC,QAAQ,CAChEwB,4BACF,CAAC;EACD,MAAM,CAACpB,YAAY,EAAE6B,eAAe,CAAC,GAAGjC,QAAQ,CAC9C,MAAM4B,oBAAoB,IAAIE,oBAChC,CAAC;EAED,MAAMI,qBAAqB,GAAGtC,WAAW,CAAC,MAAM;IAC9C,MAAMuC,UAAU,GAAGV,kBAAkB,CAACI,oBAAoB,CAACO,OAAO,CAAC;IACnEJ,wBAAwB,CAACG,UAAU,CAAC;IAEpC,IAAI,CAACP,oBAAoB,EAAE;MACzBK,eAAe,CACbE,UAAU,KAAKlC,MAAM,CAACO,YAAY,GAAG,cAAc,GAAG,aACxD,CAAC;IACH;EACF,CAAC,EAAE,CAACoB,oBAAoB,CAAC,CAAC;EAE1B9B,SAAS,CAAC,MAAM;IACd,MAAMuC,QAAQ,GAAG,IAAIC,gBAAgB,CAACJ,qBAAqB,CAAC;IAC5DG,QAAQ,CAACE,OAAO,CAACC,QAAQ,CAACC,aAAa,CAAC,MAAM,CAAC,EAAqB;MAClEC,UAAU,EAAE,IAAI;MAChBC,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO;IACpC,CAAC,CAAC;IACFN,QAAQ,CAACE,OAAO,CAACC,QAAQ,CAACI,IAAI,EAAE;MAC9BC,SAAS,EAAE,IAAI;MACfC,OAAO,EAAE;IACX,CAAC,CAAC;IAEF,MAAMC,eAAe,GAAIC,KAAsB,IAAK;MAClD,IAAIA,KAAK,CAACC,YAAY,KAAK,kBAAkB,EAAE;QAC7Cf,qBAAqB,CAAC,CAAC;MACzB;IACF,CAAC;IAEDM,QAAQ,CAACU,gBAAgB,CAAC,eAAe,EAAEH,eAAe,CAAC;IAC3Db,qBAAqB,CAAC,CAAC;IAEvB,OAAO,MAAM;MACXM,QAAQ,CAACW,mBAAmB,CAAC,eAAe,EAAEJ,eAAe,CAAC;MAC9DV,QAAQ,CAACe,UAAU,CAAC,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,CAAClB,qBAAqB,CAAC,CAAC;EAE3B,OAAO;IACLL,oBAAoB;IACpBzB,YAAY;IACZ2B;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/esm/web-component/createReactRootElements.js.map

@@ -1 +1 @@
-{"version":3,"file":"createReactRootElements.js","names":["createReactRootElements","appRootElement","document","createElement","stylesRootElement","style","setProperty","setAttribute","window","cspNonce"],"sources":["../../../src/web-component/createReactRootElements.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport const createReactRootElements = () => {\n  const appRootElement = document.createElement(\"div\");\n  const stylesRootElement = document.createElement(\"div\");\n\n  // This `div` may cause layout issues unless it inherits the parent's height.\n  appRootElement.style.setProperty(\"height\", \"inherit\");\n\n  appRootElement.setAttribute(\"id\", \"app-root\");\n  stylesRootElement.setAttribute(\"id\", \"style-root\");\n  stylesRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  return {\n    /**\n     * The element your React root component renders into.\n     * React has to render or portal somewhere, and this element can be used for that root element.\n     *\n     * In the case of a web component, there is no defined root element, so you have to define it yourself.\n     */\n    appRootElement,\n    /**\n     * In React apps, your styles typically go in `document.head`, but you may want to render them somewhere else.\n     *\n     * Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.\n     */\n    stylesRootElement,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,uBAAuB,GAAGA,CAAA,KAAM;EAC3C,MAAMC,cAAc,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACpD,MAAMC,iBAAiB,GAAGF,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAGvDF,cAAc,CAACI,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC;EAErDL,cAAc,CAACM,YAAY,CAAC,IAAI,EAAE,UAAU,CAAC;EAC7CH,iBAAiB,CAACG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EAClDH,iBAAiB,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAExD,OAAO;IAOLR,cAAc;IAMdG;EACF,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"file":"createReactRootElements.js","names":["createReactRootElements","appRootElement","document","createElement","stylesRootElement","style","setProperty","setAttribute","window","cspNonce"],"sources":["../../../src/web-component/createReactRootElements.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport type ReactRootElements = {\n  /**\n   * The element your root React component renders into.\n   * React has to render or portal somewhere, and this element can be used for that root element.\n   */\n  appRootElement: HTMLDivElement;\n  /**\n   * In React apps, your styles typically go in `document.head`, but you may want to render them somewhere else.\n   *\n   * Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.\n   */\n  stylesRootElement: HTMLDivElement | HTMLHeadElement;\n};\n\nexport const createReactRootElements = () => {\n  const appRootElement = document.createElement(\"div\");\n  const stylesRootElement = document.createElement(\"div\");\n\n  // This `div` may cause layout issues unless it inherits the parent's height.\n  appRootElement.style.setProperty(\"height\", \"inherit\");\n\n  appRootElement.setAttribute(\"id\", \"app-root\");\n  stylesRootElement.setAttribute(\"id\", \"style-root\");\n  stylesRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  return {\n    appRootElement,\n    stylesRootElement,\n  } satisfies ReactRootElements;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAgBA,OAAO,MAAMA,uBAAuB,GAAGA,CAAA,KAAM;EAC3C,MAAMC,cAAc,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACpD,MAAMC,iBAAiB,GAAGF,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAGvDF,cAAc,CAACI,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC;EAErDL,cAAc,CAACM,YAAY,CAAC,IAAI,EAAE,UAAU,CAAC;EAC7CH,iBAAiB,CAACG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EAClDH,iBAAiB,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAExD,OAAO;IACLR,cAAc;IACdG;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/esm/web-component/renderReactInWebComponent.js

@@ -49,6 +49,7 @@ if ("customElements" in globalThis && !customElements.get(reactWebComponentEleme
 export const renderReactInWebComponent = ({
   getReactComponent,
   webComponentChildren,
+  webComponentParentElement,
   webComponentRootElement
 }) => {
   const reactElement = new ReactInWebComponentElement(getReactComponent);
@@ -57,7 +58,11 @@ export const renderReactInWebComponent = ({
       reactElement.appendChild(webComponentChild);
     });
   }
-  webComponentRootElement.appendChild(reactElement);
+  if (webComponentParentElement) {
+    webComponentParentElement.appendChild(reactElement);
+  } else if (webComponentRootElement) {
+    webComponentRootElement.appendChild(reactElement);
+  }
   return reactElement;
 };
 //# sourceMappingURL=renderReactInWebComponent.js.map

package/dist/esm/web-component/renderReactInWebComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderReactInWebComponent.js","names":["createReactRootElements","reactWebComponentElementName","SsrFriendlyHtmlElementClass","globalThis","HTMLElement","ReactInWebComponentElement","constructor","getReactComponent","reactRootElements","styleElement","document","createElement","shadowRoot","attachShadow","mode","innerHTML","setAttribute","window","cspNonce","stylesRootElement","appendChild","appRootElement","reactRootPromise","then","createRoot","connectedCallback","reactRoot","render","disconnectedCallback","unmount","customElements","get","define","renderReactInWebComponent","webComponentChildren","webComponentRootElement","reactElement","Array","isArray","forEach","webComponentChild"],"sources":["../../../src/web-component/renderReactInWebComponent.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { type ReactNode } from \"react\";\nimport type { Root } from \"react-dom/client\";\n\nimport { createReactRootElements } from \"./createReactRootElements.js\";\n\nexport type ReactRootElements = ReturnType<typeof createReactRootElements>;\n\nexport const reactWebComponentElementName = \"odyssey-react-web-component\";\n\nexport type GetReactComponentInWebComponent = (\n  reactRootElements: ReactRootElements,\n) => ReactNode;\n\nconst SsrFriendlyHtmlElementClass =\n  \"HTMLElement\" in globalThis\n    ? HTMLElement\n    : (class {} as unknown as typeof globalThis.HTMLElement);\n\nexport class ReactInWebComponentElement extends SsrFriendlyHtmlElementClass {\n  getReactComponent: GetReactComponentInWebComponent;\n  reactRootElements: ReactRootElements;\n  reactRootPromise: Promise<Root>;\n\n  constructor(getReactComponent: GetReactComponentInWebComponent) {\n    super();\n\n    this.getReactComponent = getReactComponent;\n    this.reactRootElements = createReactRootElements();\n\n    const styleElement = document.createElement(\"style\");\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n\n    styleElement.innerHTML = `\n      :host {\n        all: initial;\n        contain: content;\n      }\n    `;\n\n    styleElement.setAttribute(\"nonce\", window.cspNonce);\n\n    this.reactRootElements.stylesRootElement.appendChild(styleElement);\n    shadowRoot.appendChild(this.reactRootElements.stylesRootElement);\n    shadowRoot.appendChild(this.reactRootElements.appRootElement);\n\n    // If we want to support React v17 in the future, we can use a try-catch on the import to grab the old `ReactDOM.render` function if `react-dom/client` errors. --Kevin Ghadyani\n    this.reactRootPromise = import(\"react-dom/client\").then(({ createRoot }) =>\n      createRoot(this.reactRootElements.appRootElement),\n    );\n  }\n\n  connectedCallback() {\n    this.reactRootPromise.then((reactRoot) =>\n      reactRoot.render(this.getReactComponent(this.reactRootElements)),\n    );\n  }\n\n  disconnectedCallback() {\n    this.reactRootPromise.then((reactRoot) => reactRoot.unmount());\n  }\n}\n\nif (\n  \"customElements\" in globalThis &&\n  !customElements.get(reactWebComponentElementName)\n) {\n  customElements.define(\n    reactWebComponentElementName,\n    ReactInWebComponentElement,\n  );\n}\n\nexport type RenderReactInWebComponentProps = {\n  /**\n   * This is a callback function for rendering your React component or app in the Web Component.\n   * It gives you access to the Shadow DOM elements if you need them for Odyssey, Emotion, or MUI.\n   *\n   * You will need to add `<slot>` elements if you want to pass child elements or components or React apps.\n   * You can have multiple slots in your app if you add a `name` attribute to your `<slot>` elements.\n   */\n  getReactComponent: GetReactComponentInWebComponent;\n  /**\n   * One or more HTML elements that are going to render as `children` of the web component.\n   * If your React component doesn't take children, this is unnecessary.\n   *\n   * Typically, a React app root element is passed, but it can include an array of other elements if there are multiple slots for children.\n   *\n   * You will need to have rendered `<slot>` elements in your React component or `children` won't show up.\n   */\n  webComponentChildren?: HTMLElement | HTMLElement[];\n  /**\n   * You React app renders in the web component, but the web component needs to be rendered in the document.\n   *\n   * This is the element the web component is rendered into.\n   */\n  webComponentRootElement: HTMLElement;\n};\n\n/**\n * Lets you render React apps or components in a Web Component.\n *\n * This is useful when global styles are causing conflicts with your React components.\n */\nexport const renderReactInWebComponent = ({\n  getReactComponent,\n  webComponentChildren,\n  webComponentRootElement,\n}: RenderReactInWebComponentProps) => {\n  const reactElement = new ReactInWebComponentElement(getReactComponent);\n\n  if (webComponentChildren) {\n    (Array.isArray(webComponentChildren)\n      ? webComponentChildren\n      : [webComponentChildren]\n    ).forEach((webComponentChild) => {\n      reactElement.appendChild(webComponentChild);\n    });\n  }\n\n  webComponentRootElement.appendChild(reactElement);\n\n  return reactElement;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKA,SAASA,uBAAuB,QAAQ,8BAA8B;AAItE,OAAO,MAAMC,4BAA4B,GAAG,6BAA6B;AAMzE,MAAMC,2BAA2B,GAC/B,aAAa,IAAIC,UAAU,GACvBC,WAAW,GACV,MAAM,EAA+C;AAE5D,OAAO,MAAMC,0BAA0B,SAASH,2BAA2B,CAAC;EAK1EI,WAAWA,CAACC,iBAAkD,EAAE;IAC9D,KAAK,CAAC,CAAC;IAEP,IAAI,CAACA,iBAAiB,GAAGA,iBAAiB;IAC1C,IAAI,CAACC,iBAAiB,GAAGR,uBAAuB,CAAC,CAAC;IAElD,MAAMS,YAAY,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;IACpD,MAAMC,UAAU,GAAG,IAAI,CAACC,YAAY,CAAC;MAAEC,IAAI,EAAE;IAAO,CAAC,CAAC;IAEtDL,YAAY,CAACM,SAAS,GAAG;AAC7B;AACA;AACA;AACA;AACA,KAAK;IAEDN,YAAY,CAACO,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;IAEnD,IAAI,CAACV,iBAAiB,CAACW,iBAAiB,CAACC,WAAW,CAACX,YAAY,CAAC;IAClEG,UAAU,CAACQ,WAAW,CAAC,IAAI,CAACZ,iBAAiB,CAACW,iBAAiB,CAAC;IAChEP,UAAU,CAACQ,WAAW,CAAC,IAAI,CAACZ,iBAAiB,CAACa,cAAc,CAAC;IAG7D,IAAI,CAACC,gBAAgB,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAACC,IAAI,CAAC,CAAC;MAAEC;IAAW,CAAC,KACrEA,UAAU,CAAC,IAAI,CAAChB,iBAAiB,CAACa,cAAc,CAClD,CAAC;EACH;EAEAI,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACH,gBAAgB,CAACC,IAAI,CAAEG,SAAS,IACnCA,SAAS,CAACC,MAAM,CAAC,IAAI,CAACpB,iBAAiB,CAAC,IAAI,CAACC,iBAAiB,CAAC,CACjE,CAAC;EACH;EAEAoB,oBAAoBA,CAAA,EAAG;IACrB,IAAI,CAACN,gBAAgB,CAACC,IAAI,CAAEG,SAAS,IAAKA,SAAS,CAACG,OAAO,CAAC,CAAC,CAAC;EAChE;AACF;AAEA,IACE,gBAAgB,IAAI1B,UAAU,IAC9B,CAAC2B,cAAc,CAACC,GAAG,CAAC9B,4BAA4B,CAAC,EACjD;EACA6B,cAAc,CAACE,MAAM,CACnB/B,4BAA4B,EAC5BI,0BACF,CAAC;AACH;AAiCA,OAAO,MAAM4B,yBAAyB,GAAGA,CAAC;EACxC1B,iBAAiB;EACjB2B,oBAAoB;EACpBC;AAC8B,CAAC,KAAK;EACpC,MAAMC,YAAY,GAAG,IAAI/B,0BAA0B,CAACE,iBAAiB,CAAC;EAEtE,IAAI2B,oBAAoB,EAAE;IACxB,CAACG,KAAK,CAACC,OAAO,CAACJ,oBAAoB,CAAC,GAChCA,oBAAoB,GACpB,CAACA,oBAAoB,CAAC,EACxBK,OAAO,CAAEC,iBAAiB,IAAK;MAC/BJ,YAAY,CAAChB,WAAW,CAACoB,iBAAiB,CAAC;IAC7C,CAAC,CAAC;EACJ;EAEAL,uBAAuB,CAACf,WAAW,CAACgB,YAAY,CAAC;EAEjD,OAAOA,YAAY;AACrB,CAAC","ignoreList":[]}
+{"version":3,"file":"renderReactInWebComponent.js","names":["createReactRootElements","reactWebComponentElementName","SsrFriendlyHtmlElementClass","globalThis","HTMLElement","ReactInWebComponentElement","constructor","getReactComponent","reactRootElements","styleElement","document","createElement","shadowRoot","attachShadow","mode","innerHTML","setAttribute","window","cspNonce","stylesRootElement","appendChild","appRootElement","reactRootPromise","then","createRoot","connectedCallback","reactRoot","render","disconnectedCallback","unmount","customElements","get","define","renderReactInWebComponent","webComponentChildren","webComponentParentElement","webComponentRootElement","reactElement","Array","isArray","forEach","webComponentChild"],"sources":["../../../src/web-component/renderReactInWebComponent.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { type ReactNode } from \"react\";\nimport type { Root } from \"react-dom/client\";\n\nimport {\n  createReactRootElements,\n  type ReactRootElements,\n} from \"./createReactRootElements.js\";\n\nexport const reactWebComponentElementName = \"odyssey-react-web-component\";\n\nexport type GetReactComponentInWebComponent = (\n  reactRootElements: ReactRootElements,\n) => ReactNode;\n\nconst SsrFriendlyHtmlElementClass =\n  \"HTMLElement\" in globalThis\n    ? HTMLElement\n    : (class {} as unknown as typeof globalThis.HTMLElement);\n\nexport class ReactInWebComponentElement extends SsrFriendlyHtmlElementClass {\n  getReactComponent: GetReactComponentInWebComponent;\n  reactRootElements: ReactRootElements;\n  reactRootPromise: Promise<Root>;\n\n  constructor(getReactComponent: GetReactComponentInWebComponent) {\n    super();\n\n    this.getReactComponent = getReactComponent;\n    this.reactRootElements = createReactRootElements();\n\n    const styleElement = document.createElement(\"style\");\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n\n    styleElement.innerHTML = `\n      :host {\n        all: initial;\n        contain: content;\n      }\n    `;\n\n    styleElement.setAttribute(\"nonce\", window.cspNonce);\n\n    this.reactRootElements.stylesRootElement.appendChild(styleElement);\n    shadowRoot.appendChild(this.reactRootElements.stylesRootElement);\n    shadowRoot.appendChild(this.reactRootElements.appRootElement);\n\n    // If we want to support React v17 in the future, we can use a try-catch on the import to grab the old `ReactDOM.render` function if `react-dom/client` errors. --Kevin Ghadyani\n    this.reactRootPromise = import(\"react-dom/client\").then(({ createRoot }) =>\n      createRoot(this.reactRootElements.appRootElement),\n    );\n  }\n\n  connectedCallback() {\n    this.reactRootPromise.then((reactRoot) =>\n      reactRoot.render(this.getReactComponent(this.reactRootElements)),\n    );\n  }\n\n  disconnectedCallback() {\n    this.reactRootPromise.then((reactRoot) => reactRoot.unmount());\n  }\n}\n\nif (\n  \"customElements\" in globalThis &&\n  !customElements.get(reactWebComponentElementName)\n) {\n  customElements.define(\n    reactWebComponentElementName,\n    ReactInWebComponentElement,\n  );\n}\n\nexport type RenderReactInWebComponentProps = {\n  /**\n   * This is a callback function for rendering your React component or app in the Web Component.\n   * It gives you access to the Shadow DOM elements if you need them for Odyssey, Emotion, or MUI.\n   *\n   * You will need to add `<slot>` elements if you want to pass child elements or components or React apps.\n   * You can have multiple slots in your app if you add a `name` attribute to your `<slot>` elements.\n   */\n  getReactComponent: GetReactComponentInWebComponent;\n  /**\n   * One or more HTML elements that are going to render as `children` of the web component.\n   * If your React component doesn't take children, this is unnecessary.\n   *\n   * Typically, a React app root element is passed, but it can include an array of other elements if there are multiple slots for children.\n   *\n   * You will need to have rendered `<slot>` elements in your React component or `children` won't show up.\n   */\n  webComponentChildren?: HTMLElement | HTMLElement[];\n} & (\n  | {\n      /**\n       * The React app renders in the web component, but the web component needs to be rendered in the document.\n       *\n       * This is the element the web component is rendered into.\n       */\n      webComponentParentElement: HTMLElement;\n      webComponentRootElement?: never;\n    }\n  | {\n      webComponentParentElement?: HTMLElement;\n      /**\n       * @deprecated Use `webComponentParentElement` instead.\n       */\n      webComponentRootElement: HTMLElement;\n    }\n);\n\n/**\n * Lets you render React apps or components in a Web Component.\n *\n * This is useful when global styles are causing conflicts with your React components.\n */\nexport const renderReactInWebComponent = ({\n  getReactComponent,\n  webComponentChildren,\n  webComponentParentElement,\n  webComponentRootElement,\n}: RenderReactInWebComponentProps) => {\n  const reactElement = new ReactInWebComponentElement(getReactComponent);\n\n  if (webComponentChildren) {\n    (Array.isArray(webComponentChildren)\n      ? webComponentChildren\n      : [webComponentChildren]\n    ).forEach((webComponentChild) => {\n      reactElement.appendChild(webComponentChild);\n    });\n  }\n\n  if (webComponentParentElement) {\n    webComponentParentElement.appendChild(reactElement);\n  }\n  // Remove this condition when `webComponentRootElement` is no longer a prop.\n  else if (webComponentRootElement) {\n    webComponentRootElement.appendChild(reactElement);\n  }\n\n  return reactElement;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKA,SACEA,uBAAuB,QAElB,8BAA8B;AAErC,OAAO,MAAMC,4BAA4B,GAAG,6BAA6B;AAMzE,MAAMC,2BAA2B,GAC/B,aAAa,IAAIC,UAAU,GACvBC,WAAW,GACV,MAAM,EAA+C;AAE5D,OAAO,MAAMC,0BAA0B,SAASH,2BAA2B,CAAC;EAK1EI,WAAWA,CAACC,iBAAkD,EAAE;IAC9D,KAAK,CAAC,CAAC;IAEP,IAAI,CAACA,iBAAiB,GAAGA,iBAAiB;IAC1C,IAAI,CAACC,iBAAiB,GAAGR,uBAAuB,CAAC,CAAC;IAElD,MAAMS,YAAY,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;IACpD,MAAMC,UAAU,GAAG,IAAI,CAACC,YAAY,CAAC;MAAEC,IAAI,EAAE;IAAO,CAAC,CAAC;IAEtDL,YAAY,CAACM,SAAS,GAAG;AAC7B;AACA;AACA;AACA;AACA,KAAK;IAEDN,YAAY,CAACO,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;IAEnD,IAAI,CAACV,iBAAiB,CAACW,iBAAiB,CAACC,WAAW,CAACX,YAAY,CAAC;IAClEG,UAAU,CAACQ,WAAW,CAAC,IAAI,CAACZ,iBAAiB,CAACW,iBAAiB,CAAC;IAChEP,UAAU,CAACQ,WAAW,CAAC,IAAI,CAACZ,iBAAiB,CAACa,cAAc,CAAC;IAG7D,IAAI,CAACC,gBAAgB,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAACC,IAAI,CAAC,CAAC;MAAEC;IAAW,CAAC,KACrEA,UAAU,CAAC,IAAI,CAAChB,iBAAiB,CAACa,cAAc,CAClD,CAAC;EACH;EAEAI,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACH,gBAAgB,CAACC,IAAI,CAAEG,SAAS,IACnCA,SAAS,CAACC,MAAM,CAAC,IAAI,CAACpB,iBAAiB,CAAC,IAAI,CAACC,iBAAiB,CAAC,CACjE,CAAC;EACH;EAEAoB,oBAAoBA,CAAA,EAAG;IACrB,IAAI,CAACN,gBAAgB,CAACC,IAAI,CAAEG,SAAS,IAAKA,SAAS,CAACG,OAAO,CAAC,CAAC,CAAC;EAChE;AACF;AAEA,IACE,gBAAgB,IAAI1B,UAAU,IAC9B,CAAC2B,cAAc,CAACC,GAAG,CAAC9B,4BAA4B,CAAC,EACjD;EACA6B,cAAc,CAACE,MAAM,CACnB/B,4BAA4B,EAC5BI,0BACF,CAAC;AACH;AA4CA,OAAO,MAAM4B,yBAAyB,GAAGA,CAAC;EACxC1B,iBAAiB;EACjB2B,oBAAoB;EACpBC,yBAAyB;EACzBC;AAC8B,CAAC,KAAK;EACpC,MAAMC,YAAY,GAAG,IAAIhC,0BAA0B,CAACE,iBAAiB,CAAC;EAEtE,IAAI2B,oBAAoB,EAAE;IACxB,CAACI,KAAK,CAACC,OAAO,CAACL,oBAAoB,CAAC,GAChCA,oBAAoB,GACpB,CAACA,oBAAoB,CAAC,EACxBM,OAAO,CAAEC,iBAAiB,IAAK;MAC/BJ,YAAY,CAACjB,WAAW,CAACqB,iBAAiB,CAAC;IAC7C,CAAC,CAAC;EACJ;EAEA,IAAIN,yBAAyB,EAAE;IAC7BA,yBAAyB,CAACf,WAAW,CAACiB,YAAY,CAAC;EACrD,CAAC,MAEI,IAAID,uBAAuB,EAAE;IAChCA,uBAAuB,CAAChB,WAAW,CAACiB,YAAY,CAAC;EACnD;EAEA,OAAOA,YAAY;AACrB,CAAC","ignoreList":[]}

package/dist/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 05 Feb 2025 20:20:12 GMT
+ * Generated on Thu, 27 Feb 2025 23:10:14 GMT
  */
 
 module.exports = {

package/dist/index.mjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 05 Feb 2025 20:20:12 GMT
+ * Generated on Thu, 27 Feb 2025 23:10:14 GMT
  */
 
 export const BorderColorControl = "#8d8d8d";

package/dist/index.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 05 Feb 2025 20:20:12 GMT
+ * Generated on Thu, 27 Feb 2025 23:10:14 GMT
  */
 
 $border-color-control: #8d8d8d !default;