@veeqo/ui 14.7.0 → 14.7.1-beta-2

package/dist/components/Button/Button.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._heading-xxl_1cokg_1 {\n  font-family: var(--text-heading-xxl-font-family);\n  font-style: var(--text-heading-xxl-font-style);\n  font-weight: var(--text-heading-xxl-font-weight);\n  font-size: var(--text-heading-xxl-font-size);\n  line-height: var(--text-heading-xxl-line-height);\n  color: var(--text-heading-xxl-color);\n  text-decoration: var(--text-heading-xxl-text-decoration);\n  letter-spacing: var(--text-heading-xxl-letter-spacing);\n}\n\n._heading-xl_1cokg_12 {\n  font-family: var(--text-heading-xl-font-family);\n  font-style: var(--text-heading-xl-font-style);\n  font-weight: var(--text-heading-xl-font-weight);\n  font-size: var(--text-heading-xl-font-size);\n  line-height: var(--text-heading-xl-line-height);\n  color: var(--text-heading-xl-color);\n  text-decoration: var(--text-heading-xl-text-decoration);\n  letter-spacing: var(--text-heading-xl-letter-spacing);\n}\n\n._heading-large_1cokg_23 {\n  font-family: var(--text-heading-large-font-family);\n  font-style: var(--text-heading-large-font-style);\n  font-weight: var(--text-heading-large-font-weight);\n  font-size: var(--text-heading-large-font-size);\n  line-height: var(--text-heading-large-line-height);\n  color: var(--text-heading-large-color);\n  text-decoration: var(--text-heading-large-text-decoration);\n  letter-spacing: var(--text-heading-large-letter-spacing);\n}\n\n._heading-medium_1cokg_34 {\n  font-family: var(--text-heading-medium-font-family);\n  font-style: var(--text-heading-medium-font-style);\n  font-weight: var(--text-heading-medium-font-weight);\n  font-size: var(--text-heading-medium-font-size);\n  line-height: var(--text-heading-medium-line-height);\n  color: var(--text-heading-medium-color);\n  text-decoration: var(--text-heading-medium-text-decoration);\n  letter-spacing: var(--text-heading-medium-letter-spacing);\n}\n\n._heading-small_1cokg_45 {\n  font-family: var(--text-heading-small-font-family);\n  font-style: var(--text-heading-small-font-style);\n  font-weight: var(--text-heading-small-font-weight);\n  font-size: var(--text-heading-small-font-size);\n  line-height: var(--text-heading-small-line-height);\n  color: var(--text-heading-small-color);\n  text-decoration: var(--text-heading-small-text-decoration);\n  letter-spacing: var(--text-heading-small-letter-spacing);\n}\n\n._heading-table_1cokg_56 {\n  font-family: var(--text-heading-table-font-family);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  font-size: var(--text-heading-table-font-size);\n  line-height: var(--text-heading-table-line-height);\n  color: var(--text-heading-table-color);\n  text-decoration: var(--text-heading-table-text-decoration);\n  letter-spacing: var(--text-heading-table-letter-spacing);\n}\n\n._subheading-large_1cokg_67 {\n  font-family: var(--text-subheading-large-font-family);\n  font-style: var(--text-subheading-large-font-style);\n  font-weight: var(--text-subheading-large-font-weight);\n  font-size: var(--text-subheading-large-font-size);\n  line-height: var(--text-subheading-large-line-height);\n  color: var(--text-subheading-large-color);\n  text-decoration: var(--text-subheading-large-text-decoration);\n  letter-spacing: var(--text-subheading-large-letter-spacing);\n}\n\n._subheading-medium_1cokg_78 {\n  font-family: var(--text-subheading-medium-font-family);\n  font-style: var(--text-subheading-medium-font-style);\n  font-weight: var(--text-subheading-medium-font-weight);\n  font-size: var(--text-subheading-medium-font-size);\n  line-height: var(--text-subheading-medium-line-height);\n  color: var(--text-subheading-medium-color);\n  text-decoration: var(--text-subheading-medium-text-decoration);\n  letter-spacing: var(--text-subheading-medium-letter-spacing);\n}\n\n._subheading-small_1cokg_89 {\n  font-family: var(--text-subheading-small-font-family);\n  font-style: var(--text-subheading-small-font-style);\n  font-weight: var(--text-subheading-small-font-weight);\n  font-size: var(--text-subheading-small-font-size);\n  line-height: var(--text-subheading-small-line-height);\n  color: var(--text-subheading-small-color);\n  text-decoration: var(--text-subheading-small-text-decoration);\n  letter-spacing: var(--text-subheading-small-letter-spacing);\n}\n\n._subheading-small-bold_1cokg_100 {\n  font-family: var(--text-subheading-small-bold-font-family);\n  font-style: var(--text-subheading-small-bold-font-style);\n  font-weight: var(--text-subheading-small-bold-font-weight);\n  font-size: var(--text-subheading-small-bold-font-size);\n  line-height: var(--text-subheading-small-bold-line-height);\n  color: var(--text-subheading-small-bold-color);\n  text-decoration: var(--text-subheading-small-bold-text-decoration);\n  letter-spacing: var(--text-subheading-small-bold-letter-spacing);\n}\n\n._body_1cokg_111 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n}\n\n._body-small_1cokg_122 {\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  font-size: var(--text-body-small-font-size);\n  line-height: var(--text-body-small-line-height);\n  color: var(--text-body-small-color);\n  text-decoration: var(--text-body-small-text-decoration);\n  letter-spacing: var(--text-body-small-letter-spacing);\n}\n\n._body-bold_1cokg_133 {\n  font-family: var(--text-body-bold-font-family);\n  font-style: var(--text-body-bold-font-style);\n  font-weight: var(--text-body-bold-font-weight);\n  font-size: var(--text-body-bold-font-size);\n  line-height: var(--text-body-bold-line-height);\n  color: var(--text-body-bold-color);\n  text-decoration: var(--text-body-bold-text-decoration);\n  letter-spacing: var(--text-body-bold-letter-spacing);\n}\n\n._body-bold-dark_1cokg_144 {\n  font-family: var(--text-body-bold-dark-font-family);\n  font-style: var(--text-body-bold-dark-font-style);\n  font-weight: var(--text-body-bold-dark-font-weight);\n  font-size: var(--text-body-bold-dark-font-size);\n  line-height: var(--text-body-bold-dark-line-height);\n  color: var(--text-body-bold-dark-color);\n  text-decoration: var(--text-body-bold-dark-text-decoration);\n  letter-spacing: var(--text-body-bold-dark-letter-spacing);\n}\n\n._body-small-bold_1cokg_155 {\n  font-family: var(--text-body-small-bold-font-family);\n  font-style: var(--text-body-small-bold-font-style);\n  font-weight: var(--text-body-small-bold-font-weight);\n  font-size: var(--text-body-small-bold-font-size);\n  line-height: var(--text-body-small-bold-line-height);\n  color: var(--text-body-small-bold-color);\n  text-decoration: var(--text-body-small-bold-text-decoration);\n  letter-spacing: var(--text-body-small-bold-letter-spacing);\n}\n\n._button_1cokg_166 {\n  font-family: var(--text-button-font-family);\n  font-style: var(--text-button-font-style);\n  font-weight: var(--text-button-font-weight);\n  font-size: var(--text-button-font-size);\n  line-height: var(--text-button-line-height);\n  color: var(--text-button-color);\n  text-decoration: var(--text-button-text-decoration);\n  letter-spacing: var(--text-button-letter-spacing);\n}\n\n._button-small_1cokg_177 {\n  font-family: var(--text-button-small-font-family);\n  font-style: var(--text-button-small-font-style);\n  font-weight: var(--text-button-small-font-weight);\n  font-size: var(--text-button-small-font-size);\n  line-height: var(--text-button-small-line-height);\n  color: var(--text-button-small-color);\n  text-decoration: var(--text-button-small-text-decoration);\n  letter-spacing: var(--text-button-small-letter-spacing);\n}\n\n._link-large_1cokg_188 {\n  font-family: var(--text-link-large-font-family);\n  font-style: var(--text-link-large-font-style);\n  font-weight: var(--text-link-large-font-weight);\n  font-size: var(--text-link-large-font-size);\n  line-height: var(--text-link-large-line-height);\n  color: var(--text-link-large-color);\n  text-decoration: var(--text-link-large-text-decoration);\n  letter-spacing: var(--text-link-large-letter-spacing);\n}\n\n._link-medium_1cokg_199 {\n  font-family: var(--text-link-medium-font-family);\n  font-style: var(--text-link-medium-font-style);\n  font-weight: var(--text-link-medium-font-weight);\n  font-size: var(--text-link-medium-font-size);\n  line-height: var(--text-link-medium-line-height);\n  color: var(--text-link-medium-color);\n  text-decoration: var(--text-link-medium-text-decoration);\n  letter-spacing: var(--text-link-medium-letter-spacing);\n}\n\n._link_1cokg_188 {\n  font-family: var(--text-link-font-family);\n  font-style: var(--text-link-font-style);\n  font-weight: var(--text-link-font-weight);\n  font-size: var(--text-link-font-size);\n  line-height: var(--text-link-line-height);\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n  letter-spacing: var(--text-link-letter-spacing);\n}\n\n._link-small_1cokg_221 {\n  font-family: var(--text-link-small-font-family);\n  font-style: var(--text-link-small-font-style);\n  font-weight: var(--text-link-small-font-weight);\n  font-size: var(--text-link-small-font-size);\n  line-height: var(--text-link-small-line-height);\n  color: var(--text-link-small-color);\n  text-decoration: var(--text-link-small-text-decoration);\n  letter-spacing: var(--text-link-small-letter-spacing);\n}\n\n._input-label_1cokg_232 {\n  font-family: var(--text-input-label-font-family);\n  font-style: var(--text-input-label-font-style);\n  font-weight: var(--text-input-label-font-weight);\n  font-size: var(--text-input-label-font-size);\n  line-height: var(--text-input-label-line-height);\n  color: var(--text-input-label-color);\n  text-decoration: var(--text-input-label-text-decoration);\n  letter-spacing: var(--text-input-label-letter-spacing);\n}\n\n._input-label-small_1cokg_243 {\n  font-family: var(--text-input-label-small-font-family);\n  font-style: var(--text-input-label-small-font-style);\n  font-weight: var(--text-input-label-small-font-weight);\n  font-size: var(--text-input-label-small-font-size);\n  line-height: var(--text-input-label-small-line-height);\n  color: var(--text-input-label-small-color);\n  text-decoration: var(--text-input-label-small-text-decoration);\n  letter-spacing: var(--text-input-label-small-letter-spacing);\n}\n\n._hint-text_1cokg_254 {\n  font-family: var(--text-hint-text-font-family);\n  font-style: var(--text-hint-text-font-style);\n  font-weight: var(--text-hint-text-font-weight);\n  font-size: var(--text-hint-text-font-size);\n  line-height: var(--text-hint-text-line-height);\n  color: var(--text-hint-text-color);\n  text-decoration: var(--text-hint-text-text-decoration);\n  letter-spacing: var(--text-hint-text-letter-spacing);\n}\n\n._placeholder_1cokg_265 {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n\n._placeholder-small_1cokg_276 {\n  font-family: var(--text-placeholder-small-font-family);\n  font-style: var(--text-placeholder-small-font-style);\n  font-weight: var(--text-placeholder-small-font-weight);\n  font-size: var(--text-placeholder-small-font-size);\n  line-height: var(--text-placeholder-small-line-height);\n  color: var(--text-placeholder-small-color);\n  text-decoration: var(--text-placeholder-small-text-decoration);\n  letter-spacing: var(--text-placeholder-small-letter-spacing);\n}\n\n._placeholder-code_1cokg_287 {\n  font-family: var(--text-placeholder-code-font-family);\n  font-style: var(--text-placeholder-code-font-style);\n  font-weight: var(--text-placeholder-code-font-weight);\n  font-size: var(--text-placeholder-code-font-size);\n  line-height: var(--text-placeholder-code-line-height);\n  color: var(--text-placeholder-code-color);\n  text-decoration: var(--text-placeholder-code-text-decoration);\n  letter-spacing: var(--text-placeholder-code-letter-spacing);\n}\n\n._placeholder-code-small_1cokg_298 {\n  font-family: var(--text-placeholder-code-small-font-family);\n  font-style: var(--text-placeholder-code-small-font-style);\n  font-weight: var(--text-placeholder-code-small-font-weight);\n  font-size: var(--text-placeholder-code-small-font-size);\n  line-height: var(--text-placeholder-code-small-line-height);\n  color: var(--text-placeholder-code-small-color);\n  text-decoration: var(--text-placeholder-code-small-text-decoration);\n  letter-spacing: var(--text-placeholder-code-small-letter-spacing);\n}\n\n._error_1cokg_309 {\n  font-family: var(--text-error-font-family);\n  font-style: var(--text-error-font-style);\n  font-weight: var(--text-error-font-weight);\n  font-size: var(--text-error-font-size);\n  line-height: var(--text-error-line-height);\n  color: var(--text-error-color);\n  text-decoration: var(--text-error-text-decoration);\n  letter-spacing: var(--text-error-letter-spacing);\n}\n\n._error-small_1cokg_320 {\n  font-family: var(--text-error-small-font-family);\n  font-style: var(--text-error-small-font-style);\n  font-weight: var(--text-error-small-font-weight);\n  font-size: var(--text-error-small-font-size);\n  line-height: var(--text-error-small-line-height);\n  color: var(--text-error-small-color);\n  text-decoration: var(--text-error-small-text-decoration);\n  letter-spacing: var(--text-error-small-letter-spacing);\n}\n\n._success-small_1cokg_331 {\n  font-family: var(--text-success-small-font-family);\n  font-style: var(--text-success-small-font-style);\n  font-weight: var(--text-success-small-font-weight);\n  font-size: var(--text-success-small-font-size);\n  line-height: var(--text-success-small-line-height);\n  color: var(--text-success-small-color);\n  text-decoration: var(--text-success-small-text-decoration);\n  letter-spacing: var(--text-success-small-letter-spacing);\n}\n\n._base_1cokg_342 {\n  position: relative;\n  box-sizing: border-box;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-family: var(--font-family);\n  font-weight: 400;\n  border: 1px solid;\n  background-color: transparent;\n  white-space: nowrap;\n}\n._base_1cokg_342:hover {\n  cursor: pointer;\n}\n._base_1cokg_342:disabled {\n  pointer-events: none;\n  cursor: unset !important;\n}\n\n._base-size_1cokg_364 {\n  --outline-width: var(--sizes-xs);\n  height: var(--sizes-10);\n  padding-left: var(--sizes-sm);\n  padding-right: var(--sizes-sm);\n  border-radius: var(--radius-md);\n  font-size: var(--sizes-base);\n  line-height: var(--sizes-base);\n}\n\n._base-size_1cokg_364._hasText_1cokg_374 {\n  padding-left: var(--sizes-md);\n  padding-right: var(--sizes-md);\n}\n\n._base-size_1cokg_364._hasText_1cokg_374._hasIcon_1cokg_379 {\n  padding-left: var(--sizes-base);\n}\n\n._base-size_1cokg_364._hasText_1cokg_374._hasDropdown_1cokg_383 {\n  padding-right: var(--sizes-base);\n}\n\n._sm-size_1cokg_387 {\n  --outline-width: 2px;\n  height: var(--sizes-lg);\n  padding-left: var(--sizes-sm);\n  padding-right: var(--sizes-sm);\n  border-radius: var(--radius-base);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-font-size);\n}\n\n._sm-size_1cokg_387._hasText_1cokg_374 {\n  padding-left: var(--sizes-base);\n  padding-right: var(--sizes-base);\n}\n\n._sm-size_1cokg_387._hasText_1cokg_374._hasIcon_1cokg_379 {\n  padding-left: var(--sizes-sm);\n}\n\n._sm-size_1cokg_387._hasText_1cokg_374._hasDropdown_1cokg_383 {\n  padding-right: var(--sizes-sm);\n}\n\n._default-variant_1cokg_410 {\n  border-color: var(--colors-neutral-grey-dark);\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n}\n._default-variant_1cokg_410:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._default-variant_1cokg_410:active {\n  background-color: var(--colors-neutral-grey-lightest);\n  border-color: var(--colors-secondary-blue-base);\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n}\n._default-variant_1cokg_410:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._default-variant_1cokg_410:disabled {\n  box-shadow: none !important;\n  background-color: var(--colors-neutral-grey-base) !important;\n  border-color: var(--colors-neutral-grey-base) !important;\n  color: var(--colors-neutral-ink-light) !important;\n}\n\n._default-variant_1cokg_410._hasText_1cokg_374 {\n  color: var(--colors-neutral-ink-base);\n}\n\n._default-variant_1cokg_410:not(._hasText_1cokg_374) {\n  color: var(--colors-secondary-blue-base);\n}\n\n._destructive-variant_1cokg_442 {\n  border-color: var(--colors-neutral-grey-dark);\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n  color: var(--colors-secondary-red-base);\n}\n._destructive-variant_1cokg_442:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n  color: var(--colors-secondary-red-dark);\n}\n._destructive-variant_1cokg_442:active {\n  background-color: var(--colors-neutral-grey-lightest);\n  border-color: var(--colors-secondary-red-base);\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n  color: var(--colors-secondary-red-dark);\n}\n._destructive-variant_1cokg_442:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n  outline: 0;\n}\n._destructive-variant_1cokg_442:disabled {\n  box-shadow: none !important;\n  background-color: var(--colors-neutral-grey-base) !important;\n  border-color: var(--colors-neutral-grey-base) !important;\n  color: var(--colors-neutral-ink-light) !important;\n}\n\n._primary-variant_1cokg_469 {\n  background-color: var(--theme-primary, var(--colors-secondary-blue-base));\n  border-color: var(--theme-primary, var(--colors-secondary-blue-base));\n  color: var(--theme-on-primary, white);\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n}\n._primary-variant_1cokg_469:hover {\n  background-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n  border-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n}\n._primary-variant_1cokg_469:active {\n  background-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n  border-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n}\n._primary-variant_1cokg_469:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._primary-variant_1cokg_469:disabled {\n  box-shadow: none !important;\n  background-color: var(--colors-neutral-grey-base) !important;\n  border-color: var(--colors-neutral-grey-base) !important;\n  color: var(--colors-neutral-ink-light) !important;\n}\n\n._primaryDestructive-variant_1cokg_495 {\n  background-color: var(--colors-secondary-red-base);\n  border-color: var(--colors-secondary-red-base);\n  color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n}\n._primaryDestructive-variant_1cokg_495:hover {\n  background-color: var(--colors-secondary-red-dark);\n  border-color: var(--colors-secondary-red-dark);\n}\n._primaryDestructive-variant_1cokg_495:active {\n  background-color: var(--colors-secondary-red-dark);\n  border-color: var(--colors-secondary-red-dark);\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n}\n._primaryDestructive-variant_1cokg_495:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n  outline: 0;\n}\n._primaryDestructive-variant_1cokg_495:disabled {\n  box-shadow: none !important;\n  background-color: var(--colors-neutral-grey-base) !important;\n  border-color: var(--colors-neutral-grey-base) !important;\n  color: var(--colors-neutral-ink-light) !important;\n}\n\n._flat-variant_1cokg_521 {\n  border-color: transparent;\n  box-shadow: none;\n  color: var(--colors-neutral-ink-base);\n}\n._flat-variant_1cokg_521:hover {\n  background-color: var(--colors-neutral-grey-light);\n}\n._flat-variant_1cokg_521:active {\n  background-color: var(--colors-neutral-grey-light);\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n}\n._flat-variant_1cokg_521:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._flat-variant_1cokg_521:disabled {\n  background-color: transparent;\n  border-color: transparent;\n}\n\n._link-variant_1cokg_542 {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  font-family: var(--text-link-font-family);\n  font-style: var(--text-link-font-style);\n  font-weight: var(--text-link-font-weight);\n  font-size: var(--text-link-font-size);\n  line-height: var(--text-link-line-height);\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n  letter-spacing: var(--text-link-letter-spacing);\n  letter-spacing: normal;\n  color: var(--colors-secondary-blue-base);\n}\n._link-variant_1cokg_542:hover {\n  cursor: pointer;\n  color: var(--colors-secondary-blue-dark);\n}\n._link-variant_1cokg_542 > * + * {\n  margin-left: var(--sizes-xs);\n}\n._link-variant_1cokg_542:focus-visible {\n  outline: 0;\n  box-shadow: 0 0 0 4px white, 0 0 0 8px var(--colors-secondary-blue-light);\n  border-radius: 4px;\n}\n\n._unstyled-variant_1cokg_575 {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n}\n._unstyled-variant_1cokg_575:hover {\n  cursor: pointer;\n}\n\n._mainContent_1cokg_586 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--sizes-xs);\n}\n._mainContent_1cokg_586 svg {\n  width: var(--button-icon-size);\n  height: var(--button-icon-size);\n}\n\n._hasText_1cokg_374 ._mainContent_1cokg_586 {\n  gap: var(--sizes-sm);\n}\n\n._mainContent_1cokg_586._loading_1cokg_600 {\n  opacity: 0;\n}\n\n._loadingWrapper_1cokg_604 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n}");
+var styles = {"heading-xxl":"_heading-xxl_1cokg_1","heading-xl":"_heading-xl_1cokg_12","heading-large":"_heading-large_1cokg_23","heading-medium":"_heading-medium_1cokg_34","heading-small":"_heading-small_1cokg_45","heading-table":"_heading-table_1cokg_56","subheading-large":"_subheading-large_1cokg_67","subheading-medium":"_subheading-medium_1cokg_78","subheading-small":"_subheading-small_1cokg_89","subheading-small-bold":"_subheading-small-bold_1cokg_100","body":"_body_1cokg_111","body-small":"_body-small_1cokg_122","body-bold":"_body-bold_1cokg_133","body-bold-dark":"_body-bold-dark_1cokg_144","body-small-bold":"_body-small-bold_1cokg_155","button":"_button_1cokg_166","button-small":"_button-small_1cokg_177","link-large":"_link-large_1cokg_188","link-medium":"_link-medium_1cokg_199","link":"_link_1cokg_188","link-small":"_link-small_1cokg_221","input-label":"_input-label_1cokg_232","input-label-small":"_input-label-small_1cokg_243","hint-text":"_hint-text_1cokg_254","placeholder":"_placeholder_1cokg_265","placeholder-small":"_placeholder-small_1cokg_276","placeholder-code":"_placeholder-code_1cokg_287","placeholder-code-small":"_placeholder-code-small_1cokg_298","error":"_error_1cokg_309","error-small":"_error-small_1cokg_320","success-small":"_success-small_1cokg_331","base":"_base_1cokg_342","base-size":"_base-size_1cokg_364","hasText":"_hasText_1cokg_374","hasIcon":"_hasIcon_1cokg_379","hasDropdown":"_hasDropdown_1cokg_383","sm-size":"_sm-size_1cokg_387","default-variant":"_default-variant_1cokg_410","destructive-variant":"_destructive-variant_1cokg_442","primary-variant":"_primary-variant_1cokg_469","primaryDestructive-variant":"_primaryDestructive-variant_1cokg_495","flat-variant":"_flat-variant_1cokg_521","link-variant":"_link-variant_1cokg_542","unstyled-variant":"_unstyled-variant_1cokg_575","mainContent":"_mainContent_1cokg_586","loading":"_loading_1cokg_600","loadingWrapper":"_loadingWrapper_1cokg_604"};
+
+export { styles as default };
+//# sourceMappingURL=Button.module.scss.js.map

package/dist/components/Button/Button.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.module.scss.js","sources":["../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use '../../theme/scss/text.module.scss' as text;\n\n// Base class (shared by default, primary, destructive, primaryDestructive, flat)\n\n.base {\n  position: relative;\n  box-sizing: border-box;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-family: var(--font-family);\n  font-weight: 400;\n  border: 1px solid;\n  background-color: transparent;\n  white-space: nowrap;\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:disabled {\n    pointer-events: none;\n    cursor: unset !important;\n  }\n}\n\n// Size classes\n\n.base-size {\n  --outline-width: var(--sizes-xs);\n\n  height: var(--sizes-10);\n  padding-left: var(--sizes-sm);\n  padding-right: var(--sizes-sm);\n  border-radius: var(--radius-md);\n  font-size: var(--sizes-base);\n  line-height: var(--sizes-base);\n}\n\n.base-size.hasText {\n  padding-left: var(--sizes-md);\n  padding-right: var(--sizes-md);\n}\n\n.base-size.hasText.hasIcon {\n  padding-left: var(--sizes-base);\n}\n\n.base-size.hasText.hasDropdown {\n  padding-right: var(--sizes-base);\n}\n\n.sm-size {\n  --outline-width: 2px;\n\n  height: var(--sizes-lg);\n  padding-left: var(--sizes-sm);\n  padding-right: var(--sizes-sm);\n  border-radius: var(--radius-base);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-font-size); // intentionally matches font-size for button height control\n}\n\n.sm-size.hasText {\n  padding-left: var(--sizes-base);\n  padding-right: var(--sizes-base);\n}\n\n.sm-size.hasText.hasIcon {\n  padding-left: var(--sizes-sm);\n}\n\n.sm-size.hasText.hasDropdown {\n  padding-right: var(--sizes-sm);\n}\n\n// Variant: default\n\n.default-variant {\n  border-color: var(--colors-neutral-grey-dark);\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &:active {\n    background-color: var(--colors-neutral-grey-lightest);\n    border-color: var(--colors-secondary-blue-base);\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: var(--colors-neutral-grey-base) !important;\n    border-color: var(--colors-neutral-grey-base) !important;\n    color: var(--colors-neutral-ink-light) !important;\n  }\n}\n\n// Default variant conditional color based on hasText\n.default-variant.hasText {\n  color: var(--colors-neutral-ink-base);\n}\n\n.default-variant:not(.hasText) {\n  color: var(--colors-secondary-blue-base);\n}\n\n// Variant: destructive (extends default visually)\n\n.destructive-variant {\n  border-color: var(--colors-neutral-grey-dark);\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n  color: var(--colors-secondary-red-base);\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n    color: var(--colors-secondary-red-dark);\n  }\n\n  &:active {\n    background-color: var(--colors-neutral-grey-lightest);\n    border-color: var(--colors-secondary-red-base);\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n    color: var(--colors-secondary-red-dark);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: var(--colors-neutral-grey-base) !important;\n    border-color: var(--colors-neutral-grey-base) !important;\n    color: var(--colors-neutral-ink-light) !important;\n  }\n}\n\n// Variant: primary\n\n.primary-variant {\n  background-color: var(--theme-primary, var(--colors-secondary-blue-base));\n  border-color: var(--theme-primary, var(--colors-secondary-blue-base));\n  color: var(--theme-on-primary, white);\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n\n  &:hover {\n    background-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n    border-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n  }\n\n  &:active {\n    background-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n    border-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: var(--colors-neutral-grey-base) !important;\n    border-color: var(--colors-neutral-grey-base) !important;\n    color: var(--colors-neutral-ink-light) !important;\n  }\n}\n\n// Variant: primaryDestructive\n\n.primaryDestructive-variant {\n  background-color: var(--colors-secondary-red-base);\n  border-color: var(--colors-secondary-red-base);\n  color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n\n  &:hover {\n    background-color: var(--colors-secondary-red-dark);\n    border-color: var(--colors-secondary-red-dark);\n  }\n\n  &:active {\n    background-color: var(--colors-secondary-red-dark);\n    border-color: var(--colors-secondary-red-dark);\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: var(--colors-neutral-grey-base) !important;\n    border-color: var(--colors-neutral-grey-base) !important;\n    color: var(--colors-neutral-ink-light) !important;\n  }\n}\n\n// Variant: flat\n\n.flat-variant {\n  border-color: transparent;\n  box-shadow: none;\n  color: var(--colors-neutral-ink-base);\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-light);\n  }\n\n  &:active {\n    background-color: var(--colors-neutral-grey-light);\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    background-color: transparent;\n    border-color: transparent;\n  }\n}\n\n// Variant: link (standalone — does NOT use .base)\n\n.link-variant {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n\n  @include text.link;\n\n  // Override mixin's letter-spacing: the SC version never set it\n  letter-spacing: normal;\n  color: var(--colors-secondary-blue-base);\n\n  &:hover {\n    cursor: pointer;\n    color: var(--colors-secondary-blue-dark);\n  }\n\n  & > * + * {\n    margin-left: var(--sizes-xs);\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow:\n      0 0 0 4px white,\n      0 0 0 8px var(--colors-secondary-blue-light);\n    border-radius: 4px;\n  }\n}\n\n// Variant: unstyled (standalone — does NOT use .base)\n\n.unstyled-variant {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n// Sub-elements\n\n.mainContent {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--sizes-xs);\n\n  svg {\n    width: var(--button-icon-size);\n    height: var(--button-icon-size);\n  }\n}\n\n.hasText .mainContent {\n  gap: var(--sizes-sm);\n}\n\n.mainContent.loading {\n  opacity: 0;\n}\n\n.loadingWrapper {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n}\n"],"names":["___$insertStyle"],"mappings":";;AAGEA,WAAA,CAAA,kqsBAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,uBAAA,CAAA,kCAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,iBAAA,CAAA,4BAAA,CAAA,QAAA,CAAA,mBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,mBAAA,CAAA,8BAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,mBAAA,CAAA,8BAAA,CAAA,kBAAA,CAAA,6BAAA,CAAA,wBAAA,CAAA,mCAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,4BAAA,CAAA,qBAAA,CAAA,gCAAA,CAAA,iBAAA,CAAA,4BAAA,CAAA,4BAAA,CAAA,uCAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,kBAAA,CAAA,6BAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,2BAAA;;;;"}

package/dist/components/Button/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ButtonHTMLAttributes, ReactElement, CSSProperties } from 'react';
+import { ReactNode, ButtonHTMLAttributes, ReactElement, CSSProperties, ElementType } from 'react';
 import { WithTokensProps } from '../../hoc/withTokens/withTokens';
 export type ButtonVariant = 'default' | 'destructive' | 'primary' | 'primaryDestructive' | 'flat' | 'link' | 'unstyled';
 /**
@@ -18,4 +18,12 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithTokensPr
     loading?: boolean;
     /** Additional styles for mainContent */
     contentStyles?: CSSProperties;
+    /** Render as a different element type (e.g. 'a' for links) */
+    as?: ElementType;
+    /** URL when rendered as an anchor (use with as="a") */
+    href?: string;
+    /** Link target (use with as="a") */
+    target?: string;
+    /** Link rel attribute (use with as="a") */
+    rel?: string;
 };

package/dist/components/Choice/Choice.cjs

@@ -4,6 +4,7 @@ var React = require('react');
 var Stack = require('../Stack/Stack.cjs');
 var index = require('../../theme/index.cjs');
 var styled = require('./components/styled.cjs');
+var BlockTooltip = require('./components/BlockTooltip.cjs');
 var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
 var Text = require('../Text/Text.cjs');
 
@@ -26,7 +27,7 @@ const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, erro
             React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 Badge,
                 label && (React__default.default.createElement(Text.Text, { variant: labelVariant, className: classNames.label }, label)),
-                (tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
+                (tooltip || tooltipContent) && (React__default.default.createElement(BlockTooltip.BlockTooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
                     React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", name: "help", width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.lightest })))),
             hint && (React__default.default.createElement(Text.Text, { id: `hint-${htmlFor}`, variant: "hintText", className: classNames.hint }, hint)),
             error && (React__default.default.createElement(Text.Text, { variant: "error", className: classNames.error }, error)),

package/dist/components/Choice/Choice.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n  BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  htmlFor: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  htmlFor,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && (\n            <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n              {hint}\n            </Text>\n          )}\n          {error && (\n            <Text variant=\"error\" className={classNames.error}>\n              {error}\n            </Text>\n          )}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":["React","RootLayout","InputLayout","AccessoryLayout","TextLayout","Stack","Text","BlockTooltip","HelpIcon","theme","BorderedWrapper","Wrapper"],"mappings":"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"}
+{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n} from './components/styled';\nimport { BlockTooltip } from './components/BlockTooltip';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  htmlFor: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  htmlFor,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && (\n            <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n              {hint}\n            </Text>\n          )}\n          {error && (\n            <Text variant=\"error\" className={classNames.error}>\n              {error}\n            </Text>\n          )}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":["React","RootLayout","InputLayout","AccessoryLayout","TextLayout","Stack","Text","BlockTooltip","HelpIcon","theme","BorderedWrapper","Wrapper"],"mappings":"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"}

package/dist/components/Choice/Choice.js

@@ -1,7 +1,8 @@
 import React__default from 'react';
 import { Stack } from '../Stack/Stack.js';
 import { theme } from '../../theme/index.js';
-import { RootLayout, InputLayout, AccessoryLayout, TextLayout, BlockTooltip, BorderedWrapper, Wrapper } from './components/styled.js';
+import { RootLayout, InputLayout, AccessoryLayout, TextLayout, BorderedWrapper, Wrapper } from './components/styled.js';
+import { BlockTooltip } from './components/BlockTooltip.js';
 import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
 import { Text } from '../Text/Text.js';
 

package/dist/components/Choice/Choice.js.map

@@ -1 +1 @@
-{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n  BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  htmlFor: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  htmlFor,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && (\n            <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n              {hint}\n            </Text>\n          )}\n          {error && (\n            <Text variant=\"error\" className={classNames.error}>\n              {error}\n            </Text>\n          )}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n} from './components/styled';\nimport { BlockTooltip } from './components/BlockTooltip';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  htmlFor: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  htmlFor,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && (\n            <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n              {hint}\n            </Text>\n          )}\n          {error && (\n            <Text variant=\"error\" className={classNames.error}>\n              {error}\n            </Text>\n          )}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/Choice/components/BlockTooltip.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+var Tooltip = require('../../Tooltip/Tooltip.cjs');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var BlockTooltip_module = require('./BlockTooltip.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const BlockTooltip = ({ className, ...rest }) => (React__default.default.createElement(Tooltip.Tooltip, { ...rest, className: buildClassnames.buildClassnames([BlockTooltip_module.block, className]), hoverableClassName: BlockTooltip_module.hoverableBlock }));
+
+exports.BlockTooltip = BlockTooltip;
+//# sourceMappingURL=BlockTooltip.cjs.map

package/dist/components/Choice/components/BlockTooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.cjs","sources":["../../../../src/components/Choice/components/BlockTooltip.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../../Tooltip';\nimport { TooltipProps } from '../../Tooltip/types';\nimport { buildClassnames } from '../../../utils';\nimport blockTooltipStyles from './BlockTooltip.module.scss';\n\nexport const BlockTooltip = ({ className, ...rest }: TooltipProps) => (\n  <Tooltip\n    {...rest}\n    className={buildClassnames([blockTooltipStyles.block, className])}\n    hoverableClassName={blockTooltipStyles.hoverableBlock}\n  />\n);\n"],"names":["React","Tooltip","buildClassnames","blockTooltipStyles"],"mappings":";;;;;;;;;;;;AAMO,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAgB,MAC/DA,sBAAA,CAAA,aAAA,CAACC,eAAO,OACF,IAAI,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,mBAAkB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,EACjE,kBAAkB,EAAEA,mBAAkB,CAAC,cAAc,EAAA,CACrD;;;;"}

package/dist/components/Choice/components/BlockTooltip.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TooltipProps } from '../../Tooltip/types';
+export declare const BlockTooltip: ({ className, ...rest }: TooltipProps) => React.JSX.Element;

package/dist/components/Choice/components/BlockTooltip.js

@@ -0,0 +1,10 @@
+import React__default from 'react';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import blockTooltipStyles from './BlockTooltip.module.scss.js';
+
+const BlockTooltip = ({ className, ...rest }) => (React__default.createElement(Tooltip, { ...rest, className: buildClassnames([blockTooltipStyles.block, className]), hoverableClassName: blockTooltipStyles.hoverableBlock }));
+
+export { BlockTooltip };
+//# sourceMappingURL=BlockTooltip.js.map

package/dist/components/Choice/components/BlockTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.js","sources":["../../../../src/components/Choice/components/BlockTooltip.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../../Tooltip';\nimport { TooltipProps } from '../../Tooltip/types';\nimport { buildClassnames } from '../../../utils';\nimport blockTooltipStyles from './BlockTooltip.module.scss';\n\nexport const BlockTooltip = ({ className, ...rest }: TooltipProps) => (\n  <Tooltip\n    {...rest}\n    className={buildClassnames([blockTooltipStyles.block, className])}\n    hoverableClassName={blockTooltipStyles.hoverableBlock}\n  />\n);\n"],"names":["React"],"mappings":";;;;;;AAMO,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAgB,MAC/DA,cAAA,CAAA,aAAA,CAAC,OAAO,OACF,IAAI,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,kBAAkB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,EACjE,kBAAkB,EAAE,kBAAkB,CAAC,cAAc,EAAA,CACrD;;;;"}

package/dist/components/Choice/components/BlockTooltip.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._block_x5ryq_1 {\n  display: block;\n}\n\n._hoverableBlock_x5ryq_5 {\n  display: block;\n}");
+var blockTooltipStyles = {"block":"_block_x5ryq_1","hoverableBlock":"_hoverableBlock_x5ryq_5"};
+
+module.exports = blockTooltipStyles;
+//# sourceMappingURL=BlockTooltip.module.scss.cjs.map

package/dist/components/Choice/components/BlockTooltip.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.module.scss.cjs","sources":["../../../../src/components/Choice/components/BlockTooltip.module.scss"],"sourcesContent":[".block {\n  display: block;\n}\n\n.hoverableBlock {\n  display: block;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,6FAAA;;;;;"}

package/dist/components/Choice/components/BlockTooltip.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+
+insertStyle("._block_x5ryq_1 {\n  display: block;\n}\n\n._hoverableBlock_x5ryq_5 {\n  display: block;\n}");
+var blockTooltipStyles = {"block":"_block_x5ryq_1","hoverableBlock":"_hoverableBlock_x5ryq_5"};
+
+export { blockTooltipStyles as default };
+//# sourceMappingURL=BlockTooltip.module.scss.js.map

package/dist/components/Choice/components/BlockTooltip.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTooltip.module.scss.js","sources":["../../../../src/components/Choice/components/BlockTooltip.module.scss"],"sourcesContent":[".block {\n  display: block;\n}\n\n.hoverableBlock {\n  display: block;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,6FAAA;;;;;"}

package/dist/components/Choice/components/styled.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var styled = require('styled-components');
-var Tooltip = require('../../Tooltip/Tooltip.cjs');
 var index = require('../../../theme/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -18,10 +17,8 @@ const AccessoryLayout = styled__default.default.div.withConfig({ displayName: "v
 const TextLayout = styled__default.default.div.withConfig({ displayName: "vui--TextLayout", componentId: "vui--1uu3ed5" }) `flex:1;& > * + *{margin-top:${index.theme.sizes.sm};}`;
 const Wrapper = styled__default.default.label.withConfig({ displayName: "vui--Wrapper", componentId: "vui--taq5r4" }) `box-sizing:border-box;&:hover{cursor:${(props) => (props.disabled ? 'default' : 'pointer')};}`;
 const BorderedWrapper = styled__default.default(Wrapper).withConfig({ displayName: "vui--BorderedWrapper", componentId: "vui--f5wv6j" }) `border:2px solid ${index.theme.colors.neutral.grey.dark};border-radius:${index.theme.radius.md};padding:${index.theme.sizes.base} 0.75rem;&:hover{border-color:${index.theme.colors.secondary.blue.base};}`;
-const BlockTooltip = styled__default.default(Tooltip.Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1n3z4wy" }) `display:block;&-hoverable{display:block;}`;
 
 exports.AccessoryLayout = AccessoryLayout;
-exports.BlockTooltip = BlockTooltip;
 exports.BorderedWrapper = BorderedWrapper;
 exports.InputLayout = InputLayout;
 exports.RootLayout = RootLayout;

package/dist/components/Choice/components/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Choice/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Tooltip } from '../../Tooltip';\nimport { theme } from '../../../theme';\n\nconst alignMap = {\n  top: 'flex-start',\n  center: 'center',\n};\n\nexport const RootLayout = styled.div`\n  display: flex;\n  align-items: center;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nexport interface InputLayoutProps {\n  align: 'top' | 'center';\n}\n\nexport const InputLayout = styled.div<InputLayoutProps>`\n  align-self: stretch;\n  display: flex;\n  align-items: ${(props) => alignMap[props.align]};\n`;\n\nexport const AccessoryLayout = styled.div`\n  align-self: center;\n  display: flex;\n  align-items: center;\n`;\n\nexport const TextLayout = styled.div`\n  flex: 1;\n\n  & > * + * {\n    margin-top: ${theme.sizes.sm};\n  }\n`;\n\nexport const Wrapper = styled.label<{ disabled: boolean }>`\n  box-sizing: border-box;\n\n  &:hover {\n    cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n  }\n`;\n\nexport const BorderedWrapper = styled(Wrapper)`\n  border: 2px solid ${theme.colors.neutral.grey.dark};\n  border-radius: ${theme.radius.md};\n  padding: ${theme.sizes.base} 0.75rem;\n\n  &:hover {\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n`;\n\nexport const BlockTooltip = styled(Tooltip)`\n  /* Tooltip uses inline-block containers which add more height when\n     the child component is an inline element (e.g. Glyph or an SVG),\n     so we need to set to block to preserve the height and fix alignment. */\n  display: block;\n  &-hoverable {\n    display: block;\n  }\n`;\n"],"names":["styled","theme","Tooltip"],"mappings":";;;;;;;;;;AAIA,MAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,YAAY;AACjB,IAAA,MAAM,EAAE,QAAQ;CACjB;AAEM,MAAM,UAAU,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sDAAA,EAKjBC,WAAK,CAAC,KAAK,CAAC,IAAI;MAQtB,WAAW,GAAGD,uBAAM,CAAC,GAAG,6HAGpB,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;MAGpC,eAAe,GAAGA,uBAAM,CAAC,GAAG;AAMlC,MAAM,UAAU,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4BAAA,EAIlBC,WAAK,CAAC,KAAK,CAAC,EAAE;AAIzB,MAAM,OAAO,GAAGD,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAIrB,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,EAAA;AAI1D,MAAM,eAAe,GAAGA,uBAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EACxBC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,eAAA,EACjCA,WAAK,CAAC,MAAM,CAAC,EAAE,CAAA,SAAA,EACrBA,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,8BAAA,EAGTA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;MAIvC,YAAY,GAAGD,uBAAM,CAACE,eAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yCAAA;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Choice/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst alignMap = {\n  top: 'flex-start',\n  center: 'center',\n};\n\nexport const RootLayout = styled.div`\n  display: flex;\n  align-items: center;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nexport interface InputLayoutProps {\n  align: 'top' | 'center';\n}\n\nexport const InputLayout = styled.div<InputLayoutProps>`\n  align-self: stretch;\n  display: flex;\n  align-items: ${(props) => alignMap[props.align]};\n`;\n\nexport const AccessoryLayout = styled.div`\n  align-self: center;\n  display: flex;\n  align-items: center;\n`;\n\nexport const TextLayout = styled.div`\n  flex: 1;\n\n  & > * + * {\n    margin-top: ${theme.sizes.sm};\n  }\n`;\n\nexport const Wrapper = styled.label<{ disabled: boolean }>`\n  box-sizing: border-box;\n\n  &:hover {\n    cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n  }\n`;\n\nexport const BorderedWrapper = styled(Wrapper)`\n  border: 2px solid ${theme.colors.neutral.grey.dark};\n  border-radius: ${theme.radius.md};\n  padding: ${theme.sizes.base} 0.75rem;\n\n  &:hover {\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGA,MAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,YAAY;AACjB,IAAA,MAAM,EAAE,QAAQ;CACjB;AAEM,MAAM,UAAU,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sDAAA,EAKjBC,WAAK,CAAC,KAAK,CAAC,IAAI;MAQtB,WAAW,GAAGD,uBAAM,CAAC,GAAG,6HAGpB,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;MAGpC,eAAe,GAAGA,uBAAM,CAAC,GAAG;AAMlC,MAAM,UAAU,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4BAAA,EAIlBC,WAAK,CAAC,KAAK,CAAC,EAAE;AAIzB,MAAM,OAAO,GAAGD,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAIrB,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,EAAA;AAI1D,MAAM,eAAe,GAAGA,uBAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EACxBC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,eAAA,EACjCA,WAAK,CAAC,MAAM,CAAC,EAAE,CAAA,SAAA,EACrBA,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,8BAAA,EAGTA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;;;;;;;;;"}

package/dist/components/Choice/components/styled.d.ts

@@ -11,4 +11,3 @@ export declare const Wrapper: import("styled-components").StyledComponent<"label
 export declare const BorderedWrapper: import("styled-components").StyledComponent<"label", any, {
     disabled: boolean;
 }, never>;
-export declare const BlockTooltip: import("styled-components").StyledComponent<({ children, text, content, config, reversed, className, withTriangle, initialShouldShow, useReactPortal, }: import("../../Tooltip/types").TooltipProps) => JSX.Element | null, any, {}, never>;

package/dist/components/Choice/components/styled.js

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { Tooltip } from '../../Tooltip/Tooltip.js';
 import { theme } from '../../../theme/index.js';
 
 const alignMap = {
@@ -12,7 +11,6 @@ const AccessoryLayout = styled.div.withConfig({ displayName: "vui--AccessoryLayo
 const TextLayout = styled.div.withConfig({ displayName: "vui--TextLayout", componentId: "vui--1uu3ed5" }) `flex:1;& > * + *{margin-top:${theme.sizes.sm};}`;
 const Wrapper = styled.label.withConfig({ displayName: "vui--Wrapper", componentId: "vui--taq5r4" }) `box-sizing:border-box;&:hover{cursor:${(props) => (props.disabled ? 'default' : 'pointer')};}`;
 const BorderedWrapper = styled(Wrapper).withConfig({ displayName: "vui--BorderedWrapper", componentId: "vui--f5wv6j" }) `border:2px solid ${theme.colors.neutral.grey.dark};border-radius:${theme.radius.md};padding:${theme.sizes.base} 0.75rem;&:hover{border-color:${theme.colors.secondary.blue.base};}`;
-const BlockTooltip = styled(Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1n3z4wy" }) `display:block;&-hoverable{display:block;}`;
 
-export { AccessoryLayout, BlockTooltip, BorderedWrapper, InputLayout, RootLayout, TextLayout, Wrapper };
+export { AccessoryLayout, BorderedWrapper, InputLayout, RootLayout, TextLayout, Wrapper };
 //# sourceMappingURL=styled.js.map

package/dist/components/Choice/components/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/Choice/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Tooltip } from '../../Tooltip';\nimport { theme } from '../../../theme';\n\nconst alignMap = {\n  top: 'flex-start',\n  center: 'center',\n};\n\nexport const RootLayout = styled.div`\n  display: flex;\n  align-items: center;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nexport interface InputLayoutProps {\n  align: 'top' | 'center';\n}\n\nexport const InputLayout = styled.div<InputLayoutProps>`\n  align-self: stretch;\n  display: flex;\n  align-items: ${(props) => alignMap[props.align]};\n`;\n\nexport const AccessoryLayout = styled.div`\n  align-self: center;\n  display: flex;\n  align-items: center;\n`;\n\nexport const TextLayout = styled.div`\n  flex: 1;\n\n  & > * + * {\n    margin-top: ${theme.sizes.sm};\n  }\n`;\n\nexport const Wrapper = styled.label<{ disabled: boolean }>`\n  box-sizing: border-box;\n\n  &:hover {\n    cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n  }\n`;\n\nexport const BorderedWrapper = styled(Wrapper)`\n  border: 2px solid ${theme.colors.neutral.grey.dark};\n  border-radius: ${theme.radius.md};\n  padding: ${theme.sizes.base} 0.75rem;\n\n  &:hover {\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n`;\n\nexport const BlockTooltip = styled(Tooltip)`\n  /* Tooltip uses inline-block containers which add more height when\n     the child component is an inline element (e.g. Glyph or an SVG),\n     so we need to set to block to preserve the height and fix alignment. */\n  display: block;\n  &-hoverable {\n    display: block;\n  }\n`;\n"],"names":[],"mappings":";;;;AAIA,MAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,YAAY;AACjB,IAAA,MAAM,EAAE,QAAQ;CACjB;AAEM,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sDAAA,EAKjB,KAAK,CAAC,KAAK,CAAC,IAAI;MAQtB,WAAW,GAAG,MAAM,CAAC,GAAG,6HAGpB,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;MAGpC,eAAe,GAAG,MAAM,CAAC,GAAG;AAMlC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4BAAA,EAIlB,KAAK,CAAC,KAAK,CAAC,EAAE;AAIzB,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAIrB,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,EAAA;AAI1D,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EACxB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,eAAA,EACjC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAA,SAAA,EACrB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,8BAAA,EAGT,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;MAIvC,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yCAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/Choice/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst alignMap = {\n  top: 'flex-start',\n  center: 'center',\n};\n\nexport const RootLayout = styled.div`\n  display: flex;\n  align-items: center;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nexport interface InputLayoutProps {\n  align: 'top' | 'center';\n}\n\nexport const InputLayout = styled.div<InputLayoutProps>`\n  align-self: stretch;\n  display: flex;\n  align-items: ${(props) => alignMap[props.align]};\n`;\n\nexport const AccessoryLayout = styled.div`\n  align-self: center;\n  display: flex;\n  align-items: center;\n`;\n\nexport const TextLayout = styled.div`\n  flex: 1;\n\n  & > * + * {\n    margin-top: ${theme.sizes.sm};\n  }\n`;\n\nexport const Wrapper = styled.label<{ disabled: boolean }>`\n  box-sizing: border-box;\n\n  &:hover {\n    cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n  }\n`;\n\nexport const BorderedWrapper = styled(Wrapper)`\n  border: 2px solid ${theme.colors.neutral.grey.dark};\n  border-radius: ${theme.radius.md};\n  padding: ${theme.sizes.base} 0.75rem;\n\n  &:hover {\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n`;\n"],"names":[],"mappings":";;;AAGA,MAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,YAAY;AACjB,IAAA,MAAM,EAAE,QAAQ;CACjB;AAEM,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sDAAA,EAKjB,KAAK,CAAC,KAAK,CAAC,IAAI;MAQtB,WAAW,GAAG,MAAM,CAAC,GAAG,6HAGpB,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;MAGpC,eAAe,GAAG,MAAM,CAAC,GAAG;AAMlC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4BAAA,EAIlB,KAAK,CAAC,KAAK,CAAC,EAAE;AAIzB,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAIrB,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,EAAA;AAI1D,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EACxB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,eAAA,EACjC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAA,SAAA,EACrB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,8BAAA,EAGT,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs

@@ -13,6 +13,9 @@ require('../../../../../theme/modules/sizes.cjs');
 require('../../../../../theme/modules/text.cjs');
 require('styled-components');
 require('../../../../Choice/components/styled.cjs');
+require('framer-motion');
+require('../../../../Tooltip/components/TooltipPopover.cjs');
+require('react-dom');
 require('../../../../Text/Text.cjs');
 require('../../../../Checkbox/styled.cjs');
 require('../../../../Radio/Radio.cjs');

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled for the grid.\n   */\n  enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n  cell,\n  ariaRoles,\n  enableRowSelection,\n  enableExpanding,\n}: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n    cell,\n    enableExpanding,\n    enableRowSelection,\n  });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  const cellContext = cell.getContext();\n  const cellTestId = useMemo(\n    () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n    [generateDataTestId, cellContext.row.original],\n  );\n\n  const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n  // Capture shift key state for range selection in selection column.\n  const captureShiftKeyForSelection = isSelectionCol\n    ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n        if ('key' in e && e.key !== ' ') return;\n\n        const { row, table } = cell.getContext();\n        if (!row.getCanSelect()) return;\n\n        const { rangeSelectionState } = table.options.meta || {};\n        if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n      }\n    : undefined;\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n      data-testid={cellTestId}\n    >\n      <CellContent\n        contentStyle={\n          {\n            marginLeft: contentMarginLeft,\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n        expandButtonProps={expandButtonProps}\n        onMouseDown={captureShiftKeyForSelection}\n        onKeyDown={captureShiftKeyForSelection}\n      >\n        {flexRender(cell.column.columnDef.cell, cellContext)}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","useMemo","SELECTION_COLUMN_ID","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAGC,mCAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAGC,aAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAKC,6BAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErCC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}
+{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled for the grid.\n   */\n  enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n  cell,\n  ariaRoles,\n  enableRowSelection,\n  enableExpanding,\n}: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n    cell,\n    enableExpanding,\n    enableRowSelection,\n  });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  const cellContext = cell.getContext();\n  const cellTestId = useMemo(\n    () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n    [generateDataTestId, cellContext.row.original],\n  );\n\n  const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n  // Capture shift key state for range selection in selection column.\n  const captureShiftKeyForSelection = isSelectionCol\n    ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n        if ('key' in e && e.key !== ' ') return;\n\n        const { row, table } = cell.getContext();\n        if (!row.getCanSelect()) return;\n\n        const { rangeSelectionState } = table.options.meta || {};\n        if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n      }\n    : undefined;\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n      data-testid={cellTestId}\n    >\n      <CellContent\n        contentStyle={\n          {\n            marginLeft: contentMarginLeft,\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n        expandButtonProps={expandButtonProps}\n        onMouseDown={captureShiftKeyForSelection}\n        onKeyDown={captureShiftKeyForSelection}\n      >\n        {flexRender(cell.column.columnDef.cell, cellContext)}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","useMemo","SELECTION_COLUMN_ID","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAGC,mCAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAGC,aAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAKC,6BAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErCC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js

@@ -11,6 +11,9 @@ import '../../../../../theme/modules/sizes.js';
 import '../../../../../theme/modules/text.js';
 import 'styled-components';
 import '../../../../Choice/components/styled.js';
+import 'framer-motion';
+import '../../../../Tooltip/components/TooltipPopover.js';
+import 'react-dom';
 import '../../../../Text/Text.js';
 import '../../../../Checkbox/styled.js';
 import '../../../../Radio/Radio.js';

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled for the grid.\n   */\n  enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n  cell,\n  ariaRoles,\n  enableRowSelection,\n  enableExpanding,\n}: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n    cell,\n    enableExpanding,\n    enableRowSelection,\n  });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  const cellContext = cell.getContext();\n  const cellTestId = useMemo(\n    () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n    [generateDataTestId, cellContext.row.original],\n  );\n\n  const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n  // Capture shift key state for range selection in selection column.\n  const captureShiftKeyForSelection = isSelectionCol\n    ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n        if ('key' in e && e.key !== ' ') return;\n\n        const { row, table } = cell.getContext();\n        if (!row.getCanSelect()) return;\n\n        const { rangeSelectionState } = table.options.meta || {};\n        if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n      }\n    : undefined;\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n      data-testid={cellTestId}\n    >\n      <CellContent\n        contentStyle={\n          {\n            marginLeft: contentMarginLeft,\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n        expandButtonProps={expandButtonProps}\n        onMouseDown={captureShiftKeyForSelection}\n        onKeyDown={captureShiftKeyForSelection}\n      >\n        {flexRender(cell.column.columnDef.cell, cellContext)}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,mBAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}
+{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled for the grid.\n   */\n  enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n  cell,\n  ariaRoles,\n  enableRowSelection,\n  enableExpanding,\n}: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n    cell,\n    enableExpanding,\n    enableRowSelection,\n  });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  const cellContext = cell.getContext();\n  const cellTestId = useMemo(\n    () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n    [generateDataTestId, cellContext.row.original],\n  );\n\n  const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n  // Capture shift key state for range selection in selection column.\n  const captureShiftKeyForSelection = isSelectionCol\n    ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n        if ('key' in e && e.key !== ' ') return;\n\n        const { row, table } = cell.getContext();\n        if (!row.getCanSelect()) return;\n\n        const { rangeSelectionState } = table.options.meta || {};\n        if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n      }\n    : undefined;\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n      data-testid={cellTestId}\n    >\n      <CellContent\n        contentStyle={\n          {\n            marginLeft: contentMarginLeft,\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n        expandButtonProps={expandButtonProps}\n        onMouseDown={captureShiftKeyForSelection}\n        onKeyDown={captureShiftKeyForSelection}\n      >\n        {flexRender(cell.column.columnDef.cell, cellContext)}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,mBAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs

@@ -9,6 +9,9 @@ require('@tanstack/react-table');
 require('../../../../Stack/Stack.cjs');
 var index = require('../../../../../theme/index.cjs');
 require('../../../../Choice/components/styled.cjs');
+require('framer-motion');
+require('../../../../Tooltip/components/TooltipPopover.cjs');
+require('react-dom');
 require('../../../../Text/Text.cjs');
 require('../../../../Checkbox/styled.cjs');
 require('../../../../Radio/Radio.cjs');

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingBodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n  /**\n   * The TanStack Table column instance.\n   */\n  column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n  const { justifyContent, textAlign } = column.columnDef.meta!;\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column,\n  });\n\n  const loadingCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n    'data-grid-cell-loading',\n  ]);\n\n  return (\n    <td\n      className={loadingCellClassname}\n      style={pinnedCellStyles}\n      aria-colindex={column.getIndex() + 1}\n    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        <Skeleton width=\"75%\" height={theme.sizes[3]} />\n      </CellContent>\n    </td>\n  );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","Skeleton","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAGC,+BAAe,CAAC;AAC3C,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EACV,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAQ,EAAA,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}
+{"version":3,"file":"LoadingBodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n  /**\n   * The TanStack Table column instance.\n   */\n  column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n  const { justifyContent, textAlign } = column.columnDef.meta!;\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column,\n  });\n\n  const loadingCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n    'data-grid-cell-loading',\n  ]);\n\n  return (\n    <td\n      className={loadingCellClassname}\n      style={pinnedCellStyles}\n      aria-colindex={column.getIndex() + 1}\n    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        <Skeleton width=\"75%\" height={theme.sizes[3]} />\n      </CellContent>\n    </td>\n  );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","Skeleton","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAGC,+BAAe,CAAC;AAC3C,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EACV,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAQ,EAAA,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js

@@ -7,6 +7,9 @@ import '@tanstack/react-table';
 import '../../../../Stack/Stack.js';
 import { theme } from '../../../../../theme/index.js';
 import '../../../../Choice/components/styled.js';
+import 'framer-motion';
+import '../../../../Tooltip/components/TooltipPopover.js';
+import 'react-dom';
 import '../../../../Text/Text.js';
 import '../../../../Checkbox/styled.js';
 import '../../../../Radio/Radio.js';

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingBodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n  /**\n   * The TanStack Table column instance.\n   */\n  column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n  const { justifyContent, textAlign } = column.columnDef.meta!;\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column,\n  });\n\n  const loadingCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n    'data-grid-cell-loading',\n  ]);\n\n  return (\n    <td\n      className={loadingCellClassname}\n      style={pinnedCellStyles}\n      aria-colindex={column.getIndex() + 1}\n    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        <Skeleton width=\"75%\" height={theme.sizes[3]} />\n      </CellContent>\n    </td>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAC3C,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}
+{"version":3,"file":"LoadingBodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n  /**\n   * The TanStack Table column instance.\n   */\n  column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n  const { justifyContent, textAlign } = column.columnDef.meta!;\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column,\n  });\n\n  const loadingCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n    'data-grid-cell-loading',\n  ]);\n\n  return (\n    <td\n      className={loadingCellClassname}\n      style={pinnedCellStyles}\n      aria-colindex={column.getIndex() + 1}\n    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        <Skeleton width=\"75%\" height={theme.sizes[3]} />\n      </CellContent>\n    </td>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAC3C,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs

@@ -13,6 +13,9 @@ var usePinnedColumnLayout = require('../../hooks/usePinnedColumnLayout.cjs');
 require('@tanstack/react-table');
 require('../../../Stack/Stack.cjs');
 require('../../../Choice/components/styled.cjs');
+require('framer-motion');
+require('../../../Tooltip/components/TooltipPopover.cjs');
+require('react-dom');
 require('../../../Text/Text.cjs');
 require('../../../Checkbox/styled.cjs');
 require('../../../Radio/Radio.cjs');

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n  Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n    /**\n     * Reference to be used for the outer container element.\n     */\n    containerRef?: RefObject<HTMLDivElement>;\n\n    /**\n     * Reference to be used for the table element.\n     */\n    tableRef?: RefObject<HTMLTableElement>;\n\n    /**\n     * Border mode.\n     */\n    borderMode: BorderMode;\n\n    /**\n     * Additional container styles.\n     */\n    containerStyles?: CSSProperties;\n\n    /**\n     * ARIA roles used in the grid.\n     */\n    ariaRoles: AriaRoles;\n\n    /**\n     * Whether resizeable columns are enabled or not.\n     */\n    enableResizeableColumns: boolean;\n\n    /**\n     * Density of the grid.\n     */\n    density: keyof SizeScale;\n\n    /**\n     * The TanStack Table instance.\n     */\n    table: Table<any>;\n\n    /**\n     * Child elements (table contents).\n     */\n    children: ReactNode;\n  };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n  const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n  // CSS variables to control pinned column shadow visibility\n  const hideShadows = !scrollPosition || scrollPosition === 'none';\n  const shadowVisibility = {\n    '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n    '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n    '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n  };\n\n  return (\n    <Container\n      ref={containerRef}\n      borderMode={borderMode}\n      style={containerStyles}\n      onScroll={onScroll}\n    >\n      <table\n        id={id}\n        ref={tableRef}\n        className={buildClassnames([gridContainerClassname, className])}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n            ...shadowVisibility,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAGC,mCAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEJ,+BAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEM,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
+{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n  Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n    /**\n     * Reference to be used for the outer container element.\n     */\n    containerRef?: RefObject<HTMLDivElement>;\n\n    /**\n     * Reference to be used for the table element.\n     */\n    tableRef?: RefObject<HTMLTableElement>;\n\n    /**\n     * Border mode.\n     */\n    borderMode: BorderMode;\n\n    /**\n     * Additional container styles.\n     */\n    containerStyles?: CSSProperties;\n\n    /**\n     * ARIA roles used in the grid.\n     */\n    ariaRoles: AriaRoles;\n\n    /**\n     * Whether resizeable columns are enabled or not.\n     */\n    enableResizeableColumns: boolean;\n\n    /**\n     * Density of the grid.\n     */\n    density: keyof SizeScale;\n\n    /**\n     * The TanStack Table instance.\n     */\n    table: Table<any>;\n\n    /**\n     * Child elements (table contents).\n     */\n    children: ReactNode;\n  };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n  const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n  // CSS variables to control pinned column shadow visibility\n  const hideShadows = !scrollPosition || scrollPosition === 'none';\n  const shadowVisibility = {\n    '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n    '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n    '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n  };\n\n  return (\n    <Container\n      ref={containerRef}\n      borderMode={borderMode}\n      style={containerStyles}\n      onScroll={onScroll}\n    >\n      <table\n        id={id}\n        ref={tableRef}\n        className={buildClassnames([gridContainerClassname, className])}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n            ...shadowVisibility,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAGC,mCAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEJ,+BAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEM,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.js

@@ -11,6 +11,9 @@ import { usePinnedColumnLayout } from '../../hooks/usePinnedColumnLayout.js';
 import '@tanstack/react-table';
 import '../../../Stack/Stack.js';
 import '../../../Choice/components/styled.js';
+import 'framer-motion';
+import '../../../Tooltip/components/TooltipPopover.js';
+import 'react-dom';
 import '../../../Text/Text.js';
 import '../../../Checkbox/styled.js';
 import '../../../Radio/Radio.js';

package/dist/components/DataGrid/components/GridContainer/GridContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n  Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n    /**\n     * Reference to be used for the outer container element.\n     */\n    containerRef?: RefObject<HTMLDivElement>;\n\n    /**\n     * Reference to be used for the table element.\n     */\n    tableRef?: RefObject<HTMLTableElement>;\n\n    /**\n     * Border mode.\n     */\n    borderMode: BorderMode;\n\n    /**\n     * Additional container styles.\n     */\n    containerStyles?: CSSProperties;\n\n    /**\n     * ARIA roles used in the grid.\n     */\n    ariaRoles: AriaRoles;\n\n    /**\n     * Whether resizeable columns are enabled or not.\n     */\n    enableResizeableColumns: boolean;\n\n    /**\n     * Density of the grid.\n     */\n    density: keyof SizeScale;\n\n    /**\n     * The TanStack Table instance.\n     */\n    table: Table<any>;\n\n    /**\n     * Child elements (table contents).\n     */\n    children: ReactNode;\n  };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n  const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n  // CSS variables to control pinned column shadow visibility\n  const hideShadows = !scrollPosition || scrollPosition === 'none';\n  const shadowVisibility = {\n    '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n    '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n    '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n  };\n\n  return (\n    <Container\n      ref={containerRef}\n      borderMode={borderMode}\n      style={containerStyles}\n      onScroll={onScroll}\n    >\n      <table\n        id={id}\n        ref={tableRef}\n        className={buildClassnames([gridContainerClassname, className])}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n            ...shadowVisibility,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
+{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n  Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n    /**\n     * Reference to be used for the outer container element.\n     */\n    containerRef?: RefObject<HTMLDivElement>;\n\n    /**\n     * Reference to be used for the table element.\n     */\n    tableRef?: RefObject<HTMLTableElement>;\n\n    /**\n     * Border mode.\n     */\n    borderMode: BorderMode;\n\n    /**\n     * Additional container styles.\n     */\n    containerStyles?: CSSProperties;\n\n    /**\n     * ARIA roles used in the grid.\n     */\n    ariaRoles: AriaRoles;\n\n    /**\n     * Whether resizeable columns are enabled or not.\n     */\n    enableResizeableColumns: boolean;\n\n    /**\n     * Density of the grid.\n     */\n    density: keyof SizeScale;\n\n    /**\n     * The TanStack Table instance.\n     */\n    table: Table<any>;\n\n    /**\n     * Child elements (table contents).\n     */\n    children: ReactNode;\n  };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n  const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n  // CSS variables to control pinned column shadow visibility\n  const hideShadows = !scrollPosition || scrollPosition === 'none';\n  const shadowVisibility = {\n    '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n    '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n    '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n  };\n\n  return (\n    <Container\n      ref={containerRef}\n      borderMode={borderMode}\n      style={containerStyles}\n      onScroll={onScroll}\n    >\n      <table\n        id={id}\n        ref={tableRef}\n        className={buildClassnames([gridContainerClassname, className])}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n            ...shadowVisibility,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs

@@ -12,6 +12,9 @@ require('../../../../../theme/modules/sizes.cjs');
 require('../../../../../theme/modules/text.cjs');
 require('styled-components');
 require('../../../../Choice/components/styled.cjs');
+require('framer-motion');
+require('../../../../Tooltip/components/TooltipPopover.cjs');
+require('react-dom');
 require('../../../../Text/Text.cjs');
 require('../../../../Checkbox/styled.cjs');
 require('../../../../Radio/Radio.cjs');