@cloudscape-design/components-themeable 3.0.1310 → 3.0.1312

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 (153) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/app-layout/visual-refresh/drawers.scss +16 -0
  3. package/lib/internal/scss/app-layout/visual-refresh/navigation.scss +1 -1
  4. package/lib/internal/scss/app-layout/visual-refresh/tools.scss +4 -0
  5. package/lib/internal/scss/app-layout/visual-refresh-toolbar/drawer/styles.scss +1 -1
  6. package/lib/internal/scss/app-layout/visual-refresh-toolbar/navigation/styles.scss +1 -1
  7. package/lib/internal/scss/button-dropdown/styles.scss +4 -0
  8. package/lib/internal/scss/expandable-section/styles.scss +17 -0
  9. package/lib/internal/scss/internal/components/button-trigger/styles.scss +7 -0
  10. package/lib/internal/scss/internal/components/drag-handle/styles.scss +5 -1
  11. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
  12. package/lib/internal/scss/status-indicator/styles.scss +36 -0
  13. package/lib/internal/scss/table/header-cell/styles.scss +1 -1
  14. package/lib/internal/scss/table/styles.scss +6 -0
  15. package/lib/internal/scss/tree-view/tree-item/styles.scss +10 -0
  16. package/lib/internal/template/app-layout/runtime-drawer/index.js +1 -1
  17. package/lib/internal/template/app-layout/runtime-drawer/index.js.map +1 -1
  18. package/lib/internal/template/app-layout/visual-refresh/drawers.d.ts.map +1 -1
  19. package/lib/internal/template/app-layout/visual-refresh/drawers.js +3 -0
  20. package/lib/internal/template/app-layout/visual-refresh/drawers.js.map +1 -1
  21. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +87 -86
  22. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +176 -164
  23. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +87 -86
  24. package/lib/internal/template/app-layout/visual-refresh/tools.d.ts.map +1 -1
  25. package/lib/internal/template/app-layout/visual-refresh/tools.js +2 -0
  26. package/lib/internal/template/app-layout/visual-refresh/tools.js.map +1 -1
  27. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +32 -32
  28. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +84 -84
  29. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +32 -32
  30. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -4
  31. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +6 -6
  32. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -4
  33. package/lib/internal/template/breadcrumb-group/implementation.d.ts.map +1 -1
  34. package/lib/internal/template/breadcrumb-group/implementation.js +2 -2
  35. package/lib/internal/template/breadcrumb-group/implementation.js.map +1 -1
  36. package/lib/internal/template/breadcrumb-group/item/item.d.ts.map +1 -1
  37. package/lib/internal/template/breadcrumb-group/item/item.js +2 -1
  38. package/lib/internal/template/breadcrumb-group/item/item.js.map +1 -1
  39. package/lib/internal/template/button/internal.d.ts +3 -0
  40. package/lib/internal/template/button/internal.d.ts.map +1 -1
  41. package/lib/internal/template/button/internal.js +2 -2
  42. package/lib/internal/template/button/internal.js.map +1 -1
  43. package/lib/internal/template/button-dropdown/internal.d.ts.map +1 -1
  44. package/lib/internal/template/button-dropdown/internal.js +4 -3
  45. package/lib/internal/template/button-dropdown/internal.js.map +1 -1
  46. package/lib/internal/template/button-dropdown/styles.css.js +22 -21
  47. package/lib/internal/template/button-dropdown/styles.scoped.css +33 -29
  48. package/lib/internal/template/button-dropdown/styles.selectors.js +22 -21
  49. package/lib/internal/template/button-group/icon-toggle-button-item.js +1 -1
  50. package/lib/internal/template/button-group/icon-toggle-button-item.js.map +1 -1
  51. package/lib/internal/template/dropdown/internal.d.ts.map +1 -1
  52. package/lib/internal/template/dropdown/internal.js +14 -2
  53. package/lib/internal/template/dropdown/internal.js.map +1 -1
  54. package/lib/internal/template/expandable-section/expandable-section-header.d.ts.map +1 -1
  55. package/lib/internal/template/expandable-section/expandable-section-header.js +5 -5
  56. package/lib/internal/template/expandable-section/expandable-section-header.js.map +1 -1
  57. package/lib/internal/template/expandable-section/styles.css.js +36 -35
  58. package/lib/internal/template/expandable-section/styles.scoped.css +81 -66
  59. package/lib/internal/template/expandable-section/styles.selectors.js +36 -35
  60. package/lib/internal/template/icon/generated/icons.d.ts +1 -0
  61. package/lib/internal/template/icon/generated/icons.d.ts.map +1 -1
  62. package/lib/internal/template/icon/generated/icons.js +2 -0
  63. package/lib/internal/template/icon/generated/icons.js.map +1 -1
  64. package/lib/internal/template/icon-provider/interfaces.d.ts +1 -1
  65. package/lib/internal/template/icon-provider/interfaces.d.ts.map +1 -1
  66. package/lib/internal/template/icon-provider/interfaces.js.map +1 -1
  67. package/lib/internal/template/internal/base-component/styles.scoped.css +7 -1
  68. package/lib/internal/template/internal/components/button-trigger/index.d.ts.map +1 -1
  69. package/lib/internal/template/internal/components/button-trigger/index.js +3 -2
  70. package/lib/internal/template/internal/components/button-trigger/index.js.map +1 -1
  71. package/lib/internal/template/internal/components/button-trigger/styles.css.js +15 -14
  72. package/lib/internal/template/internal/components/button-trigger/styles.scoped.css +35 -29
  73. package/lib/internal/template/internal/components/button-trigger/styles.selectors.js +15 -14
  74. package/lib/internal/template/internal/components/drag-handle/styles.css.js +14 -14
  75. package/lib/internal/template/internal/components/drag-handle/styles.scoped.css +20 -19
  76. package/lib/internal/template/internal/components/drag-handle/styles.selectors.js +14 -14
  77. package/lib/internal/template/internal/components/drag-handle-wrapper/index.d.ts.map +1 -1
  78. package/lib/internal/template/internal/components/drag-handle-wrapper/index.js +6 -3
  79. package/lib/internal/template/internal/components/drag-handle-wrapper/index.js.map +1 -1
  80. package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.d.ts +2 -1
  81. package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.d.ts.map +1 -1
  82. package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.js +2 -2
  83. package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.js.map +1 -1
  84. package/lib/internal/template/internal/components/expand-toggle-button/index.js +2 -2
  85. package/lib/internal/template/internal/components/expand-toggle-button/index.js.map +1 -1
  86. package/lib/internal/template/internal/environment.js +2 -2
  87. package/lib/internal/template/internal/environment.json +2 -2
  88. package/lib/internal/template/internal/generated/styles/tokens.d.ts +1 -0
  89. package/lib/internal/template/internal/generated/styles/tokens.js +1 -0
  90. package/lib/internal/template/internal/generated/theming/index.cjs +33 -0
  91. package/lib/internal/template/internal/generated/theming/index.cjs.d.ts +9 -0
  92. package/lib/internal/template/internal/generated/theming/index.d.ts +9 -0
  93. package/lib/internal/template/internal/generated/theming/index.js +33 -0
  94. package/lib/internal/template/internal/hooks/use-mouse-down-target.js +2 -2
  95. package/lib/internal/template/internal/hooks/use-mouse-down-target.js.map +1 -1
  96. package/lib/internal/template/internal/hooks/use-portal-mode-classes/index.d.ts.map +1 -1
  97. package/lib/internal/template/internal/hooks/use-portal-mode-classes/index.js +4 -2
  98. package/lib/internal/template/internal/hooks/use-portal-mode-classes/index.js.map +1 -1
  99. package/lib/internal/template/internal/hooks/use-visual-mode/index.d.ts +1 -0
  100. package/lib/internal/template/internal/hooks/use-visual-mode/index.d.ts.map +1 -1
  101. package/lib/internal/template/internal/hooks/use-visual-mode/index.js +2 -1
  102. package/lib/internal/template/internal/hooks/use-visual-mode/index.js.map +1 -1
  103. package/lib/internal/template/status-indicator/internal.d.ts.map +1 -1
  104. package/lib/internal/template/status-indicator/internal.js +4 -3
  105. package/lib/internal/template/status-indicator/internal.js.map +1 -1
  106. package/lib/internal/template/status-indicator/styles.css.js +25 -24
  107. package/lib/internal/template/status-indicator/styles.scoped.css +75 -40
  108. package/lib/internal/template/status-indicator/styles.selectors.js +25 -24
  109. package/lib/internal/template/table/header-cell/group-header-cell.d.ts.map +1 -1
  110. package/lib/internal/template/table/header-cell/group-header-cell.js +3 -15
  111. package/lib/internal/template/table/header-cell/group-header-cell.js.map +1 -1
  112. package/lib/internal/template/table/header-cell/styles.css.js +33 -33
  113. package/lib/internal/template/table/header-cell/styles.scoped.css +73 -73
  114. package/lib/internal/template/table/header-cell/styles.selectors.js +33 -33
  115. package/lib/internal/template/table/header-cell/th-element.d.ts +6 -5
  116. package/lib/internal/template/table/header-cell/th-element.d.ts.map +1 -1
  117. package/lib/internal/template/table/header-cell/th-element.js +4 -3
  118. package/lib/internal/template/table/header-cell/th-element.js.map +1 -1
  119. package/lib/internal/template/table/interfaces.d.ts +11 -0
  120. package/lib/internal/template/table/interfaces.d.ts.map +1 -1
  121. package/lib/internal/template/table/interfaces.js.map +1 -1
  122. package/lib/internal/template/table/internal.d.ts.map +1 -1
  123. package/lib/internal/template/table/internal.js +104 -99
  124. package/lib/internal/template/table/internal.js.map +1 -1
  125. package/lib/internal/template/table/skeleton-rows.d.ts +23 -0
  126. package/lib/internal/template/table/skeleton-rows.d.ts.map +1 -0
  127. package/lib/internal/template/table/skeleton-rows.js +33 -0
  128. package/lib/internal/template/table/skeleton-rows.js.map +1 -0
  129. package/lib/internal/template/table/sticky-columns/use-sticky-columns.d.ts +2 -1
  130. package/lib/internal/template/table/sticky-columns/use-sticky-columns.d.ts.map +1 -1
  131. package/lib/internal/template/table/sticky-columns/use-sticky-columns.js +31 -7
  132. package/lib/internal/template/table/sticky-columns/use-sticky-columns.js.map +1 -1
  133. package/lib/internal/template/table/styles.css.js +36 -35
  134. package/lib/internal/template/table/styles.scoped.css +48 -42
  135. package/lib/internal/template/table/styles.selectors.js +36 -35
  136. package/lib/internal/template/table/thead.d.ts.map +1 -1
  137. package/lib/internal/template/table/thead.js +1 -1
  138. package/lib/internal/template/table/thead.js.map +1 -1
  139. package/lib/internal/template/test-utils/dom/table/index.js +1 -1
  140. package/lib/internal/template/test-utils/dom/table/index.js.map +1 -1
  141. package/lib/internal/template/test-utils/selectors/table/index.js +1 -1
  142. package/lib/internal/template/test-utils/selectors/table/index.js.map +1 -1
  143. package/lib/internal/template/theming/index.d.ts +2 -0
  144. package/lib/internal/template/theming/index.d.ts.map +1 -1
  145. package/lib/internal/template/theming/index.js +55 -0
  146. package/lib/internal/template/theming/index.js.map +1 -1
  147. package/lib/internal/template/tree-view/tree-item/index.d.ts.map +1 -1
  148. package/lib/internal/template/tree-view/tree-item/index.js +2 -1
  149. package/lib/internal/template/tree-view/tree-item/index.js.map +1 -1
  150. package/lib/internal/template/tree-view/tree-item/styles.css.js +10 -9
  151. package/lib/internal/template/tree-view/tree-item/styles.scoped.css +19 -12
  152. package/lib/internal/template/tree-view/tree-item/styles.selectors.js +10 -9
  153. package/package.json +1 -1
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
- export default function PortalOverlay({ track, isDisabled, children, }: {
2
+ export default function PortalOverlay({ track, isDisabled, referrerId, children, }: {
3
3
  track: React.RefObject<HTMLElement | null>;
4
4
  isDisabled: boolean;
5
+ referrerId?: string;
5
6
  children: React.ReactNode;
6
7
  }): JSX.Element;
7
8
  //# sourceMappingURL=portal-overlay.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"portal-overlay.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAY5E,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,UAAU,EACV,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAkEA"}
1
+ {"version":3,"file":"portal-overlay.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAY5E,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,UAAU,EACV,UAAU,EACV,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eA0EA"}
@@ -4,7 +4,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
4
4
  import clsx from 'clsx';
5
5
  import { getIsRtl, getLogicalBoundingClientRect, getScrollInlineStart, Portal, } from '@cloudscape-design/component-toolkit/internal';
6
6
  import styles from './styles.css.js';
7
- export default function PortalOverlay({ track, isDisabled, children, }) {
7
+ export default function PortalOverlay({ track, isDisabled, referrerId, children, }) {
8
8
  const ref = useRef(null);
9
9
  const [container, setContainer] = useState(null);
10
10
  useLayoutEffect(() => {
@@ -57,7 +57,7 @@ export default function PortalOverlay({ track, isDisabled, children, }) {
57
57
  };
58
58
  }, [isDisabled, track]);
59
59
  return (React.createElement(Portal, { container: container },
60
- React.createElement("span", { ref: ref, className: clsx(styles['portal-overlay'], isDisabled && styles['portal-overlay-disabled']) },
60
+ React.createElement("span", { ref: ref, "data-awsui-referrer-id": referrerId, className: clsx(styles['portal-overlay'], isDisabled && styles['portal-overlay-disabled']) },
61
61
  React.createElement("span", { className: styles['portal-overlay-contents'] }, children))));
62
62
  }
63
63
  //# sourceMappingURL=portal-overlay.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"portal-overlay.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,QAAQ,EACR,4BAA4B,EAC5B,oBAAoB,EACpB,MAAM,GACP,MAAM,+CAA+C,CAAC;AAEvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,UAAU,EACV,QAAQ,GAKT;IACC,MAAM,GAAG,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAExE,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACtE,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;YAC3D,YAAY,CAAC,YAAY,CAAC,CAAC;YAC3B,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,UAAU,EAAE,CAAC;YACzC,OAAO;QACT,CAAC;QAED,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,IAAI,KAAyB,CAAC;QAC9B,IAAI,KAAyB,CAAC;QAC9B,IAAI,cAAkC,CAAC;QACvC,IAAI,aAAiC,CAAC;QACtC,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,oHAAoH;YACpH,IAAI,KAAK,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;gBACxE,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBACpC,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,4BAA4B,CAC/F,KAAK,CAAC,OAAO,CACd,CAAC;gBACF,mEAAmE;gBACnE,uEAAuE;gBACvE,sEAAsE;gBACtE,8DAA8D;gBAC9D,MAAM,IAAI,GAAG,CAAC,gBAAgB,GAAG,oBAAoB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACpG,MAAM,IAAI,GAAG,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC;gBAClE,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;oBACrC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,MAAM,IAAI,IAAI,CAAC;oBACpD,KAAK,GAAG,IAAI,CAAC;oBACb,KAAK,GAAG,IAAI,CAAC;gBACf,CAAC;gBACD,IAAI,cAAc,KAAK,UAAU,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;oBACjE,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,UAAU,IAAI,CAAC;oBAC5C,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,IAAI,CAAC;oBAC5C,cAAc,GAAG,UAAU,CAAC;oBAC5B,aAAa,GAAG,SAAS,CAAC;gBAC5B,CAAC;YACH,CAAC;YACD,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,qBAAqB,CAAC,aAAa,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC;QACF,aAAa,EAAE,CAAC;QAEhB,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,oBAAC,MAAM,IAAC,SAAS,EAAE,SAAS;QAC1B,8BAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,UAAU,IAAI,MAAM,CAAC,yBAAyB,CAAC,CAAC;YACxG,8BAAM,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,IAAG,QAAQ,CAAQ,CAChE,CACA,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport {\n getIsRtl,\n getLogicalBoundingClientRect,\n getScrollInlineStart,\n Portal,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport styles from './styles.css.js';\n\nexport default function PortalOverlay({\n track,\n isDisabled,\n children,\n}: {\n track: React.RefObject<HTMLElement | null>;\n isDisabled: boolean;\n children: React.ReactNode;\n}) {\n const ref = useRef<HTMLSpanElement | null>(null);\n const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n useLayoutEffect(() => {\n if (track.current) {\n const newContainer = track.current.ownerDocument.createElement('div');\n track.current.ownerDocument.body.appendChild(newContainer);\n setContainer(newContainer);\n return () => newContainer.remove();\n }\n }, [track]);\n\n useEffect(() => {\n if (track.current === null || isDisabled) {\n return;\n }\n\n let cleanedUp = false;\n let lastX: number | undefined;\n let lastY: number | undefined;\n let lastInlineSize: number | undefined;\n let lastBlockSize: number | undefined;\n const updateElement = () => {\n // It could be that the portal hasn't been attached to the DOM yet - ensure the ref exists and is attached DOM tree.\n if (track.current && ref.current && document.body.contains(ref.current)) {\n const isRtl = getIsRtl(ref.current);\n const { insetInlineStart, insetBlockStart, inlineSize, blockSize } = getLogicalBoundingClientRect(\n track.current\n );\n // For simplicity, we just make all our calculations independent of\n // the browser's scrolling edge. When it comes to applying the changes,\n // translate is independent of writing direction, so we need to invert\n // the X coordinate ourselves just before applying the values.\n const newX = (insetInlineStart + getScrollInlineStart(document.documentElement)) * (isRtl ? -1 : 1);\n const newY = insetBlockStart + document.documentElement.scrollTop;\n if (lastX !== newX || lastY !== newY) {\n ref.current.style.translate = `${newX}px ${newY}px`;\n lastX = newX;\n lastY = newY;\n }\n if (lastInlineSize !== inlineSize || lastBlockSize !== blockSize) {\n ref.current.style.width = `${inlineSize}px`;\n ref.current.style.height = `${blockSize}px`;\n lastInlineSize = inlineSize;\n lastBlockSize = blockSize;\n }\n }\n if (!cleanedUp) {\n requestAnimationFrame(updateElement);\n }\n };\n updateElement();\n\n return () => {\n cleanedUp = true;\n };\n }, [isDisabled, track]);\n\n return (\n <Portal container={container}>\n <span ref={ref} className={clsx(styles['portal-overlay'], isDisabled && styles['portal-overlay-disabled'])}>\n <span className={styles['portal-overlay-contents']}>{children}</span>\n </span>\n </Portal>\n );\n}\n"]}
1
+ {"version":3,"file":"portal-overlay.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.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, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport {\n getIsRtl,\n getLogicalBoundingClientRect,\n getScrollInlineStart,\n Portal,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport styles from './styles.css.js';\n\nexport default function PortalOverlay({\n track,\n isDisabled,\n referrerId,\n children,\n}: {\n track: React.RefObject<HTMLElement | null>;\n isDisabled: boolean;\n referrerId?: string;\n children: React.ReactNode;\n}) {\n const ref = useRef<HTMLSpanElement | null>(null);\n const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n useLayoutEffect(() => {\n if (track.current) {\n const newContainer = track.current.ownerDocument.createElement('div');\n track.current.ownerDocument.body.appendChild(newContainer);\n setContainer(newContainer);\n return () => newContainer.remove();\n }\n }, [track]);\n\n useEffect(() => {\n if (track.current === null || isDisabled) {\n return;\n }\n\n let cleanedUp = false;\n let lastX: number | undefined;\n let lastY: number | undefined;\n let lastInlineSize: number | undefined;\n let lastBlockSize: number | undefined;\n const updateElement = () => {\n // It could be that the portal hasn't been attached to the DOM yet - ensure the ref exists and is attached DOM tree.\n if (track.current && ref.current && document.body.contains(ref.current)) {\n const isRtl = getIsRtl(ref.current);\n const { insetInlineStart, insetBlockStart, inlineSize, blockSize } = getLogicalBoundingClientRect(\n track.current\n );\n // For simplicity, we just make all our calculations independent of\n // the browser's scrolling edge. When it comes to applying the changes,\n // translate is independent of writing direction, so we need to invert\n // the X coordinate ourselves just before applying the values.\n const newX = (insetInlineStart + getScrollInlineStart(document.documentElement)) * (isRtl ? -1 : 1);\n const newY = insetBlockStart + document.documentElement.scrollTop;\n if (lastX !== newX || lastY !== newY) {\n ref.current.style.translate = `${newX}px ${newY}px`;\n lastX = newX;\n lastY = newY;\n }\n if (lastInlineSize !== inlineSize || lastBlockSize !== blockSize) {\n ref.current.style.width = `${inlineSize}px`;\n ref.current.style.height = `${blockSize}px`;\n lastInlineSize = inlineSize;\n lastBlockSize = blockSize;\n }\n }\n if (!cleanedUp) {\n requestAnimationFrame(updateElement);\n }\n };\n updateElement();\n\n return () => {\n cleanedUp = true;\n };\n }, [isDisabled, track]);\n\n return (\n <Portal container={container}>\n {/* `data-awsui-referrer-id` links this portaled overlay back to the tracked element in the\n regular DOM, so outside-click / focus detection (see `nodeBelongs`) treats interactions\n with the UAP buttons as belonging to wherever the drag handle is mounted (e.g. inside a\n dropdown), instead of as a click outside it. */}\n <span\n ref={ref}\n data-awsui-referrer-id={referrerId}\n className={clsx(styles['portal-overlay'], isDisabled && styles['portal-overlay-disabled'])}\n >\n <span className={styles['portal-overlay-contents']}>{children}</span>\n </span>\n </Portal>\n );\n}\n"]}
@@ -2,12 +2,12 @@
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import React, { useRef } from 'react';
4
4
  import clsx from 'clsx';
5
- import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
5
+ import { isThemeActive, Theme, useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
6
6
  import InternalIcon from '../../../icon/internal';
7
7
  import styles from './styles.css.js';
8
8
  export function ExpandToggleButton({ isExpanded, onExpandableItemToggle, expandButtonLabel, collapseButtonLabel, customIcon, className, disableFocusHighlight, }) {
9
9
  const buttonRef = useRef(null);
10
10
  const { tabIndex } = useSingleTabStopNavigation(buttonRef);
11
- return (React.createElement("button", { type: "button", ref: buttonRef, tabIndex: tabIndex, "aria-label": isExpanded ? collapseButtonLabel : expandButtonLabel, "aria-expanded": isExpanded, className: clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className), onClick: onExpandableItemToggle }, customIcon !== null && customIcon !== void 0 ? customIcon : (React.createElement(InternalIcon, { size: "small", name: "caret-down-filled", className: clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded']) }))));
11
+ return (React.createElement("button", { type: "button", ref: buttonRef, tabIndex: tabIndex, "aria-label": isExpanded ? collapseButtonLabel : expandButtonLabel, "aria-expanded": isExpanded, className: clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className), onClick: onExpandableItemToggle }, customIcon !== null && customIcon !== void 0 ? customIcon : (React.createElement(InternalIcon, { size: isThemeActive(Theme.OneTheme) ? 'x-small' : 'small', name: isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled', className: clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded']) }))));
12
12
  }
13
13
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/expand-toggle-button/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAE3F,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,kBAAkB,CAAC,EACjC,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,SAAS,EACT,qBAAqB,GAStB;IACC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAE3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,QAAQ,gBACN,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,mBACjD,UAAU,EACzB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,qBAAqB,IAAI,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAC/G,OAAO,EAAE,sBAAsB,IAE9B,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CACb,oBAAC,YAAY,IACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,mBAAmB,EACxB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,UAAU,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAAC,GAClG,CACH,CACM,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../../../icon/internal';\n\nimport styles from './styles.css.js';\n\nexport function ExpandToggleButton({\n isExpanded,\n onExpandableItemToggle,\n expandButtonLabel,\n collapseButtonLabel,\n customIcon,\n className,\n disableFocusHighlight,\n}: {\n isExpanded?: boolean;\n onExpandableItemToggle?: () => void;\n expandButtonLabel?: string;\n collapseButtonLabel?: string;\n customIcon?: React.ReactNode;\n className?: string;\n disableFocusHighlight?: boolean;\n}) {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n\n return (\n <button\n type=\"button\"\n ref={buttonRef}\n tabIndex={tabIndex}\n aria-label={isExpanded ? collapseButtonLabel : expandButtonLabel}\n aria-expanded={isExpanded}\n className={clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className)}\n onClick={onExpandableItemToggle}\n >\n {customIcon ?? (\n <InternalIcon\n size=\"small\"\n name=\"caret-down-filled\"\n className={clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded'])}\n />\n )}\n </button>\n );\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/expand-toggle-button/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAEjH,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,kBAAkB,CAAC,EACjC,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,SAAS,EACT,qBAAqB,GAStB;IACC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAE3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,QAAQ,gBACN,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,mBACjD,UAAU,EACzB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,qBAAqB,IAAI,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAC/G,OAAO,EAAE,sBAAsB,IAE9B,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CACb,oBAAC,YAAY,IACX,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACzD,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,mBAAmB,EACxE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,UAAU,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAAC,GAClG,CACH,CACM,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme, useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../../../icon/internal';\n\nimport styles from './styles.css.js';\n\nexport function ExpandToggleButton({\n isExpanded,\n onExpandableItemToggle,\n expandButtonLabel,\n collapseButtonLabel,\n customIcon,\n className,\n disableFocusHighlight,\n}: {\n isExpanded?: boolean;\n onExpandableItemToggle?: () => void;\n expandButtonLabel?: string;\n collapseButtonLabel?: string;\n customIcon?: React.ReactNode;\n className?: string;\n disableFocusHighlight?: boolean;\n}) {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n\n return (\n <button\n type=\"button\"\n ref={buttonRef}\n tabIndex={tabIndex}\n aria-label={isExpanded ? collapseButtonLabel : expandButtonLabel}\n aria-expanded={isExpanded}\n className={clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className)}\n onClick={onExpandableItemToggle}\n >\n {customIcon ?? (\n <InternalIcon\n size={isThemeActive(Theme.OneTheme) ? 'x-small' : 'small'}\n name={isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled'}\n className={clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded'])}\n />\n )}\n </button>\n );\n}\n"]}
@@ -1,6 +1,6 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (c158a478)";
3
- export var GIT_SHA = "c158a478";
2
+ export var PACKAGE_VERSION = "3.0.0 (1b4a11ae)";
3
+ export var GIT_SHA = "1b4a11ae";
4
4
  export var THEME = "open-source-visual-refresh";
5
5
  export var SYSTEM = "core";
6
6
  export var ALWAYS_VISUAL_REFRESH = true;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "components",
3
- "PACKAGE_VERSION": "3.0.0 (c158a478)",
4
- "GIT_SHA": "c158a478",
3
+ "PACKAGE_VERSION": "3.0.0 (1b4a11ae)",
4
+ "GIT_SHA": "1b4a11ae",
5
5
  "THEME": "default",
6
6
  "SYSTEM": "core",
7
7
  "ALWAYS_VISUAL_REFRESH": false,
@@ -339,6 +339,7 @@ export const colorBackgroundLayoutMain: string;
339
339
  export const colorBackgroundDrawer: string;
340
340
  export const colorBackgroundDrawerBackdrop: string;
341
341
  export const colorBackgroundLayoutMobilePanel: string;
342
+ export const colorBackgroundLayoutPanel: string;
342
343
  export const colorBackgroundLayoutPanelContent: string;
343
344
  export const colorBackgroundLayoutPanelHover: string;
344
345
  export const colorBackgroundLayoutToolbar: string;
@@ -339,6 +339,7 @@ export var colorBackgroundLayoutMain = "var(--color-background-layout-main-5ilwc
339
339
  export var colorBackgroundDrawer = "var(--color-background-drawer-5hs0eh, #ffffff)";
340
340
  export var colorBackgroundDrawerBackdrop = "var(--color-background-drawer-backdrop-ducxi3, rgba(35, 43, 55, 0.7))";
341
341
  export var colorBackgroundLayoutMobilePanel = "var(--color-background-layout-mobile-panel-ed0ava, #0f141a)";
342
+ export var colorBackgroundLayoutPanel = "var(--color-background-layout-panel-jv6exs, #ffffff)";
342
343
  export var colorBackgroundLayoutPanelContent = "var(--color-background-layout-panel-content-xto15e, #ffffff)";
343
344
  export var colorBackgroundLayoutPanelHover = "var(--color-background-layout-panel-hover-tguulw, #ebebf0)";
344
345
  export var colorBackgroundLayoutToolbar = "var(--color-background-layout-toolbar-y0cu80, #ffffff)";
@@ -1403,6 +1403,10 @@ module.exports.preset = {
1403
1403
  "light": "{colorNeutral950}",
1404
1404
  "dark": "{colorNeutral950}"
1405
1405
  },
1406
+ "colorBackgroundLayoutPanel": {
1407
+ "light": "{colorBackgroundContainerContent}",
1408
+ "dark": "{colorBackgroundContainerContent}"
1409
+ },
1406
1410
  "colorBackgroundLayoutPanelContent": {
1407
1411
  "light": "{colorBackgroundContainerContent}",
1408
1412
  "dark": "{colorBackgroundContainerContent}"
@@ -4147,6 +4151,10 @@ module.exports.preset = {
4147
4151
  "light": "{colorNeutral950}",
4148
4152
  "dark": "{colorNeutral950}"
4149
4153
  },
4154
+ "colorBackgroundLayoutPanel": {
4155
+ "light": "{colorBackgroundContainerContent}",
4156
+ "dark": "{colorBackgroundContainerContent}"
4157
+ },
4150
4158
  "colorBackgroundLayoutPanelContent": {
4151
4159
  "light": "{colorBackgroundContainerContent}",
4152
4160
  "dark": "{colorBackgroundContainerContent}"
@@ -5724,6 +5732,10 @@ module.exports.preset = {
5724
5732
  "light": "{colorNeutral950}",
5725
5733
  "dark": "{colorNeutral950}"
5726
5734
  },
5735
+ "colorBackgroundLayoutPanel": {
5736
+ "light": "{colorBackgroundContainerContent}",
5737
+ "dark": "{colorBackgroundContainerContent}"
5738
+ },
5727
5739
  "colorBackgroundLayoutPanelContent": {
5728
5740
  "light": "{colorBackgroundContainerContent}",
5729
5741
  "dark": "{colorBackgroundContainerContent}"
@@ -7229,6 +7241,10 @@ module.exports.preset = {
7229
7241
  "light": "{colorNeutral950}",
7230
7242
  "dark": "{colorNeutral950}"
7231
7243
  },
7244
+ "colorBackgroundLayoutPanel": {
7245
+ "light": "{colorBackgroundContainerContent}",
7246
+ "dark": "{colorBackgroundContainerContent}"
7247
+ },
7232
7248
  "colorBackgroundLayoutPanelContent": {
7233
7249
  "light": "{colorBackgroundContainerContent}",
7234
7250
  "dark": "{colorBackgroundContainerContent}"
@@ -8599,6 +8615,10 @@ module.exports.preset = {
8599
8615
  "light": "{colorNeutral950}",
8600
8616
  "dark": "{colorNeutral950}"
8601
8617
  },
8618
+ "colorBackgroundLayoutPanel": {
8619
+ "light": "{colorBackgroundContainerContent}",
8620
+ "dark": "{colorBackgroundContainerContent}"
8621
+ },
8602
8622
  "colorBackgroundLayoutPanelContent": {
8603
8623
  "light": "{colorBackgroundContainerContent}",
8604
8624
  "dark": "{colorBackgroundContainerContent}"
@@ -9969,6 +9989,10 @@ module.exports.preset = {
9969
9989
  "light": "{colorNeutral950}",
9970
9990
  "dark": "{colorNeutral950}"
9971
9991
  },
9992
+ "colorBackgroundLayoutPanel": {
9993
+ "light": "{colorBackgroundContainerContent}",
9994
+ "dark": "{colorBackgroundContainerContent}"
9995
+ },
9972
9996
  "colorBackgroundLayoutPanelContent": {
9973
9997
  "light": "{colorBackgroundContainerContent}",
9974
9998
  "dark": "{colorBackgroundContainerContent}"
@@ -11341,6 +11365,10 @@ module.exports.preset = {
11341
11365
  "light": "{colorNeutral950}",
11342
11366
  "dark": "{colorNeutral950}"
11343
11367
  },
11368
+ "colorBackgroundLayoutPanel": {
11369
+ "light": "{colorBackgroundContainerContent}",
11370
+ "dark": "{colorBackgroundContainerContent}"
11371
+ },
11344
11372
  "colorBackgroundLayoutPanelContent": {
11345
11373
  "light": "{colorBackgroundContainerContent}",
11346
11374
  "dark": "{colorBackgroundContainerContent}"
@@ -12820,6 +12848,7 @@ module.exports.preset = {
12820
12848
  "colorBackgroundDrawer": "color",
12821
12849
  "colorBackgroundDrawerBackdrop": "color",
12822
12850
  "colorBackgroundLayoutMobilePanel": "color",
12851
+ "colorBackgroundLayoutPanel": "color",
12823
12852
  "colorBackgroundLayoutPanelContent": "color",
12824
12853
  "colorBackgroundLayoutPanelHover": "color",
12825
12854
  "colorBackgroundLayoutToolbar": "color",
@@ -13621,6 +13650,7 @@ module.exports.preset = {
13621
13650
  "colorBackgroundInputDisabled",
13622
13651
  "colorBackgroundItemSelected",
13623
13652
  "colorBackgroundLayoutMain",
13653
+ "colorBackgroundLayoutPanel",
13624
13654
  "colorBackgroundLayoutToolbar",
13625
13655
  "colorBackgroundLayoutToggleActive",
13626
13656
  "colorBackgroundLayoutToggleDefault",
@@ -14125,6 +14155,7 @@ module.exports.preset = {
14125
14155
  "colorBackgroundInputDisabled",
14126
14156
  "colorBackgroundItemSelected",
14127
14157
  "colorBackgroundLayoutMain",
14158
+ "colorBackgroundLayoutPanel",
14128
14159
  "colorBackgroundLayoutToolbar",
14129
14160
  "colorBackgroundLayoutToggleActive",
14130
14161
  "colorBackgroundLayoutToggleDefault",
@@ -14784,6 +14815,7 @@ module.exports.preset = {
14784
14815
  "colorBackgroundDrawer": "color-background-drawer",
14785
14816
  "colorBackgroundDrawerBackdrop": "color-background-drawer-backdrop",
14786
14817
  "colorBackgroundLayoutMobilePanel": "color-background-layout-mobile-panel",
14818
+ "colorBackgroundLayoutPanel": "color-background-layout-panel",
14787
14819
  "colorBackgroundLayoutPanelContent": "color-background-layout-panel-content",
14788
14820
  "colorBackgroundLayoutPanelHover": "color-background-layout-panel-hover",
14789
14821
  "colorBackgroundLayoutToolbar": "color-background-layout-toolbar",
@@ -15735,6 +15767,7 @@ module.exports.preset = {
15735
15767
  "colorBackgroundDrawer": "--color-background-drawer-5hs0eh",
15736
15768
  "colorBackgroundDrawerBackdrop": "--color-background-drawer-backdrop-ducxi3",
15737
15769
  "colorBackgroundLayoutMobilePanel": "--color-background-layout-mobile-panel-ed0ava",
15770
+ "colorBackgroundLayoutPanel": "--color-background-layout-panel-jv6exs",
15738
15771
  "colorBackgroundLayoutPanelContent": "--color-background-layout-panel-content-xto15e",
15739
15772
  "colorBackgroundLayoutPanelHover": "--color-background-layout-panel-hover-tguulw",
15740
15773
  "colorBackgroundLayoutToolbar": "--color-background-layout-toolbar-y0cu80",
@@ -115,6 +115,7 @@ export declare interface TypedOverride {
115
115
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
116
116
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
117
117
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
118
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
118
119
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
119
120
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
120
121
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -528,6 +529,7 @@ export declare interface TypedOverride {
528
529
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
529
530
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
530
531
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
532
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
531
533
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
532
534
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
533
535
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -941,6 +943,7 @@ export declare interface TypedOverride {
941
943
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
942
944
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
943
945
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
946
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
944
947
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
945
948
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
946
949
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1354,6 +1357,7 @@ export declare interface TypedOverride {
1354
1357
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1355
1358
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1356
1359
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1360
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1357
1361
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1358
1362
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1359
1363
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1767,6 +1771,7 @@ export declare interface TypedOverride {
1767
1771
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1768
1772
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1769
1773
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1774
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1770
1775
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1771
1776
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1772
1777
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -2180,6 +2185,7 @@ export declare interface TypedOverride {
2180
2185
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2181
2186
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2182
2187
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2188
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2183
2189
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2184
2190
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2185
2191
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -2593,6 +2599,7 @@ export declare interface TypedOverride {
2593
2599
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2594
2600
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2595
2601
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2602
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2596
2603
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2597
2604
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2598
2605
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -3006,6 +3013,7 @@ export declare interface TypedOverride {
3006
3013
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3007
3014
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3008
3015
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3016
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3009
3017
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3010
3018
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3011
3019
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -3419,6 +3427,7 @@ export declare interface TypedOverride {
3419
3427
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3420
3428
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3421
3429
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3430
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3422
3431
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3423
3432
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3424
3433
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -115,6 +115,7 @@ export declare interface TypedOverride {
115
115
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
116
116
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
117
117
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
118
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
118
119
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
119
120
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
120
121
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -528,6 +529,7 @@ export declare interface TypedOverride {
528
529
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
529
530
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
530
531
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
532
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
531
533
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
532
534
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
533
535
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -941,6 +943,7 @@ export declare interface TypedOverride {
941
943
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
942
944
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
943
945
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
946
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
944
947
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
945
948
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
946
949
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1354,6 +1357,7 @@ export declare interface TypedOverride {
1354
1357
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1355
1358
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1356
1359
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1360
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1357
1361
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1358
1362
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1359
1363
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1767,6 +1771,7 @@ export declare interface TypedOverride {
1767
1771
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1768
1772
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1769
1773
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1774
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1770
1775
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1771
1776
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1772
1777
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -2180,6 +2185,7 @@ export declare interface TypedOverride {
2180
2185
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2181
2186
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2182
2187
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2188
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2183
2189
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2184
2190
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2185
2191
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -2593,6 +2599,7 @@ export declare interface TypedOverride {
2593
2599
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2594
2600
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2595
2601
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2602
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2596
2603
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2597
2604
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2598
2605
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -3006,6 +3013,7 @@ export declare interface TypedOverride {
3006
3013
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3007
3014
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3008
3015
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3016
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3009
3017
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3010
3018
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3011
3019
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -3419,6 +3427,7 @@ export declare interface TypedOverride {
3419
3427
  colorBackgroundInputDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3420
3428
  colorBackgroundItemSelected?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3421
3429
  colorBackgroundLayoutMain?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3430
+ colorBackgroundLayoutPanel?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3422
3431
  colorBackgroundLayoutToolbar?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3423
3432
  colorBackgroundLayoutToggleActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3424
3433
  colorBackgroundLayoutToggleDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1403,6 +1403,10 @@ export var preset = {
1403
1403
  "light": "{colorNeutral950}",
1404
1404
  "dark": "{colorNeutral950}"
1405
1405
  },
1406
+ "colorBackgroundLayoutPanel": {
1407
+ "light": "{colorBackgroundContainerContent}",
1408
+ "dark": "{colorBackgroundContainerContent}"
1409
+ },
1406
1410
  "colorBackgroundLayoutPanelContent": {
1407
1411
  "light": "{colorBackgroundContainerContent}",
1408
1412
  "dark": "{colorBackgroundContainerContent}"
@@ -4147,6 +4151,10 @@ export var preset = {
4147
4151
  "light": "{colorNeutral950}",
4148
4152
  "dark": "{colorNeutral950}"
4149
4153
  },
4154
+ "colorBackgroundLayoutPanel": {
4155
+ "light": "{colorBackgroundContainerContent}",
4156
+ "dark": "{colorBackgroundContainerContent}"
4157
+ },
4150
4158
  "colorBackgroundLayoutPanelContent": {
4151
4159
  "light": "{colorBackgroundContainerContent}",
4152
4160
  "dark": "{colorBackgroundContainerContent}"
@@ -5724,6 +5732,10 @@ export var preset = {
5724
5732
  "light": "{colorNeutral950}",
5725
5733
  "dark": "{colorNeutral950}"
5726
5734
  },
5735
+ "colorBackgroundLayoutPanel": {
5736
+ "light": "{colorBackgroundContainerContent}",
5737
+ "dark": "{colorBackgroundContainerContent}"
5738
+ },
5727
5739
  "colorBackgroundLayoutPanelContent": {
5728
5740
  "light": "{colorBackgroundContainerContent}",
5729
5741
  "dark": "{colorBackgroundContainerContent}"
@@ -7229,6 +7241,10 @@ export var preset = {
7229
7241
  "light": "{colorNeutral950}",
7230
7242
  "dark": "{colorNeutral950}"
7231
7243
  },
7244
+ "colorBackgroundLayoutPanel": {
7245
+ "light": "{colorBackgroundContainerContent}",
7246
+ "dark": "{colorBackgroundContainerContent}"
7247
+ },
7232
7248
  "colorBackgroundLayoutPanelContent": {
7233
7249
  "light": "{colorBackgroundContainerContent}",
7234
7250
  "dark": "{colorBackgroundContainerContent}"
@@ -8599,6 +8615,10 @@ export var preset = {
8599
8615
  "light": "{colorNeutral950}",
8600
8616
  "dark": "{colorNeutral950}"
8601
8617
  },
8618
+ "colorBackgroundLayoutPanel": {
8619
+ "light": "{colorBackgroundContainerContent}",
8620
+ "dark": "{colorBackgroundContainerContent}"
8621
+ },
8602
8622
  "colorBackgroundLayoutPanelContent": {
8603
8623
  "light": "{colorBackgroundContainerContent}",
8604
8624
  "dark": "{colorBackgroundContainerContent}"
@@ -9969,6 +9989,10 @@ export var preset = {
9969
9989
  "light": "{colorNeutral950}",
9970
9990
  "dark": "{colorNeutral950}"
9971
9991
  },
9992
+ "colorBackgroundLayoutPanel": {
9993
+ "light": "{colorBackgroundContainerContent}",
9994
+ "dark": "{colorBackgroundContainerContent}"
9995
+ },
9972
9996
  "colorBackgroundLayoutPanelContent": {
9973
9997
  "light": "{colorBackgroundContainerContent}",
9974
9998
  "dark": "{colorBackgroundContainerContent}"
@@ -11341,6 +11365,10 @@ export var preset = {
11341
11365
  "light": "{colorNeutral950}",
11342
11366
  "dark": "{colorNeutral950}"
11343
11367
  },
11368
+ "colorBackgroundLayoutPanel": {
11369
+ "light": "{colorBackgroundContainerContent}",
11370
+ "dark": "{colorBackgroundContainerContent}"
11371
+ },
11344
11372
  "colorBackgroundLayoutPanelContent": {
11345
11373
  "light": "{colorBackgroundContainerContent}",
11346
11374
  "dark": "{colorBackgroundContainerContent}"
@@ -12820,6 +12848,7 @@ export var preset = {
12820
12848
  "colorBackgroundDrawer": "color",
12821
12849
  "colorBackgroundDrawerBackdrop": "color",
12822
12850
  "colorBackgroundLayoutMobilePanel": "color",
12851
+ "colorBackgroundLayoutPanel": "color",
12823
12852
  "colorBackgroundLayoutPanelContent": "color",
12824
12853
  "colorBackgroundLayoutPanelHover": "color",
12825
12854
  "colorBackgroundLayoutToolbar": "color",
@@ -13621,6 +13650,7 @@ export var preset = {
13621
13650
  "colorBackgroundInputDisabled",
13622
13651
  "colorBackgroundItemSelected",
13623
13652
  "colorBackgroundLayoutMain",
13653
+ "colorBackgroundLayoutPanel",
13624
13654
  "colorBackgroundLayoutToolbar",
13625
13655
  "colorBackgroundLayoutToggleActive",
13626
13656
  "colorBackgroundLayoutToggleDefault",
@@ -14125,6 +14155,7 @@ export var preset = {
14125
14155
  "colorBackgroundInputDisabled",
14126
14156
  "colorBackgroundItemSelected",
14127
14157
  "colorBackgroundLayoutMain",
14158
+ "colorBackgroundLayoutPanel",
14128
14159
  "colorBackgroundLayoutToolbar",
14129
14160
  "colorBackgroundLayoutToggleActive",
14130
14161
  "colorBackgroundLayoutToggleDefault",
@@ -14784,6 +14815,7 @@ export var preset = {
14784
14815
  "colorBackgroundDrawer": "color-background-drawer",
14785
14816
  "colorBackgroundDrawerBackdrop": "color-background-drawer-backdrop",
14786
14817
  "colorBackgroundLayoutMobilePanel": "color-background-layout-mobile-panel",
14818
+ "colorBackgroundLayoutPanel": "color-background-layout-panel",
14787
14819
  "colorBackgroundLayoutPanelContent": "color-background-layout-panel-content",
14788
14820
  "colorBackgroundLayoutPanelHover": "color-background-layout-panel-hover",
14789
14821
  "colorBackgroundLayoutToolbar": "color-background-layout-toolbar",
@@ -15735,6 +15767,7 @@ export var preset = {
15735
15767
  "colorBackgroundDrawer": "--color-background-drawer-5hs0eh",
15736
15768
  "colorBackgroundDrawerBackdrop": "--color-background-drawer-backdrop-ducxi3",
15737
15769
  "colorBackgroundLayoutMobilePanel": "--color-background-layout-mobile-panel-ed0ava",
15770
+ "colorBackgroundLayoutPanel": "--color-background-layout-panel-jv6exs",
15738
15771
  "colorBackgroundLayoutPanelContent": "--color-background-layout-panel-content-xto15e",
15739
15772
  "colorBackgroundLayoutPanelHover": "--color-background-layout-panel-hover-tguulw",
15740
15773
  "colorBackgroundLayoutToolbar": "--color-background-layout-toolbar-y0cu80",
@@ -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 { useRef } from 'react';
3
+ import { useCallback, useRef } from 'react';
4
4
  import { createSingletonHandler } from '@cloudscape-design/component-toolkit/internal';
5
5
  const useEventListenersSingleton = createSingletonHandler(setTarget => {
6
6
  function handleMouseDown(event) {
@@ -25,6 +25,6 @@ export default function useMouseDownTarget() {
25
25
  useEventListenersSingleton(target => {
26
26
  mouseDownTargetRef.current = target;
27
27
  });
28
- return () => mouseDownTargetRef.current;
28
+ return useCallback(() => mouseDownTargetRef.current, []);
29
29
  }
30
30
  //# sourceMappingURL=use-mouse-down-target.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"use-mouse-down-target.js","sourceRoot":"","sources":["../../../../src/internal/hooks/use-mouse-down-target.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC;AAEvF,MAAM,0BAA0B,GAAG,sBAAsB,CAAc,SAAS,CAAC,EAAE;IACjF,SAAS,eAAe,CAAC,KAAiB;QACxC,SAAS,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;IAClC,CAAC;IACD,SAAS,aAAa;QACpB,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC;IACD,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;IACzC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;IACrF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;IACjF,OAAO,GAAG,EAAE;QACV,UAAU,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACxC,MAAM,kBAAkB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACrD,0BAA0B,CAAC,MAAM,CAAC,EAAE;QAClC,kBAAkB,CAAC,OAAO,GAAG,MAAM,CAAC;IACtC,CAAC,CAAC,CAAC;IACH,OAAO,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO,CAAC;AAC1C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useRef } from 'react';\n\nimport { createSingletonHandler } from '@cloudscape-design/component-toolkit/internal';\n\nconst useEventListenersSingleton = createSingletonHandler<Node | null>(setTarget => {\n function handleMouseDown(event: MouseEvent) {\n setTarget(event.target as Node);\n }\n function handleKeyDown() {\n setTarget(null);\n }\n const controller = new AbortController();\n window.addEventListener('mousedown', handleMouseDown, { signal: controller.signal });\n window.addEventListener('keydown', handleKeyDown, { signal: controller.signal });\n return () => {\n controller.abort();\n };\n});\n\n/**\n * Captures last mouse down target and clears it on keydown.\n * @returns a callback to get the last detected mouse down target.\n */\nexport default function useMouseDownTarget() {\n const mouseDownTargetRef = useRef<null | Node>(null);\n useEventListenersSingleton(target => {\n mouseDownTargetRef.current = target;\n });\n return () => mouseDownTargetRef.current;\n}\n"]}
1
+ {"version":3,"file":"use-mouse-down-target.js","sourceRoot":"","sources":["../../../../src/internal/hooks/use-mouse-down-target.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC;AAEvF,MAAM,0BAA0B,GAAG,sBAAsB,CAAc,SAAS,CAAC,EAAE;IACjF,SAAS,eAAe,CAAC,KAAiB;QACxC,SAAS,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;IAClC,CAAC;IACD,SAAS,aAAa;QACpB,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC;IACD,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;IACzC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;IACrF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;IACjF,OAAO,GAAG,EAAE;QACV,UAAU,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACxC,MAAM,kBAAkB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACrD,0BAA0B,CAAC,MAAM,CAAC,EAAE;QAClC,kBAAkB,CAAC,OAAO,GAAG,MAAM,CAAC;IACtC,CAAC,CAAC,CAAC;IACH,OAAO,WAAW,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAC3D,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useCallback, useRef } from 'react';\n\nimport { createSingletonHandler } from '@cloudscape-design/component-toolkit/internal';\n\nconst useEventListenersSingleton = createSingletonHandler<Node | null>(setTarget => {\n function handleMouseDown(event: MouseEvent) {\n setTarget(event.target as Node);\n }\n function handleKeyDown() {\n setTarget(null);\n }\n const controller = new AbortController();\n window.addEventListener('mousedown', handleMouseDown, { signal: controller.signal });\n window.addEventListener('keydown', handleKeyDown, { signal: controller.signal });\n return () => {\n controller.abort();\n };\n});\n\n/**\n * Captures last mouse down target and clears it on keydown.\n * @returns a callback to get the last detected mouse down target.\n */\nexport default function useMouseDownTarget() {\n const mouseDownTargetRef = useRef<null | Node>(null);\n useEventListenersSingleton(target => {\n mouseDownTargetRef.current = target;\n });\n return useCallback(() => mouseDownTargetRef.current, []);\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-portal-mode-classes/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EAAE;IAAE,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAAE,UAYjH"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-portal-mode-classes/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EAAE;IAAE,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAAE,UAcjH"}
@@ -2,16 +2,18 @@ import clsx from 'clsx';
2
2
  import { useCurrentMode, useDensityMode } from '@cloudscape-design/component-toolkit/internal';
3
3
  import { useVisualContext } from '../../components/visual-context';
4
4
  import { ALWAYS_VISUAL_REFRESH } from '../../environment';
5
- import { useVisualRefresh } from '../use-visual-mode';
5
+ import { useOneTheme, useVisualRefresh } from '../use-visual-mode';
6
6
  export function usePortalModeClasses(ref, options) {
7
7
  const colorMode = useCurrentMode(ref);
8
8
  const densityMode = useDensityMode(ref);
9
9
  const context = useVisualContext(ref);
10
- const visualRefreshWithClass = useVisualRefresh() && !ALWAYS_VISUAL_REFRESH;
10
+ const oneTheme = useOneTheme();
11
+ const visualRefreshWithClass = useVisualRefresh() && !ALWAYS_VISUAL_REFRESH && !oneTheme;
11
12
  return clsx({
12
13
  'awsui-polaris-dark-mode awsui-dark-mode': colorMode === 'dark',
13
14
  'awsui-polaris-compact-mode awsui-compact-mode': densityMode === 'compact',
14
15
  'awsui-visual-refresh': visualRefreshWithClass,
16
+ 'awsui-one-theme': oneTheme,
15
17
  [`awsui-context-${context}`]: context && !(options === null || options === void 0 ? void 0 : options.resetVisualContext),
16
18
  });
17
19
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-portal-mode-classes/index.ts"],"names":[],"mappings":"AAGA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAE/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,UAAU,oBAAoB,CAAC,GAAiC,EAAE,OAA0C;IAChH,MAAM,SAAS,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,WAAW,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;IACxC,MAAM,OAAO,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,sBAAsB,GAAG,gBAAgB,EAAE,IAAI,CAAC,qBAAqB,CAAC;IAE5E,OAAO,IAAI,CAAC;QACV,yCAAyC,EAAE,SAAS,KAAK,MAAM;QAC/D,+CAA+C,EAAE,WAAW,KAAK,SAAS;QAC1E,sBAAsB,EAAE,sBAAsB;QAC9C,CAAC,iBAAiB,OAAO,EAAE,CAAC,EAAE,OAAO,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,CAAA;KACtE,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { useCurrentMode, useDensityMode } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualContext } from '../../components/visual-context';\nimport { ALWAYS_VISUAL_REFRESH } from '../../environment';\nimport { useVisualRefresh } from '../use-visual-mode';\n\nexport function usePortalModeClasses(ref: React.RefObject<HTMLElement>, options?: { resetVisualContext?: boolean }) {\n const colorMode = useCurrentMode(ref);\n const densityMode = useDensityMode(ref);\n const context = useVisualContext(ref);\n const visualRefreshWithClass = useVisualRefresh() && !ALWAYS_VISUAL_REFRESH;\n\n return clsx({\n 'awsui-polaris-dark-mode awsui-dark-mode': colorMode === 'dark',\n 'awsui-polaris-compact-mode awsui-compact-mode': densityMode === 'compact',\n 'awsui-visual-refresh': visualRefreshWithClass,\n [`awsui-context-${context}`]: context && !options?.resetVisualContext,\n });\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-portal-mode-classes/index.ts"],"names":[],"mappings":"AAGA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAE/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,MAAM,UAAU,oBAAoB,CAAC,GAAiC,EAAE,OAA0C;IAChH,MAAM,SAAS,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,WAAW,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;IACxC,MAAM,OAAO,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,sBAAsB,GAAG,gBAAgB,EAAE,IAAI,CAAC,qBAAqB,IAAI,CAAC,QAAQ,CAAC;IAEzF,OAAO,IAAI,CAAC;QACV,yCAAyC,EAAE,SAAS,KAAK,MAAM;QAC/D,+CAA+C,EAAE,WAAW,KAAK,SAAS;QAC1E,sBAAsB,EAAE,sBAAsB;QAC9C,iBAAiB,EAAE,QAAQ;QAC3B,CAAC,iBAAiB,OAAO,EAAE,CAAC,EAAE,OAAO,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,CAAA;KACtE,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { useCurrentMode, useDensityMode } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualContext } from '../../components/visual-context';\nimport { ALWAYS_VISUAL_REFRESH } from '../../environment';\nimport { useOneTheme, useVisualRefresh } from '../use-visual-mode';\n\nexport function usePortalModeClasses(ref: React.RefObject<HTMLElement>, options?: { resetVisualContext?: boolean }) {\n const colorMode = useCurrentMode(ref);\n const densityMode = useDensityMode(ref);\n const context = useVisualContext(ref);\n const oneTheme = useOneTheme();\n const visualRefreshWithClass = useVisualRefresh() && !ALWAYS_VISUAL_REFRESH && !oneTheme;\n\n return clsx({\n 'awsui-polaris-dark-mode awsui-dark-mode': colorMode === 'dark',\n 'awsui-polaris-compact-mode awsui-compact-mode': densityMode === 'compact',\n 'awsui-visual-refresh': visualRefreshWithClass,\n 'awsui-one-theme': oneTheme,\n [`awsui-context-${context}`]: context && !options?.resetVisualContext,\n });\n}\n"]}
@@ -1,2 +1,3 @@
1
1
  export declare const useVisualRefresh: () => boolean;
2
+ export declare const useOneTheme: () => boolean;
2
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-visual-mode/index.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB,eAA+D,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-visual-mode/index.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB,eAA+D,CAAC;AAE7F,eAAO,MAAM,WAAW,eAAsC,CAAC"}
@@ -1,6 +1,7 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
- import { useRuntimeVisualRefresh } from '@cloudscape-design/component-toolkit/internal';
3
+ import { isThemeActive, Theme, useRuntimeVisualRefresh } from '@cloudscape-design/component-toolkit/internal';
4
4
  import { ALWAYS_VISUAL_REFRESH } from '../../environment';
5
5
  export const useVisualRefresh = ALWAYS_VISUAL_REFRESH ? () => true : useRuntimeVisualRefresh;
6
+ export const useOneTheme = () => isThemeActive(Theme.OneTheme);
6
7
  //# sourceMappingURL=index.js.map