@cloudscape-design/components 3.0.619 → 3.0.621

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/annotation-context/annotation/styles.css.js +24 -24
  2. package/annotation-context/annotation/styles.scoped.css +31 -31
  3. package/annotation-context/annotation/styles.selectors.js +24 -24
  4. package/app-layout/classic.d.ts.map +1 -1
  5. package/app-layout/classic.js +5 -16
  6. package/app-layout/classic.js.map +1 -1
  7. package/app-layout/content-wrapper/index.d.ts +1 -0
  8. package/app-layout/content-wrapper/index.d.ts.map +1 -1
  9. package/app-layout/content-wrapper/index.js +3 -3
  10. package/app-layout/content-wrapper/index.js.map +1 -1
  11. package/app-layout/notifications/styles.css.js +3 -3
  12. package/app-layout/notifications/styles.scoped.css +7 -7
  13. package/app-layout/notifications/styles.selectors.js +3 -3
  14. package/app-layout/utils/sticky-offsets.d.ts +4 -0
  15. package/app-layout/utils/sticky-offsets.d.ts.map +1 -0
  16. package/app-layout/utils/sticky-offsets.js +10 -0
  17. package/app-layout/utils/sticky-offsets.js.map +1 -0
  18. package/app-layout/visual-refresh/context.d.ts.map +1 -1
  19. package/app-layout/visual-refresh/context.js +1 -5
  20. package/app-layout/visual-refresh/context.js.map +1 -1
  21. package/app-layout/visual-refresh/main.d.ts.map +1 -1
  22. package/app-layout/visual-refresh/main.js +6 -4
  23. package/app-layout/visual-refresh/main.js.map +1 -1
  24. package/app-layout/visual-refresh/styles.css.js +81 -81
  25. package/app-layout/visual-refresh/styles.scoped.css +258 -294
  26. package/app-layout/visual-refresh/styles.selectors.js +81 -81
  27. package/container/use-sticky-header.d.ts +1 -5
  28. package/container/use-sticky-header.d.ts.map +1 -1
  29. package/container/use-sticky-header.js +7 -34
  30. package/container/use-sticky-header.js.map +1 -1
  31. package/flashbar/styles.css.js +47 -47
  32. package/flashbar/styles.scoped.css +171 -171
  33. package/flashbar/styles.selectors.js +47 -47
  34. package/header/internal.d.ts.map +1 -1
  35. package/header/internal.js +3 -1
  36. package/header/internal.js.map +1 -1
  37. package/header/styles.css.js +35 -34
  38. package/header/styles.scoped.css +55 -52
  39. package/header/styles.selectors.js +35 -34
  40. package/internal/components/dropdown/styles.css.js +20 -20
  41. package/internal/components/dropdown/styles.scoped.css +41 -41
  42. package/internal/components/dropdown/styles.selectors.js +20 -20
  43. package/internal/context/app-layout-context.d.ts +0 -3
  44. package/internal/context/app-layout-context.d.ts.map +1 -1
  45. package/internal/context/app-layout-context.js +1 -5
  46. package/internal/context/app-layout-context.js.map +1 -1
  47. package/internal/environment.js +1 -1
  48. package/internal/environment.json +1 -1
  49. package/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  50. package/internal/generated/custom-css-properties/index.js +43 -44
  51. package/internal/generated/custom-css-properties/index.js.map +1 -1
  52. package/internal/manifest.json +1 -1
  53. package/internal/styles/global-vars.d.ts +6 -0
  54. package/internal/styles/global-vars.d.ts.map +1 -0
  55. package/internal/styles/global-vars.js +8 -0
  56. package/internal/styles/global-vars.js.map +1 -0
  57. package/mixed-line-bar-chart/bar-series.d.ts +3 -3
  58. package/mixed-line-bar-chart/bar-series.d.ts.map +1 -1
  59. package/mixed-line-bar-chart/bar-series.js +61 -17
  60. package/mixed-line-bar-chart/bar-series.js.map +1 -1
  61. package/mixed-line-bar-chart/create-one-side-rounded-rect-path.d.ts +7 -0
  62. package/mixed-line-bar-chart/create-one-side-rounded-rect-path.d.ts.map +1 -0
  63. package/mixed-line-bar-chart/create-one-side-rounded-rect-path.js +33 -0
  64. package/mixed-line-bar-chart/create-one-side-rounded-rect-path.js.map +1 -0
  65. package/mixed-line-bar-chart/data-series.d.ts.map +1 -1
  66. package/mixed-line-bar-chart/data-series.js +5 -5
  67. package/mixed-line-bar-chart/data-series.js.map +1 -1
  68. package/mixed-line-bar-chart/utils.d.ts +2 -9
  69. package/mixed-line-bar-chart/utils.d.ts.map +1 -1
  70. package/mixed-line-bar-chart/utils.js +19 -26
  71. package/mixed-line-bar-chart/utils.js.map +1 -1
  72. package/package.json +1 -1
  73. package/spinner/styles.css.js +13 -13
  74. package/spinner/styles.scoped.css +39 -39
  75. package/spinner/styles.selectors.js +13 -13
  76. package/split-panel/implementation.d.ts.map +1 -1
  77. package/split-panel/implementation.js +7 -7
  78. package/split-panel/implementation.js.map +1 -1
  79. package/split-panel/interfaces.d.ts +1 -0
  80. package/split-panel/interfaces.d.ts.map +1 -1
  81. package/split-panel/interfaces.js.map +1 -1
  82. package/split-panel/side.d.ts +1 -1
  83. package/split-panel/side.d.ts.map +1 -1
  84. package/split-panel/side.js +2 -5
  85. package/split-panel/side.js.map +1 -1
  86. package/table/sticky-scrollbar/sticky-scrollbar.d.ts.map +1 -1
  87. package/table/sticky-scrollbar/sticky-scrollbar.js +1 -7
  88. package/table/sticky-scrollbar/sticky-scrollbar.js.map +1 -1
  89. package/table/sticky-scrollbar/use-sticky-scrollbar.d.ts +2 -2
  90. package/table/sticky-scrollbar/use-sticky-scrollbar.d.ts.map +1 -1
  91. package/table/sticky-scrollbar/use-sticky-scrollbar.js +12 -30
  92. package/table/sticky-scrollbar/use-sticky-scrollbar.js.map +1 -1
  93. package/theming/index.d.ts +5 -0
  94. package/theming/index.d.ts.map +1 -1
  95. package/theming/index.js +8 -1
  96. package/theming/index.js.map +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"use-sticky-scrollbar.js","sourceRoot":"","sources":["../../../../src/table/sticky-scrollbar/use-sticky-scrollbar.ts"],"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 { ResizeObserver } from '@juggle/resize-observer';\nimport { RefObject, useEffect, useState } from 'react';\nimport styles from './styles.css.js';\nimport { getContainingBlock, supportsStickyPosition } from '../../internal/utils/dom';\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers';\nimport { browserScrollbarSize } from '../../internal/utils/browser-scrollbar-size';\nimport { getLogicalBoundingClientRect } from '../../internal/direction.js';\n\nexport const updatePosition = (\n tableEl: HTMLElement | null,\n wrapperEl: HTMLElement | null,\n scrollbarEl: HTMLElement | null,\n scrollbarContentEl: HTMLElement | null,\n hasContainingBlock: boolean,\n consideredFooterHeight: number\n) => {\n if (!tableEl || !scrollbarEl || !wrapperEl) {\n return;\n }\n\n const { inlineSize: tableInlineSize } = getLogicalBoundingClientRect(tableEl);\n const { inlineSize: wrapperInlineSize } = getLogicalBoundingClientRect(wrapperEl);\n\n // using 15 px as a height of transparent scrollbar on mac\n const scrollbarHeight = browserScrollbarSize().height;\n const areaIsScrollable = tableInlineSize > wrapperInlineSize;\n\n if (!areaIsScrollable) {\n scrollbarEl.classList.remove(styles['sticky-scrollbar-visible']);\n } else {\n // when scrollbar is not displayed scrollLeft property cannot be set by useScrollSync\n // that's why syncing it separately\n if (!scrollbarEl.classList.contains(styles['sticky-scrollbar-visible'])) {\n requestAnimationFrame(() => {\n /**\n * We don't need to use getScrollInlineStart here instead of scrollLeft because\n * the negative value isn't being used in computation.\n */\n scrollbarEl.scrollLeft = wrapperEl.scrollLeft;\n });\n }\n\n scrollbarEl.classList.add(styles['sticky-scrollbar-visible']);\n if (!scrollbarHeight) {\n /* istanbul ignore next: covered by screenshot tests */\n scrollbarEl.classList.add(styles['sticky-scrollbar-native-invisible']);\n }\n }\n\n if (scrollbarHeight && scrollbarEl && scrollbarContentEl) {\n scrollbarEl.style.blockSize = `${scrollbarHeight}px`;\n scrollbarContentEl.style.blockSize = `${scrollbarHeight}px`;\n }\n\n if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {\n const wrapperElRect = getLogicalBoundingClientRect(wrapperEl);\n const tableElRect = getLogicalBoundingClientRect(tableEl);\n scrollbarEl.style.inlineSize = `${wrapperElRect.inlineSize}px`;\n scrollbarContentEl.style.inlineSize = `${tableElRect.inlineSize}px`;\n\n // when using sticky scrollbars in containers\n // we agreed to ignore dynamic bottom calculations for footer overlap\n scrollbarEl.style.insetBlockEnd = hasContainingBlock ? '0px' : `${consideredFooterHeight}px`;\n }\n};\n\nexport function useStickyScrollbar(\n scrollbarRef: RefObject<HTMLDivElement>,\n scrollbarContentRef: RefObject<HTMLDivElement>,\n tableRef: RefObject<HTMLTableElement>,\n wrapperRef: RefObject<HTMLDivElement>,\n footerHeight: number,\n offsetScrollbar: boolean\n) {\n // We don't take into account containing-block calculations because that would\n // unnecessarily overcomplicate the position logic. For now, we assume that a\n // containing block, if present, is below the app layout and above the overflow\n // parent, which is a pretty safe assumption.\n const [hasContainingBlock, setHasContainingBlock] = useState(false);\n // We don't take into account footer height when the overflow parent is child of document body.\n // Because in this case, we think the footer is outside the overflow parent.\n const [hasOverflowParent, setHasOverflowParent] = useState(false);\n const consideredFooterHeight = hasContainingBlock || hasOverflowParent ? 0 : footerHeight;\n\n const wrapperEl = wrapperRef.current;\n useEffect(() => {\n if (wrapperEl && supportsStickyPosition()) {\n setHasContainingBlock(!!getContainingBlock(wrapperEl));\n setHasOverflowParent(!!getOverflowParents(wrapperEl)[0]);\n }\n }, [wrapperEl]);\n\n // Update scrollbar position wrapper or table size change.\n useEffect(() => {\n if (supportsStickyPosition() && wrapperRef.current && tableRef.current) {\n const observer = new ResizeObserver(() => {\n if (scrollbarContentRef.current) {\n updatePosition(\n tableRef.current,\n wrapperRef.current,\n scrollbarRef.current,\n scrollbarContentRef.current,\n hasContainingBlock,\n consideredFooterHeight\n );\n }\n });\n // Scrollbar width must be in sync with wrapper width.\n observer.observe(wrapperRef.current);\n // Scrollbar content width must be in sync with table width.\n observer.observe(tableRef.current);\n return () => {\n observer.disconnect();\n };\n }\n }, [\n scrollbarContentRef,\n scrollbarRef,\n tableRef,\n wrapperRef,\n consideredFooterHeight,\n hasContainingBlock,\n offsetScrollbar,\n ]);\n\n // Update scrollbar position when window resizes (vertically).\n useEffect(() => {\n if (supportsStickyPosition()) {\n const resizeHandler = () => {\n updatePosition(\n tableRef.current,\n wrapperRef.current,\n scrollbarRef.current,\n scrollbarContentRef.current,\n hasContainingBlock,\n consideredFooterHeight\n );\n };\n resizeHandler();\n window.addEventListener('resize', resizeHandler);\n return () => {\n window.removeEventListener('resize', resizeHandler);\n };\n }\n }, [tableRef, wrapperRef, scrollbarRef, scrollbarContentRef, hasContainingBlock, consideredFooterHeight]);\n}\n"]}
1
+ {"version":3,"file":"use-sticky-scrollbar.js","sourceRoot":"","sources":["../../../../src/table/sticky-scrollbar/use-sticky-scrollbar.ts"],"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 { ResizeObserver } from '@juggle/resize-observer';\nimport { RefObject, useEffect, useState } from 'react';\nimport styles from './styles.css.js';\nimport { getContainingBlock, supportsStickyPosition } from '../../internal/utils/dom';\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers';\nimport { browserScrollbarSize } from '../../internal/utils/browser-scrollbar-size';\nimport globalVars from '../../internal/styles/global-vars';\nimport { getLogicalBoundingClientRect } from '../../internal/direction.js';\n\nexport const updatePosition = (\n tableEl: HTMLElement | null,\n wrapperEl: HTMLElement | null,\n scrollbarEl: HTMLElement | null,\n scrollbarContentEl: HTMLElement | null,\n inScrollableContainer: boolean\n) => {\n if (!tableEl || !scrollbarEl || !wrapperEl) {\n return;\n }\n\n const { inlineSize: tableInlineSize } = getLogicalBoundingClientRect(tableEl);\n const { inlineSize: wrapperInlineSize } = getLogicalBoundingClientRect(wrapperEl);\n\n // using 15 px as a height of transparent scrollbar on mac\n const scrollbarHeight = browserScrollbarSize().height;\n const areaIsScrollable = tableInlineSize > wrapperInlineSize;\n\n if (!areaIsScrollable) {\n scrollbarEl.classList.remove(styles['sticky-scrollbar-visible']);\n } else {\n // when scrollbar is not displayed scrollLeft property cannot be set by useScrollSync\n // that's why syncing it separately\n if (!scrollbarEl.classList.contains(styles['sticky-scrollbar-visible'])) {\n requestAnimationFrame(() => {\n scrollbarEl.scrollLeft = wrapperEl.scrollLeft;\n });\n }\n\n scrollbarEl.classList.add(styles['sticky-scrollbar-visible']);\n if (!scrollbarHeight) {\n /* istanbul ignore next: covered by screenshot tests */\n scrollbarEl.classList.add(styles['sticky-scrollbar-native-invisible']);\n }\n }\n\n if (scrollbarHeight && scrollbarEl && scrollbarContentEl) {\n scrollbarEl.style.blockSize = `${scrollbarHeight}px`;\n scrollbarContentEl.style.blockSize = `${scrollbarHeight}px`;\n }\n\n if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {\n const wrapperElRect = getLogicalBoundingClientRect(wrapperEl);\n const tableElRect = getLogicalBoundingClientRect(tableEl);\n scrollbarEl.style.inlineSize = `${wrapperElRect.inlineSize}px`;\n scrollbarContentEl.style.inlineSize = `${tableElRect.inlineSize}px`;\n\n // when using sticky scrollbars in containers\n // we agreed to ignore dynamic bottom calculations for footer overlap\n scrollbarEl.style.insetBlockEnd = inScrollableContainer\n ? '0px'\n : `var(${globalVars.stickyVerticalBottomOffset}, 0px)`;\n }\n};\n\nexport function useStickyScrollbar(\n scrollbarRef: RefObject<HTMLDivElement>,\n scrollbarContentRef: RefObject<HTMLDivElement>,\n tableRef: RefObject<HTMLTableElement>,\n wrapperRef: RefObject<HTMLDivElement>,\n offsetScrollbar: boolean\n) {\n const [inScrollableContainer, setInScrollableContainer] = useState(false);\n\n const wrapperEl = wrapperRef.current;\n useEffect(() => {\n if (wrapperEl && supportsStickyPosition()) {\n setInScrollableContainer(!!getContainingBlock(wrapperEl) || !!getOverflowParents(wrapperEl)[0]);\n }\n }, [wrapperEl]);\n\n // Update scrollbar position wrapper or table size change.\n useEffect(() => {\n if (supportsStickyPosition() && wrapperRef.current && tableRef.current) {\n const observer = new ResizeObserver(() => {\n if (scrollbarContentRef.current) {\n updatePosition(\n tableRef.current,\n wrapperRef.current,\n scrollbarRef.current,\n scrollbarContentRef.current,\n inScrollableContainer\n );\n }\n });\n // Scrollbar width must be in sync with wrapper width.\n observer.observe(wrapperRef.current);\n // Scrollbar content width must be in sync with table width.\n observer.observe(tableRef.current);\n return () => {\n observer.disconnect();\n };\n }\n }, [scrollbarContentRef, scrollbarRef, tableRef, wrapperRef, inScrollableContainer, offsetScrollbar]);\n\n // Update scrollbar position when window resizes (vertically).\n useEffect(() => {\n if (supportsStickyPosition()) {\n const resizeHandler = () => {\n updatePosition(\n tableRef.current,\n wrapperRef.current,\n scrollbarRef.current,\n scrollbarContentRef.current,\n inScrollableContainer\n );\n };\n resizeHandler();\n window.addEventListener('resize', resizeHandler);\n return () => {\n window.removeEventListener('resize', resizeHandler);\n };\n }\n }, [tableRef, wrapperRef, scrollbarRef, scrollbarContentRef, inScrollableContainer]);\n}\n"]}
@@ -8,4 +8,9 @@ export interface ApplyThemeResult {
8
8
  reset: () => void;
9
9
  }
10
10
  export declare function applyTheme({ theme, baseThemeId }: ApplyThemeParams): ApplyThemeResult;
11
+ export interface GenerateThemeStylesheetParams {
12
+ theme: Theme;
13
+ baseThemeId?: string;
14
+ }
15
+ export declare function generateThemeStylesheet({ theme, baseThemeId }: GenerateThemeStylesheetParams): string;
11
16
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theming/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAU,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,MAAM,KAAK,GAAG,aAAa,CAAC;AAClC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,gBAAgB,GAAG,gBAAgB,CAMrF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theming/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAU,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,MAAM,KAAK,GAAG,aAAa,CAAC;AAClC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,gBAAgB,GAAG,gBAAgB,CAMrF;AAED,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,uBAAuB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,6BAA6B,GAAG,MAAM,CAMrG"}
package/theming/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
- import { applyTheme as coreApplyTheme } from '@cloudscape-design/theming-runtime';
3
+ import { applyTheme as coreApplyTheme, generateThemeStylesheet as coreGenerateThemeStylesheet, } from '@cloudscape-design/theming-runtime';
4
4
  import { preset } from '../internal/generated/theming';
5
5
  export function applyTheme({ theme, baseThemeId }) {
6
6
  return coreApplyTheme({
@@ -9,4 +9,11 @@ export function applyTheme({ theme, baseThemeId }) {
9
9
  baseThemeId,
10
10
  });
11
11
  }
12
+ export function generateThemeStylesheet({ theme, baseThemeId }) {
13
+ return coreGenerateThemeStylesheet({
14
+ override: theme,
15
+ preset,
16
+ baseThemeId,
17
+ });
18
+ }
12
19
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theming/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,EAAE,MAAM,EAAiB,MAAM,+BAA+B,CAAC;AAYtE,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAoB;IACjE,OAAO,cAAc,CAAC;QACpB,QAAQ,EAAE,KAAK;QACf,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { applyTheme as coreApplyTheme } from '@cloudscape-design/theming-runtime';\nimport { preset, TypedOverride } from '../internal/generated/theming';\n\nexport type Theme = TypedOverride;\nexport interface ApplyThemeParams {\n theme: Theme;\n baseThemeId?: string;\n}\n\nexport interface ApplyThemeResult {\n reset: () => void;\n}\n\nexport function applyTheme({ theme, baseThemeId }: ApplyThemeParams): ApplyThemeResult {\n return coreApplyTheme({\n override: theme,\n preset,\n baseThemeId,\n });\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theming/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EACL,UAAU,IAAI,cAAc,EAC5B,uBAAuB,IAAI,2BAA2B,GACvD,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAiB,MAAM,+BAA+B,CAAC;AAYtE,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAoB;IACjE,OAAO,cAAc,CAAC;QACpB,QAAQ,EAAE,KAAK;QACf,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;AACL,CAAC;AAOD,MAAM,UAAU,uBAAuB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAiC;IAC3F,OAAO,2BAA2B,CAAC;QACjC,QAAQ,EAAE,KAAK;QACf,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport {\n applyTheme as coreApplyTheme,\n generateThemeStylesheet as coreGenerateThemeStylesheet,\n} from '@cloudscape-design/theming-runtime';\nimport { preset, TypedOverride } from '../internal/generated/theming';\n\nexport type Theme = TypedOverride;\nexport interface ApplyThemeParams {\n theme: Theme;\n baseThemeId?: string;\n}\n\nexport interface ApplyThemeResult {\n reset: () => void;\n}\n\nexport function applyTheme({ theme, baseThemeId }: ApplyThemeParams): ApplyThemeResult {\n return coreApplyTheme({\n override: theme,\n preset,\n baseThemeId,\n });\n}\n\nexport interface GenerateThemeStylesheetParams {\n theme: Theme;\n baseThemeId?: string;\n}\n\nexport function generateThemeStylesheet({ theme, baseThemeId }: GenerateThemeStylesheetParams): string {\n return coreGenerateThemeStylesheet({\n override: theme,\n preset,\n baseThemeId,\n });\n}\n"]}