@cloudscape-design/components-themeable 3.0.3 → 3.0.6

package/lib/internal/template/app-layout/visual-refresh/split-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-panel.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EACL,iBAAiB,GAGlB,MAAM,4CAA4C,CAAC;AACpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAE5E;;;GAGG;AACH,SAAS,UAAU,CAAC,EAA8C;QAA5C,QAAQ,cAAA;IACtB,IAAA,KAUF,UAAU,CAAC,gBAAgB,CAAC,EAT9B,qBAAqB,2BAAA,EACrB,iCAAiC,uCAAA,EACjC,sBAAsB,4BAAA,EACtB,QAAQ,cAAA,EACR,0BAA0B,gCAAA,EAC1B,gBAAgB,sBAAA,EAChB,yBAAyB,+BAAA,EACzB,kBAAkB,wBAAA,EAClB,cAAc,oBACgB,CAAC;IAE3B,IAAA,KAAgD,QAAQ,CAAqB,SAAS,CAAC,EAAtF,mBAAmB,QAAA,EAAE,sBAAsB,QAA2C,CAAC;IAExF,IAAA,KAA4D,QAAQ,EAAyC,EAA5G,yBAAyB,QAAA,EAAE,4BAA4B,QAAqD,CAAC;IACpH,iBAAiB,CACf,cAAM,OAAA,4BAA4B,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAArF,CAAqF,EAC3F,CAAC,gBAAgB,CAAC,CACnB,CAAC;IACF,iBAAiB,CAAC,cAAM,OAAA,4BAA4B,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAlD,CAAkD,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAElG,IAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACnD,IAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,IAAM,OAAO,GAA2B;QACtC,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,cAAM,OAAA,QAAQ,CAAC,eAAe,CAAC,YAAY,GAAG,GAAG,EAA3C,CAA2C;QAC/D,WAAW,EAAE,cAAM,OAAA,QAAQ,CAAC,eAAe,CAAC,WAAW,EAApC,CAAoC;QACvD,SAAS,EAAE,cAAM,OAAA,mBAAmB,CAAC,OAAO,EAA3B,CAA2B;QAC5C,gBAAgB,EAAE,0BAA0B;QAC5C,QAAQ,UAAA;QACR,MAAM,EAAE,gBAAgB;QACxB,SAAS,EAAE,IAAI;QACf,UAAU,EAAE,CAAC;QACb,mBAAmB,EAAE,iCAAiC;QACtD,QAAQ,EAAE,sBAAsB;QAChC,QAAQ,EAAE,qBAAqB;QAC/B,QAAQ,EAAE,kBAAkB;QAC5B,UAAU,EAAE,yBAAyB;QACrC,WAAW,EAAE,CAAC;QACd,IAAI,EAAE,cAAc,IAAI,CAAC;QACzB,aAAa,eAAA;QACb,mBAAmB,qBAAA;QACnB,SAAS,EAAE,CAAC;QACZ,mBAAmB,qBAAA;QACnB,sBAAsB,wBAAA;QACtB,eAAe,EAAE,yBAAyB;KAC3C,CAAC;IAEF,OAAO,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,eAAO,OAAO,KAAK,QAAQ,CAA8B,CAAC;AACpG,CAAC;AAED;;;;;GAKG;AACH,SAAS,gBAAgB;IACjB,IAAA,KACJ,UAAU,CAAC,gBAAgB,CAAC,EADtB,iBAAiB,uBAAA,EAAE,gBAAgB,sBAAA,EAAE,gBAAgB,sBAAA,EAAE,WAAW,iBAAA,EAAE,UAAU,gBAAA,EAAE,sBAAsB,4BAChF,CAAC;IAEzB,IAAA,KAA8C,UAAU,CAAC,iBAAiB,CAAC,EAA/D,kBAAkB,cAAA,EAAE,SAAS,eAAkC,CAAC;IAElF,IAAM,YAAY,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAEnD,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,UAAU,IAAC,IAAE,EAAE,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,KAAK,EAAE,IAAI,EAAE,KAAK,IACnD,UAAC,KAAK,EAAE,mBAAmB;;QAAK,OAAA,CAC/B,iCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,mBAAY,kBAAkB,CAAE,CAAC;gBACpF,GAAC,MAAM,CAAC,SAAS,IAAG,KAAK,KAAK,UAAU;gBACxC,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,iBAAiB;gBAClD,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,gBAAgB;gBAChD,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,gBAAgB;gBACjD,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,WAAW;oBACtC,EACF,GAAG,EAAE,mBAAmB,EACxB,KAAK;gBACH,GAAC,cAAc,CAAC,sBAAsB,IAAG,UAAG,sBAAsB,OAAI;gBACtE,GAAC,cAAc,CAAC,4BAA4B,IAAG,UAAG,YAAY,OAAI;;YAGpE,oBAAC,UAAU,OAAc;YACxB,kBAAkB,KAAK,QAAQ,IAAI,UAAU,CACtC,CACX;IAlBgC,CAkBhC,CACU,CACd,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,SAAS,cAAc;IACf,IAAA,KACJ,UAAU,CAAC,gBAAgB,CAAC,EADtB,gBAAgB,sBAAA,EAAE,UAAU,gBAAA,EAAE,kBAAkB,wBAAA,EAAE,kBAAkB,wBAAA,EAAE,sBAAsB,4BACtE,CAAC;IAEvB,IAAU,kBAAkB,GAAK,UAAU,CAAC,iBAAiB,CAAC,SAAlC,CAAmC;IAEvE,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,UAAU,IAAC,IAAE,EAAE,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,KAAK,EAAE,IAAI,EAAE,KAAK,IACnD,UAAC,KAAK,EAAE,mBAAmB;;QAAK,OAAA,CAC/B,gDACe,CAAC,gBAAgB,IAAI,kBAAkB,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAChF,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,mBAAY,kBAAkB,CAAE,CAAC;gBAClF,GAAC,MAAM,CAAC,SAAS,IAAG,KAAK,KAAK,UAAU;gBACxC,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,gBAAgB;oBACjD,EACF,GAAG,EAAE,mBAAmB,EACxB,KAAK;gBACH,GAAC,cAAc,CAAC,kBAAkB,IAAG,UAAG,kBAAkB,OAAI;gBAC9D,GAAC,cAAc,CAAC,kBAAkB,IAAG,UAAG,kBAAkB,OAAI;gBAC9D,GAAC,cAAc,CAAC,4BAA4B,IAAG,UAAG,sBAAsB,OAAI;;YAG9E,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAG,kBAAkB,KAAK,MAAM,IAAI,UAAU,CAAO,CAC7F,CACX;IAhBgC,CAgBhC,CACU,CACd,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CACnC,0BAAmC,EACnC,qBAAuE;IAEvE,IAAI,kBAAkB,GAAsC,QAAQ,CAAC;IAErE,IAAI,CAAC,0BAA0B,IAAI,CAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,QAAQ,MAAK,MAAM,EAAE;QAC7E,kBAAkB,GAAG,MAAM,CAAC;KAC7B;IAED,OAAO,kBAAkB,CAAC;AAC5B,CAAC;AACD,UAAU,CAAC,MAAM,GAAG,gBAAgB,CAAC;AACrC,UAAU,CAAC,IAAI,GAAG,cAAc,CAAC;AAEjC,eAAe,UAAU,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport {\n  SplitPanelContext,\n  SplitPanelContextProps,\n  SplitPanelLastInteraction,\n} from '../../internal/context/split-panel-context';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport { Transition } from '../../internal/components/transition';\nimport { useObservedElement } from '../utils/use-observed-element';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * If there is no Split Panel in the AppLayout context then the SplitPanel\n * will pass through the AppLayout children without the context.\n */\nfunction SplitPanel({ children }: React.PropsWithChildren<unknown>) {\n  const {\n    handleSplitPanelClick,\n    handleSplitPanelPreferencesChange,\n    handleSplitPanelResize,\n    isMobile,\n    isSplitPanelForcedPosition,\n    isSplitPanelOpen,\n    setSplitPanelReportedSize,\n    splitPanelPosition,\n    splitPanelSize,\n  } = useContext(AppLayoutContext);\n\n  const [openButtonAriaLabel, setOpenButtonAriaLabel] = useState<undefined | string>(undefined);\n\n  const [splitPanelLastInteraction, setSplitPanelLastInteraction] = useState<undefined | SplitPanelLastInteraction>();\n  useEffectOnUpdate(\n    () => setSplitPanelLastInteraction(isSplitPanelOpen ? { type: 'open' } : { type: 'close' }),\n    [isSplitPanelOpen]\n  );\n  useEffectOnUpdate(() => setSplitPanelLastInteraction({ type: 'position' }), [splitPanelPosition]);\n\n  const splitPanelRef = useRef<HTMLDivElement>(null);\n  const splitPanelHeaderRef = useRef<HTMLDivElement>(null);\n\n  const context: SplitPanelContextProps = {\n    bottomOffset: 0,\n    getMaxHeight: () => document.documentElement.clientHeight - 250,\n    getMaxWidth: () => document.documentElement.clientWidth,\n    getHeader: () => splitPanelHeaderRef.current,\n    isForcedPosition: isSplitPanelForcedPosition,\n    isMobile,\n    isOpen: isSplitPanelOpen,\n    isRefresh: true,\n    leftOffset: 0,\n    onPreferencesChange: handleSplitPanelPreferencesChange,\n    onResize: handleSplitPanelResize,\n    onToggle: handleSplitPanelClick,\n    position: splitPanelPosition,\n    reportSize: setSplitPanelReportedSize,\n    rightOffset: 0,\n    size: splitPanelSize || 0,\n    splitPanelRef,\n    splitPanelHeaderRef,\n    topOffset: 0,\n    openButtonAriaLabel,\n    setOpenButtonAriaLabel,\n    lastInteraction: splitPanelLastInteraction,\n  };\n\n  return <SplitPanelContext.Provider value={{ ...context }}>{children}</SplitPanelContext.Provider>;\n}\n\n/**\n * This is the render function for the SplitPanel when it is in bottom position.\n * The Split Panel container will be another row entry in the grid definition in\n * the Layout component. The start and finish columns will be variable based\n * on the the presence and state of the Navigation and Tools components.\n */\nfunction SplitPanelBottom() {\n  const { disableBodyScroll, isNavigationOpen, isSplitPanelOpen, isToolsOpen, splitPanel, splitPanelReportedSize } =\n    useContext(AppLayoutContext);\n\n  const { position: splitPanelPosition, getHeader } = useContext(SplitPanelContext);\n\n  const headerHeight = useObservedElement(getHeader);\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          className={clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles['is-navigation-open']]: isNavigationOpen,\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n            [styles['is-tools-open']]: isToolsOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${headerHeight}px`,\n          }}\n        >\n          <SplitPanel></SplitPanel>\n          {splitPanelPosition === 'bottom' && splitPanel}\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This is the render function for the SplitPanel when it is side position.\n * The Split Panel will not be within the grid defined in the Layout component\n * but instead a direct child of the Tools component. The width constraints\n * for this position are computed in the Tools component.\n */\nfunction SplitPanelSide() {\n  const { isSplitPanelOpen, splitPanel, splitPanelMaxWidth, splitPanelMinWidth, splitPanelReportedSize } =\n    useContext(AppLayoutContext);\n\n  const { position: splitPanelPosition } = useContext(SplitPanelContext);\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          aria-hidden={!isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false}\n          className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,\n            [customCssProps.splitPanelMinWidth]: `${splitPanelMinWidth}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedSize}px`,\n          }}\n        >\n          <div className={clsx(styles['animated-content'])}>{splitPanelPosition === 'side' && splitPanel}</div>\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This logic will determine what the Split Panel position should be. It reconciles the possibility\n * of being in forced position with the current selected position in the settings.\n */\nexport function getSplitPanelPosition(\n  isSplitPanelForcedPosition: boolean,\n  splitPanelPreferences: AppLayoutProps.SplitPanelPreferences | undefined\n) {\n  let splitPanelPosition: AppLayoutProps.SplitPanelPosition = 'bottom';\n\n  if (!isSplitPanelForcedPosition && splitPanelPreferences?.position === 'side') {\n    splitPanelPosition = 'side';\n  }\n\n  return splitPanelPosition;\n}\nSplitPanel.Bottom = SplitPanelBottom;\nSplitPanel.Side = SplitPanelSide;\n\nexport default SplitPanel;\n"]}
+{"version":3,"file":"split-panel.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport {\n  SplitPanelContext,\n  SplitPanelContextProps,\n  SplitPanelLastInteraction,\n} from '../../internal/context/split-panel-context';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport { Transition } from '../../internal/components/transition';\nimport { useObservedElement } from '../utils/use-observed-element';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * If there is no Split Panel in the AppLayout context then the SplitPanel\n * will pass through the AppLayout children without the context.\n */\nfunction SplitPanel({ children }: React.PropsWithChildren<unknown>) {\n  const {\n    handleSplitPanelClick,\n    handleSplitPanelPreferencesChange,\n    handleSplitPanelResize,\n    isMobile,\n    isSplitPanelForcedPosition,\n    isSplitPanelOpen,\n    setSplitPanelReportedSize,\n    splitPanelPosition,\n    splitPanelSize,\n    headerHeight,\n    footerHeight,\n  } = useContext(AppLayoutContext);\n\n  const [openButtonAriaLabel, setOpenButtonAriaLabel] = useState<undefined | string>(undefined);\n\n  const [splitPanelLastInteraction, setSplitPanelLastInteraction] = useState<undefined | SplitPanelLastInteraction>();\n  useEffectOnUpdate(\n    () => setSplitPanelLastInteraction(isSplitPanelOpen ? { type: 'open' } : { type: 'close' }),\n    [isSplitPanelOpen]\n  );\n  useEffectOnUpdate(() => setSplitPanelLastInteraction({ type: 'position' }), [splitPanelPosition]);\n\n  const splitPanelRef = useRef<HTMLDivElement>(null);\n  const splitPanelHeaderRef = useRef<HTMLDivElement>(null);\n\n  const context: SplitPanelContextProps = {\n    bottomOffset: 0,\n    getMaxHeight: () => {\n      const availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;\n      // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n      return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n    },\n    getMaxWidth: () => document.documentElement.clientWidth,\n    getHeader: () => splitPanelHeaderRef.current,\n    isForcedPosition: isSplitPanelForcedPosition,\n    isMobile,\n    isOpen: isSplitPanelOpen,\n    isRefresh: true,\n    leftOffset: 0,\n    onPreferencesChange: handleSplitPanelPreferencesChange,\n    onResize: handleSplitPanelResize,\n    onToggle: handleSplitPanelClick,\n    position: splitPanelPosition,\n    reportSize: setSplitPanelReportedSize,\n    rightOffset: 0,\n    size: splitPanelSize || 0,\n    splitPanelRef,\n    splitPanelHeaderRef,\n    topOffset: 0,\n    openButtonAriaLabel,\n    setOpenButtonAriaLabel,\n    lastInteraction: splitPanelLastInteraction,\n  };\n\n  return <SplitPanelContext.Provider value={{ ...context }}>{children}</SplitPanelContext.Provider>;\n}\n\n/**\n * This is the render function for the SplitPanel when it is in bottom position.\n * The Split Panel container will be another row entry in the grid definition in\n * the Layout component. The start and finish columns will be variable based\n * on the the presence and state of the Navigation and Tools components.\n */\nfunction SplitPanelBottom() {\n  const { disableBodyScroll, isNavigationOpen, isSplitPanelOpen, isToolsOpen, splitPanel, splitPanelReportedSize } =\n    useContext(AppLayoutContext);\n\n  const { position: splitPanelPosition, getHeader } = useContext(SplitPanelContext);\n\n  const headerHeight = useObservedElement(getHeader);\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          className={clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles['is-navigation-open']]: isNavigationOpen,\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n            [styles['is-tools-open']]: isToolsOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${headerHeight}px`,\n          }}\n        >\n          <SplitPanel></SplitPanel>\n          {splitPanelPosition === 'bottom' && splitPanel}\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This is the render function for the SplitPanel when it is side position.\n * The Split Panel will not be within the grid defined in the Layout component\n * but instead a direct child of the Tools component. The width constraints\n * for this position are computed in the Tools component.\n */\nfunction SplitPanelSide() {\n  const { isSplitPanelOpen, splitPanel, splitPanelMaxWidth, splitPanelMinWidth, splitPanelReportedSize } =\n    useContext(AppLayoutContext);\n\n  const { position: splitPanelPosition } = useContext(SplitPanelContext);\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          aria-hidden={!isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false}\n          className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,\n            [customCssProps.splitPanelMinWidth]: `${splitPanelMinWidth}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedSize}px`,\n          }}\n        >\n          <div className={clsx(styles['animated-content'])}>{splitPanelPosition === 'side' && splitPanel}</div>\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This logic will determine what the Split Panel position should be. It reconciles the possibility\n * of being in forced position with the current selected position in the settings.\n */\nexport function getSplitPanelPosition(\n  isSplitPanelForcedPosition: boolean,\n  splitPanelPreferences: AppLayoutProps.SplitPanelPreferences | undefined\n) {\n  let splitPanelPosition: AppLayoutProps.SplitPanelPosition = 'bottom';\n\n  if (!isSplitPanelForcedPosition && splitPanelPreferences?.position === 'side') {\n    splitPanelPosition = 'side';\n  }\n\n  return splitPanelPosition;\n}\nSplitPanel.Bottom = SplitPanelBottom;\nSplitPanel.Side = SplitPanelSide;\n\nexport default SplitPanel;\n"]}

package/lib/internal/template/app-layout/visual-refresh/styles.css.js

@@ -1,64 +1,64 @@
 
     import './styles.scoped.css';
     export default {
-  "appbar": "awsui_appbar_hyvsj_18us6_93",
-  "appbar-nav": "awsui_appbar-nav_hyvsj_18us6_117",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_18us6_121",
-  "appbar-tools": "awsui_appbar-tools_hyvsj_18us6_125",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_18us6_160",
-  "has-notifications-content": "awsui_has-notifications-content_hyvsj_18us6_167",
-  "has-header": "awsui_has-header_hyvsj_18us6_173",
-  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_18us6_173",
-  "content-type-wizard": "awsui_content-type-wizard_hyvsj_18us6_174",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_18us6_177",
-  "content-type-table": "awsui_content-type-table_hyvsj_18us6_178",
-  "background": "awsui_background_hyvsj_18us6_213",
-  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_18us6_216",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_18us6_228",
-  "overlap": "awsui_overlap_hyvsj_18us6_234",
-  "content": "awsui_content_hyvsj_18us6_174",
-  "layout": "awsui_layout_hyvsj_18us6_322",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_18us6_404",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_18us6_431",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_18us6_434",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_18us6_438",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_18us6_452",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_18us6_452",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_18us6_464",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_18us6_467",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_18us6_482",
-  "container": "awsui_container_hyvsj_18us6_490",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_18us6_507",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_18us6_512",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_18us6_515",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_18us6_515",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_18us6_515",
-  "content-type-default": "awsui_content-type-default_hyvsj_18us6_535",
-  "content-type-form": "awsui_content-type-form_hyvsj_18us6_535",
-  "unfocusable": "awsui_unfocusable_hyvsj_18us6_576",
-  "navigation-container": "awsui_navigation-container_hyvsj_18us6_584",
-  "show-navigation": "awsui_show-navigation_hyvsj_18us6_608",
-  "animating": "awsui_animating_hyvsj_18us6_630",
-  "showButtons": "awsui_showButtons_hyvsj_18us6_1",
-  "navigation": "awsui_navigation_hyvsj_18us6_584",
-  "openNavigation": "awsui_openNavigation_hyvsj_18us6_1",
-  "animated-content": "awsui_animated-content_hyvsj_18us6_690",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_18us6_699",
-  "notifications": "awsui_notifications_hyvsj_18us6_216",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_18us6_766",
-  "position-bottom": "awsui_position-bottom_hyvsj_18us6_801",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_18us6_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_18us6_830",
-  "position-side": "awsui_position-side_hyvsj_18us6_857",
-  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_18us6_1",
-  "tools-container": "awsui_tools-container_hyvsj_18us6_894",
-  "tools": "awsui_tools_hyvsj_18us6_894",
-  "openTools": "awsui_openTools_hyvsj_18us6_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_18us6_977",
-  "hide-tools": "awsui_hide-tools_hyvsj_18us6_987",
-  "show-tools": "awsui_show-tools_hyvsj_18us6_999",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_18us6_977",
-  "trigger": "awsui_trigger_hyvsj_18us6_1056",
-  "selected": "awsui_selected_hyvsj_18us6_1094"
+  "appbar": "awsui_appbar_hyvsj_1l3mr_93",
+  "appbar-nav": "awsui_appbar-nav_hyvsj_1l3mr_117",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1l3mr_121",
+  "appbar-tools": "awsui_appbar-tools_hyvsj_1l3mr_125",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1l3mr_160",
+  "has-notifications-content": "awsui_has-notifications-content_hyvsj_1l3mr_167",
+  "has-header": "awsui_has-header_hyvsj_1l3mr_173",
+  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_1l3mr_173",
+  "content-type-wizard": "awsui_content-type-wizard_hyvsj_1l3mr_174",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_1l3mr_177",
+  "content-type-table": "awsui_content-type-table_hyvsj_1l3mr_178",
+  "background": "awsui_background_hyvsj_1l3mr_213",
+  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_1l3mr_216",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1l3mr_228",
+  "overlap": "awsui_overlap_hyvsj_1l3mr_234",
+  "content": "awsui_content_hyvsj_1l3mr_174",
+  "layout": "awsui_layout_hyvsj_1l3mr_322",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1l3mr_404",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1l3mr_431",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1l3mr_434",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_1l3mr_438",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_1l3mr_452",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1l3mr_452",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1l3mr_464",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1l3mr_467",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1l3mr_482",
+  "container": "awsui_container_hyvsj_1l3mr_490",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1l3mr_507",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1l3mr_512",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_1l3mr_515",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1l3mr_515",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1l3mr_515",
+  "content-type-default": "awsui_content-type-default_hyvsj_1l3mr_535",
+  "content-type-form": "awsui_content-type-form_hyvsj_1l3mr_535",
+  "unfocusable": "awsui_unfocusable_hyvsj_1l3mr_576",
+  "navigation-container": "awsui_navigation-container_hyvsj_1l3mr_584",
+  "show-navigation": "awsui_show-navigation_hyvsj_1l3mr_608",
+  "animating": "awsui_animating_hyvsj_1l3mr_630",
+  "showButtons": "awsui_showButtons_hyvsj_1l3mr_1",
+  "navigation": "awsui_navigation_hyvsj_1l3mr_584",
+  "openNavigation": "awsui_openNavigation_hyvsj_1l3mr_1",
+  "animated-content": "awsui_animated-content_hyvsj_1l3mr_690",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_1l3mr_699",
+  "notifications": "awsui_notifications_hyvsj_1l3mr_216",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1l3mr_766",
+  "position-bottom": "awsui_position-bottom_hyvsj_1l3mr_801",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1l3mr_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_1l3mr_830",
+  "position-side": "awsui_position-side_hyvsj_1l3mr_857",
+  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_1l3mr_1",
+  "tools-container": "awsui_tools-container_hyvsj_1l3mr_894",
+  "tools": "awsui_tools_hyvsj_1l3mr_894",
+  "openTools": "awsui_openTools_hyvsj_1l3mr_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1l3mr_977",
+  "hide-tools": "awsui_hide-tools_hyvsj_1l3mr_987",
+  "show-tools": "awsui_show-tools_hyvsj_1l3mr_999",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_1l3mr_977",
+  "trigger": "awsui_trigger_hyvsj_1l3mr_1056",
+  "selected": "awsui_selected_hyvsj_1l3mr_1094"
 };