@ntbjs/react-components 2.0.14 → 3.0.0-rc.1

package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetGalleryGridCard.styled.js","sources":["../../../../../src/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js"],"sourcesContent":["import { rgba } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../../../utils/defaultTheme';\n\nconst darkBorderColor = '#52525B';\nconst darkBgColor = '#27272A';\nconst darkHoverBgColor = '#3F3F46';\nconst lightHoverBgColor = '#E4E4E7';\n\nexport const AssetGalleryWrapper = styled.div.attrs(applyDefaultTheme)`\n  width: 100%;\n  height: 100%;\n  ${props =>\n    props.disabled &&\n    css`\n      cursor: not-allowed;\n    `};\n`;\n\nconst ringState = props => {\n  if (props.selected) return props.$customSelectedBorder ? 'custom' : 'selected';\n  if (props.$softSelected) return 'soft';\n  if (props.completed) return 'completed';\n  if (props.$hasError) return 'error';\n  return 'idle';\n};\n\nexport const AssetGalleryGridCard = styled.div.attrs(props => ({\n  ...applyDefaultTheme(props),\n  'data-ring': ringState(props),\n  style: {\n    ...(props.style || {}),\n    ...(props.$customSelectedBorder && props.selected\n      ? {\n          '--ring-dark': props.$customSelectedBorder[0],\n          '--ring-light': props.$customSelectedBorder[1]\n        }\n      : {})\n  }\n}))`\n  display: block;\n  position: relative;\n  height: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n  transition: box-shadow 220ms;\n  overflow: hidden;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-700')\n    )}\n\n  ${props =>\n    props.disabled &&\n    css`\n      pointer-events: none;\n      opacity: 0.4;\n    `};\n\n  ${props =>\n    props.extendedSelectMode &&\n    css`\n      cursor: pointer;\n    `}\n\n  &:hover {\n    box-shadow: 0px 3px 6px #00000029;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    box-sizing: border-box;\n    z-index: 10;\n    border-style: solid;\n    border-width: 1px;\n  }\n  &[data-ring='soft']::after,\n  &[data-ring='selected']::after,\n  &[data-ring='custom']::after,\n  &[data-ring='completed']::after,\n  &[data-ring='error']::after {\n    border-width: 3px;\n  }\n\n  ${props => {\n    const gray100 = props.theme.getColor('gray-100');\n    const gray300 = props.theme.getColor('gray-300');\n    const gray700 = props.theme.getColor('gray-700');\n    const emerald = props.theme.getColor('emerald-500');\n    const red500 = props.theme.getColor('red-500');\n    const red600 = props.theme.getColor('red-600');\n    return css`\n      &[data-ring='idle']::after {\n        border-color: ${gray300};\n      }\n      &[data-ring='soft']::after {\n        border-color: ${rgba(gray700, 0.5)};\n      }\n      &[data-ring='selected']::after {\n        border-color: ${darkBorderColor};\n      }\n      &[data-ring='custom']::after {\n        border-color: var(--ring-light);\n      }\n      &[data-ring='completed']::after {\n        border-color: ${rgba(emerald, 0.7)};\n      }\n      &[data-ring='error']::after {\n        border-color: ${rgba(red500, 0.7)};\n      }\n\n      @media (prefers-color-scheme: dark) {\n        &[data-ring='idle']::after {\n          border-color: ${darkBorderColor};\n        }\n        &[data-ring='soft']::after {\n          border-color: ${rgba(gray100, 0.5)};\n        }\n        &[data-ring='selected']::after {\n          border-color: ${gray100};\n        }\n        &[data-ring='custom']::after {\n          border-color: var(--ring-dark);\n        }\n        &[data-ring='completed']::after {\n          border-color: ${emerald};\n        }\n        &[data-ring='error']::after {\n          border-color: ${red600};\n        }\n      }\n      body.light-theme &[data-ring='idle']::after {\n        border-color: ${gray300};\n      }\n      body.light-theme &[data-ring='soft']::after {\n        border-color: ${rgba(gray700, 0.5)};\n      }\n      body.light-theme &[data-ring='selected']::after {\n        border-color: ${darkBorderColor};\n      }\n      body.light-theme &[data-ring='custom']::after {\n        border-color: var(--ring-light);\n      }\n      body.light-theme &[data-ring='completed']::after {\n        border-color: ${rgba(emerald, 0.7)};\n      }\n      body.light-theme &[data-ring='error']::after {\n        border-color: ${rgba(red500, 0.7)};\n      }\n      body.dark-theme &[data-ring='idle']::after {\n        border-color: ${darkBorderColor};\n      }\n      body.dark-theme &[data-ring='soft']::after {\n        border-color: ${rgba(gray100, 0.5)};\n      }\n      body.dark-theme &[data-ring='selected']::after {\n        border-color: ${gray100};\n      }\n      body.dark-theme &[data-ring='custom']::after {\n        border-color: var(--ring-dark);\n      }\n      body.dark-theme &[data-ring='completed']::after {\n        border-color: ${emerald};\n      }\n      body.dark-theme &[data-ring='error']::after {\n        border-color: ${red600};\n      }\n    `;\n  }};\n`;\n\nexport const ThumbnailSection = styled.div.attrs(applyDefaultTheme)`\n  position: relative;\n  overflow: hidden;\n  transition: background 220ms;\n  ${props => props.theme.themeProp('background', darkBgColor, props.theme.getColor('gray-50'))}\n  ${AssetGalleryGridCard}:hover & {\n    ${props => props.theme.themeProp('background', darkHoverBgColor, lightHoverBgColor, 1)}\n  }\n`;\n\n// ── Top bar ──────────────────────────────────────────────────────────────────\n\nexport const HorizontalBar = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px;\n  height: 40px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 2;\n`;\n\nexport const HorizontalBarLeft = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const HorizontalBarRight = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const StatusIconCircle = styled.span.attrs(applyDefaultTheme)`\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  pointer-events: none;\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n`;\n\n// ── Thumbnail ─────────────────────────────────────────────────────────────────\n\nexport const ThumbnailRow = styled.div`\n  position: relative;\n  display: flex;\n  width: 100%;\n`;\n\nexport const ThumbnailSpacer = styled.div`\n  flex: 1;\n`;\n\nexport const ThumbnailWrapper = styled.div`\n  width: max(66%, 268px);\n  flex-shrink: 0;\n`;\n\nexport const ThumbnailBox = styled.div.attrs(applyDefaultTheme)`\n  position: relative;\n  height: 168px;\n\n  flex-shrink: 0;\n  overflow: hidden;\n\n  img,\n  video {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    display: block;\n  }\n\n  .audio {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    svg {\n      width: 35%;\n      ${props =>\n        props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-400'),\n          props.theme.getColor('gray-400')\n        )}\n    }\n  }\n`;\n\nexport const ThumbnailSelectedOverlay = styled.div.attrs(applyDefaultTheme)`\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  opacity: ${props => (props.selected ? 0.6 : 0)};\n  background-color: #accef7;\n  transition: opacity 220ms;\n  z-index: 1;\n`;\n\nexport const ThumbnailActions = styled.div`\n  flex: 1;\n`;\n\nexport const ActionsContainer = styled.div.attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: end;\n  flex-direction: column;\n  gap: 8px;\n  opacity: 0;\n  transition: opacity 220ms;\n  z-index: 1;\n  position: absolute;\n  right: 8px;\n  ${AssetGalleryGridCard}:hover & {\n    opacity: 1;\n  }\n\n  ${AssetGalleryGridCard}:focus-within & {\n    opacity: 1;\n  }\n`;\n\nexport const Action = styled.div`\n  margin: 0;\n\n  button {\n    box-shadow: 0px 3px 6px #00000033;\n  }\n  svg {\n    width: 16px;\n    height: 16px;\n    max-height: unset;\n    max-width: unset;\n  }\n`;\n\nexport const ConsumerOverlay = styled.div`\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 1;\n`;\n\n// ── Card body ─────────────────────────────────────────────────────────────────\n\nexport const CardBody = styled.div.attrs(applyDefaultTheme)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  padding: 16px 0px 0px 0px;\n`;\n\nexport const CardTitle = styled.span.attrs(applyDefaultTheme)`\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 0px 16px;\n  font: normal normal 500 14px/19px Roboto;\n  letter-spacing: 0.28px;\n  height: 19px;\n  box-sizing: border-box;\n\n  ${props =>\n    props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))}\n`;\n\nexport const CardDescription = styled.span.attrs(applyDefaultTheme)`\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 6px 16px;\n  font: normal normal normal 12px/1.286em Roboto;\n  letter-spacing: 0.24px;\n  height: 52px;\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  word-break: break-word;\n\n  ${props =>\n    props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))}\n`;\n\nexport const InstructionsWrapper = styled.div.attrs(applyDefaultTheme)`\n  min-height: 96px;\n  margin-top: 16px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  transition: background 220ms;\n  opacity: 0;\n  ${props =>\n    props.$hasContent &&\n    css`\n      opacity: 1;\n      border-top: 0.56px solid;\n      border-bottom: 0.56px solid;\n      ${props.theme.themeProp('border-color', darkBorderColor, props.theme.getColor('gray-300'))}\n    `}\n\n  ${props =>\n    props.$hasContent &&\n    css`\n      opacity: 1;\n      ${props.theme.themeProp('background', darkBgColor, props.theme.getColor('gray-50'))}\n      ${AssetGalleryGridCard}:hover & {\n        ${props.theme.themeProp('background', darkHoverBgColor, lightHoverBgColor, 1)}\n      }\n    `}\n`;\n\nexport const CardFooter = styled.div.attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0px 16px;\n  min-height: 52px;\n  box-sizing: border-box;\n`;\n\nexport const CardFooterLeft = styled.div`\n  display: flex;\n  align-items: center;\n  > * {\n    margin-right: 4px;\n  }\n`;\n\nexport const CardFooterRight = styled.div`\n  display: flex;\n  align-items: center;\n  > * {\n    margin-left: 4px;\n  }\n`;\n\nexport const CardDivider = styled.div.attrs(applyDefaultTheme)`\n  height: 1px;\n  flex-shrink: 0;\n  opacity: ${props => (props.invisible ? 0 : 1)};\n  ${props => props.theme.themeProp('background', darkBorderColor, props.theme.getColor('gray-300'))}\n`;\n\nexport const CheckboxRow = styled.div`\n  display: flex;\n  padding: 0px 16px;\n  align-items: center;\n  height: 56px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n`;\n\nexport const CheckboxButton = styled.div.attrs(applyDefaultTheme)`\n  opacity: 1;\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: opacity 220ms;\n  ${props => props.theme.themeProp('color', 'white', 'black')}\n  > svg {\n    width: 23px;\n    height: 100%;\n  }\n`;\n"],"names":["darkBorderColor","darkBgColor","darkHoverBgColor","lightHoverBgColor","AssetGalleryWrapper","styled","div","attrs","applyDefaultTheme","props","disabled","css","ringState","selected","$customSelectedBorder","$softSelected","completed","$hasError","AssetGalleryGridCard","style","theme","themeProp","getColor","extendedSelectMode","gray100","gray300","gray700","emerald","red500","red600","rgba","ThumbnailSection","HorizontalBar","HorizontalBarLeft","HorizontalBarRight","StatusIconCircle","span","ThumbnailRow","ThumbnailSpacer","ThumbnailWrapper","ThumbnailBox","ThumbnailSelectedOverlay","ThumbnailActions","ActionsContainer","Action","ConsumerOverlay","CardBody","CardTitle","CardDescription","InstructionsWrapper","$hasContent","CardFooter","CardFooterLeft","CardFooterRight","CardDivider","invisible","CheckboxRow"],"mappings":"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"}
+{"version":3,"file":"AssetGalleryGridCard.styled.js","sources":["../../../../../src/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.ts"],"sourcesContent":["/*\n * $-transient-prop pattern: rules in\n * `src/components/layout/SectionSeparator/SectionSeparator.styled.ts`, derivation and\n * measurements in `scripts/TS-MIGRATION-PLAYBOOK.md` §J.\n *\n * TWO THINGS MAKE THIS FILE DIFFERENT FROM ITS COMPACT SIBLING:\n *\n *   1. `AssetGalleryGridCard` is an `.attrs(props => …)` CALLBACK with no `.withConfig()`\n *      at all, so the generic MUST go on `.attrs<P>()`. Measured (§J.2): supplying it on\n *      the tagged-template call instead leaves the callback parameter\n *      `FastOmit<…, never>`, where the reads inside the callback have no fix but a\n *      suppression. Five props are read in there, three of them through `ringState`.\n *   2. `ringState` is a module-scope FUNCTION, not a `css` helper — a fourth kind of\n *      props-reading site. Unannotated its parameter is an implicit `any`, and because\n *      `noImplicitAny` is off that is SILENT: the file would report zero errors while\n *      five prop reads stayed unchecked. It gets an explicit parameter type and a closed\n *      return union, which is what ties the six `&[data-ring=…]` selectors below to the\n *      six values that can actually be produced.\n */\nimport { rgba } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../../../utils/defaultTheme';\n\n/*\n * Single-argument, and it stays that way — peer floor `styled-components: >=5.1.0`, and\n * the two majors disagree on the second parameter. §J.4. `prop` needs the annotation\n * because `withConfig` takes this by reference, so it gets no contextual typing.\n *\n * NOTE that `AssetGalleryGridCard` itself does NOT use this predicate — it has no\n * `.withConfig()` at all. Its prop filtering is styled-components v6 defaults plus\n * `ComputedRootComponent`'s own `omit` list, which is why the leak analysis on\n * `AssetGalleryGridCardStyleProps` above differs key by key.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nconst darkBorderColor = '#52525B';\nconst darkBgColor = '#27272A';\nconst darkHoverBgColor = '#3F3F46';\nconst lightHoverBgColor = '#E4E4E7';\n\nexport const AssetGalleryWrapper = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<Pick<AssetGalleryGridCardStyleProps, 'disabled'>>(applyDefaultTheme)`\n  width: 100%;\n  height: 100%;\n  ${props =>\n    props.disabled &&\n    css`\n      cursor: not-allowed;\n    `};\n`;\n\n/**\n * The six values `ringState` can return, and therefore the six `data-ring` attribute\n * values the selectors below match. Closed on purpose: `&[data-ring='typo']` is not a type\n * error (it is inside a template string) but `ringState` returning one is, so the union is\n * where the two halves are kept honest.\n */\ntype AssetGalleryGridCardRingState = 'custom' | 'selected' | 'soft' | 'completed' | 'error' | 'idle';\n\n/**\n * What `ringState` reads. Also the reason the card root needs a generic at all: three of\n * these five are only ever read HERE, inside the `.attrs()` callback, not in the template.\n */\ninterface AssetGalleryGridCardRingProps {\n  /**\n   * `selected` — `PropTypes.bool`.\n   *\n   * NO `$`, AND THAT IS A DEFECT — but NOT a DOM leak. `ComputedRootComponent` spreads it\n   * onto a plain `<div>` and React DROPS a boolean `selected` on any element that is not\n   * an `<option>`, silently; `selected=` occurs zero times in\n   * `scripts/r19-harness/baseline.json`. Prefixing it is still a behaviour change to\n   * review on its own (C10, §E.4) — it just would not move the baseline.\n   */\n  selected?: boolean;\n  /**\n   * `asset.completed` — `PropTypes.bool`.\n   *\n   * NO `$`, AND THAT IS A DEFECT — and again not a DOM leak, for a different reason:\n   * `ComputedRootComponent` explicitly `omit`s `completed`, and React would drop it\n   * anyway (\"Received `true` for a non-boolean attribute `completed`\"). Measured both ways.\n   */\n  completed?: boolean;\n  /** `softSelected` — `PropTypes.bool.isRequired` on the COMPONENT, optional here per §J.5. */\n  $softSelected?: boolean;\n  /** `asset.hasError` — `PropTypes.bool`. */\n  $hasError?: boolean;\n  /** `customSelectedBorder` — `PropTypes.arrayOf(PropTypes.string)`, read as\n   *  `[darkModeColor, lightModeColor]` and written into the `--ring-dark` / `--ring-light`\n   *  custom properties by the `.attrs()` callback. */\n  $customSelectedBorder?: string[];\n}\n\n/**\n * The card root's props: everything `ringState` reads, plus the two the TEMPLATE reads.\n */\ninterface AssetGalleryGridCardStyleProps extends AssetGalleryGridCardRingProps {\n  /**\n   * `asset.disabled` — `PropTypes.bool`.\n   *\n   * NO `$`, AND THIS IS THE ONE THAT REALLY REACHES THE DOM. React recognises\n   * `disabled` and renders it as a bare boolean attribute even on a `<div>`, so\n   * `disabled=\"\"` is on both the wrapper and the card root in\n   * `widgets/AssetGalleryGridCard#disabled` in the recorded baseline. Renaming it\n   * `$disabled` REMOVES that attribute and therefore MOVES the baseline — C10, §E.4.\n   */\n  disabled?: boolean;\n  /**\n   * `extendedSelectMode` — `PropTypes.bool`. Makes the whole card a selectable area.\n   *\n   * NO `$`, AND THAT IS A DEFECT — not a DOM leak twice over: `ComputedRootComponent`\n   * `omit`s it, and React drops an unrecognised camelCase prop whose value is `true`.\n   */\n  extendedSelectMode?: boolean;\n}\n\nconst ringState = (props: AssetGalleryGridCardRingProps): AssetGalleryGridCardRingState => {\n  if (props.selected) return props.$customSelectedBorder ? 'custom' : 'selected';\n  if (props.$softSelected) return 'soft';\n  if (props.completed) return 'completed';\n  if (props.$hasError) return 'error';\n  return 'idle';\n};\n\nexport const AssetGalleryGridCard = styled.div.attrs<AssetGalleryGridCardStyleProps>(props => ({\n  ...applyDefaultTheme(props),\n  'data-ring': ringState(props),\n  style: {\n    ...(props.style || {}),\n    ...(props.$customSelectedBorder && props.selected\n      ? {\n          '--ring-dark': props.$customSelectedBorder[0],\n          '--ring-light': props.$customSelectedBorder[1]\n        }\n      : {})\n  }\n}))`\n  display: block;\n  position: relative;\n  height: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n  transition: box-shadow 220ms;\n  overflow: hidden;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-700')\n    )}\n\n  ${props =>\n    props.disabled &&\n    css`\n      pointer-events: none;\n      opacity: 0.4;\n    `};\n\n  ${props =>\n    props.extendedSelectMode &&\n    css`\n      cursor: pointer;\n    `}\n\n  &:hover {\n    box-shadow: 0px 3px 6px #00000029;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    box-sizing: border-box;\n    z-index: 10;\n    border-style: solid;\n    border-width: 1px;\n  }\n  &[data-ring='soft']::after,\n  &[data-ring='selected']::after,\n  &[data-ring='custom']::after,\n  &[data-ring='completed']::after,\n  &[data-ring='error']::after {\n    border-width: 3px;\n  }\n\n  ${props => {\n    const gray100 = props.theme.getColor('gray-100');\n    const gray300 = props.theme.getColor('gray-300');\n    const gray700 = props.theme.getColor('gray-700');\n    const emerald = props.theme.getColor('emerald-500');\n    const red500 = props.theme.getColor('red-500');\n    const red600 = props.theme.getColor('red-600');\n    return css`\n      &[data-ring='idle']::after {\n        border-color: ${gray300};\n      }\n      &[data-ring='soft']::after {\n        border-color: ${rgba(gray700, 0.5)};\n      }\n      &[data-ring='selected']::after {\n        border-color: ${darkBorderColor};\n      }\n      &[data-ring='custom']::after {\n        border-color: var(--ring-light);\n      }\n      &[data-ring='completed']::after {\n        border-color: ${rgba(emerald, 0.7)};\n      }\n      &[data-ring='error']::after {\n        border-color: ${rgba(red500, 0.7)};\n      }\n\n      @media (prefers-color-scheme: dark) {\n        &[data-ring='idle']::after {\n          border-color: ${darkBorderColor};\n        }\n        &[data-ring='soft']::after {\n          border-color: ${rgba(gray100, 0.5)};\n        }\n        &[data-ring='selected']::after {\n          border-color: ${gray100};\n        }\n        &[data-ring='custom']::after {\n          border-color: var(--ring-dark);\n        }\n        &[data-ring='completed']::after {\n          border-color: ${emerald};\n        }\n        &[data-ring='error']::after {\n          border-color: ${red600};\n        }\n      }\n      body.light-theme &[data-ring='idle']::after {\n        border-color: ${gray300};\n      }\n      body.light-theme &[data-ring='soft']::after {\n        border-color: ${rgba(gray700, 0.5)};\n      }\n      body.light-theme &[data-ring='selected']::after {\n        border-color: ${darkBorderColor};\n      }\n      body.light-theme &[data-ring='custom']::after {\n        border-color: var(--ring-light);\n      }\n      body.light-theme &[data-ring='completed']::after {\n        border-color: ${rgba(emerald, 0.7)};\n      }\n      body.light-theme &[data-ring='error']::after {\n        border-color: ${rgba(red500, 0.7)};\n      }\n      body.dark-theme &[data-ring='idle']::after {\n        border-color: ${darkBorderColor};\n      }\n      body.dark-theme &[data-ring='soft']::after {\n        border-color: ${rgba(gray100, 0.5)};\n      }\n      body.dark-theme &[data-ring='selected']::after {\n        border-color: ${gray100};\n      }\n      body.dark-theme &[data-ring='custom']::after {\n        border-color: var(--ring-dark);\n      }\n      body.dark-theme &[data-ring='completed']::after {\n        border-color: ${emerald};\n      }\n      body.dark-theme &[data-ring='error']::after {\n        border-color: ${red600};\n      }\n    `;\n  }};\n`;\n\nexport const ThumbnailSection = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  position: relative;\n  overflow: hidden;\n  transition: background 220ms;\n  ${props => props.theme.themeProp('background', darkBgColor, props.theme.getColor('gray-50'))}\n  ${AssetGalleryGridCard}:hover & {\n    ${props => props.theme.themeProp('background', darkHoverBgColor, lightHoverBgColor, 1)}\n  }\n`;\n\n// ── Top bar ──────────────────────────────────────────────────────────────────\n\nexport const HorizontalBar = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px;\n  height: 40px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 2;\n`;\n\nexport const HorizontalBarLeft = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const HorizontalBarRight = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const StatusIconCircle = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  pointer-events: none;\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n`;\n\n// ── Thumbnail ─────────────────────────────────────────────────────────────────\n\nexport const ThumbnailRow = styled.div`\n  position: relative;\n  display: flex;\n  width: 100%;\n`;\n\nexport const ThumbnailSpacer = styled.div`\n  flex: 1;\n`;\n\nexport const ThumbnailWrapper = styled.div`\n  width: max(66%, 268px);\n  flex-shrink: 0;\n`;\n\nexport const ThumbnailBox = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  position: relative;\n  height: 168px;\n\n  flex-shrink: 0;\n  overflow: hidden;\n\n  img,\n  video {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    display: block;\n  }\n\n  .audio {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    svg {\n      width: 35%;\n      ${props =>\n        props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-400'),\n          props.theme.getColor('gray-400')\n        )}\n    }\n  }\n`;\n\nexport const ThumbnailSelectedOverlay = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<Pick<AssetGalleryGridCardStyleProps, 'selected'>>(applyDefaultTheme)`\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  opacity: ${props => (props.selected ? 0.6 : 0)};\n  background-color: #accef7;\n  transition: opacity 220ms;\n  z-index: 1;\n`;\n\nexport const ThumbnailActions = styled.div`\n  flex: 1;\n`;\n\nexport const ActionsContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: end;\n  flex-direction: column;\n  gap: 8px;\n  opacity: 0;\n  transition: opacity 220ms;\n  z-index: 1;\n  position: absolute;\n  right: 8px;\n  ${AssetGalleryGridCard}:hover & {\n    opacity: 1;\n  }\n\n  ${AssetGalleryGridCard}:focus-within & {\n    opacity: 1;\n  }\n`;\n\nexport const Action = styled.div`\n  margin: 0;\n\n  button {\n    box-shadow: 0px 3px 6px #00000033;\n  }\n  svg {\n    width: 16px;\n    height: 16px;\n    max-height: unset;\n    max-width: unset;\n  }\n`;\n\nexport const ConsumerOverlay = styled.div`\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 1;\n`;\n\n// ── Card body ─────────────────────────────────────────────────────────────────\n\nexport const CardBody = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  padding: 16px 0px 0px 0px;\n`;\n\nexport const CardTitle = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 0px 16px;\n  font: normal normal 500 14px/19px Roboto;\n  letter-spacing: 0.28px;\n  height: 19px;\n  box-sizing: border-box;\n\n  ${props =>\n    props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))}\n`;\n\nexport const CardDescription = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 6px 16px;\n  font: normal normal normal 12px/1.286em Roboto;\n  letter-spacing: 0.24px;\n  height: 52px;\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  word-break: break-word;\n\n  ${props =>\n    props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))}\n`;\n\n/* `$hasContent` — `Boolean(asset.imageRights?.toString().trim())`, so genuinely boolean\n * and not `imageRights`'s `string`. */\nexport const InstructionsWrapper = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<{ $hasContent?: boolean }>(applyDefaultTheme)`\n  min-height: 96px;\n  margin-top: 16px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  transition: background 220ms;\n  opacity: 0;\n  ${props =>\n    props.$hasContent &&\n    css`\n      opacity: 1;\n      border-top: 0.56px solid;\n      border-bottom: 0.56px solid;\n      ${props.theme.themeProp('border-color', darkBorderColor, props.theme.getColor('gray-300'))}\n    `}\n\n  ${props =>\n    props.$hasContent &&\n    css`\n      opacity: 1;\n      ${props.theme.themeProp('background', darkBgColor, props.theme.getColor('gray-50'))}\n      ${AssetGalleryGridCard}:hover & {\n        ${props.theme.themeProp('background', darkHoverBgColor, lightHoverBgColor, 1)}\n      }\n    `}\n`;\n\nexport const CardFooter = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0px 16px;\n  min-height: 52px;\n  box-sizing: border-box;\n`;\n\nexport const CardFooterLeft = styled.div`\n  display: flex;\n  align-items: center;\n  > * {\n    margin-right: 4px;\n  }\n`;\n\nexport const CardFooterRight = styled.div`\n  display: flex;\n  align-items: center;\n  > * {\n    margin-left: 4px;\n  }\n`;\n\n/*\n * `invisible` IS READ AND NEVER PASSED — DECLARED, NOT FIXED.\n *\n * `AssetGalleryGridCard.tsx` renders `<S.CardDivider />` twice, both times with no props\n * at all, and nothing else in `src` constructs this component. So `props.invisible` is\n * always `undefined` and the `opacity` below is unconditionally `1` — the invisible\n * divider is an unimplemented state, the same shape of defect as `TextArea.styled.ts`'s\n * `$fadeIn` (playbook §E.3).\n *\n * It also has NO `$`, so if it ever were passed it would additionally be handed to React,\n * which drops a boolean-valued unknown attribute with a warning (\"Received `true` for a\n * non-boolean attribute `invisible`\") — measured. `invisible` occurs zero times in the\n * recorded baseline.\n *\n * Declared `boolean` rather than `undefined` because, unlike a run-together typo, this\n * key has a real intended meaning; wiring it up is a feature, not a rename.\n */\nexport const CardDivider = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<{ invisible?: boolean }>(applyDefaultTheme)`\n  height: 1px;\n  flex-shrink: 0;\n  opacity: ${props => (props.invisible ? 0 : 1)};\n  ${props => props.theme.themeProp('background', darkBorderColor, props.theme.getColor('gray-300'))}\n`;\n\nexport const CheckboxRow = styled.div`\n  display: flex;\n  padding: 0px 16px;\n  align-items: center;\n  height: 56px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n`;\n\nexport const CheckboxButton = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  opacity: 1;\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: opacity 220ms;\n  ${props => props.theme.themeProp('color', 'white', 'black')}\n  > svg {\n    width: 23px;\n    height: 100%;\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","darkBorderColor","darkBgColor","darkHoverBgColor","lightHoverBgColor","AssetGalleryWrapper","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","disabled","css","ringState","selected","$customSelectedBorder","$softSelected","completed","$hasError","AssetGalleryGridCard","style","theme","themeProp","getColor","extendedSelectMode","gray100","gray300","gray700","emerald","red500","red600","rgba","ThumbnailSection","HorizontalBar","HorizontalBarLeft","HorizontalBarRight","StatusIconCircle","span","ThumbnailRow","ThumbnailSpacer","ThumbnailWrapper","ThumbnailBox","ThumbnailSelectedOverlay","ThumbnailActions","ActionsContainer","Action","ConsumerOverlay","CardBody","CardTitle","CardDescription","InstructionsWrapper","$hasContent","CardFooter","CardFooterLeft","CardFooterRight","CardDivider","invisible","CheckboxRow"],"mappings":"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"}

package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js

@@ -1,9 +1,8 @@
-import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import { AssetPreviewTopBar as AssetPreviewTopBar$1, BackButtonContainer, BackHoverEffect, LeftText, ButtonsContainer } from './AssetPreviewTopBar.styled.js';
 import { ReactComponent as SvgArrowBack } from '../../../icons/arrow-back.svg.js';
 import { ReactComponent as SvgClose } from '../../../icons/close.svg.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 const AssetPreviewTopBar = React__default.forwardRef(function AssetPreviewTopBar({
   onBackButtonClick,
@@ -16,29 +15,29 @@ const AssetPreviewTopBar = React__default.forwardRef(function AssetPreviewTopBar
   disabled,
   ...props
 }, forwardedRef) {
-  return React__default.createElement(AssetPreviewTopBar$1, _extends({
+  return jsxs(AssetPreviewTopBar$1, {
     ref: forwardedRef,
     $shadow: shadow,
     $border: border,
-    disabled: disabled
-  }, props), React__default.createElement(BackButtonContainer, {
-    onClick: onBackButtonClick,
-    disabled: disabled
-  }, backButtonAsClose ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgClose, null), backButtonText) : React__default.createElement(BackHoverEffect, null, React__default.createElement(SvgArrowBack, null), backButtonText)), leftText && React__default.createElement(LeftText, null, leftText), Array.isArray(buttons) && React__default.createElement(ButtonsContainer, null, buttons.map((button, index) => React__default.createElement("span", {
-    key: 'topBarButton-' + index
-  }, button))));
+    disabled: disabled,
+    ...props,
+    children: [jsx(BackButtonContainer, {
+      onClick: onBackButtonClick,
+      disabled: disabled,
+      children: backButtonAsClose ? jsxs(Fragment, {
+        children: [jsx(SvgClose, {}), backButtonText]
+      }) : jsxs(BackHoverEffect, {
+        children: [jsx(SvgArrowBack, {}), backButtonText]
+      })
+    }), leftText && jsx(LeftText, {
+      children: leftText
+    }), Array.isArray(buttons) && jsx(ButtonsContainer, {
+      children: buttons.map((button, index) => jsx("span", {
+        children: button
+      }, 'topBarButton-' + index))
+    })]
+  });
 });
-AssetPreviewTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
-  onBackButtonClick: PropTypes.func.isRequired,
-  backButtonText: PropTypes.string.isRequired,
-  disabled: PropTypes.bool,
-  backButtonAsClose: PropTypes.bool,
-  leftText: PropTypes.string,
-  shadow: PropTypes.bool,
-  border: PropTypes.bool,
-  buttons: PropTypes.arrayOf(PropTypes.node)
-} : {};
-AssetPreviewTopBar.defaultProps = {};
 
 export { AssetPreviewTopBar as default };
 //# sourceMappingURL=AssetPreviewTopBar.js.map

package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetPreviewTopBar.js","sources":["../../../../src/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './AssetPreviewTopBar.styled';\n\nimport { ReactComponent as IconArrowBack } from '../../../../icons/arrow-back.svg';\nimport { ReactComponent as IconClose } from '../../../../icons/close.svg';\n\n/**\n * Top bar for asset preview.\n *\n * ### Import\n *\n * ``` js\n * import { AssetPreviewTopBar } from '@ntbjs/react-components/widgets'\n * // or\n * import AssetPreviewTopBar from '@ntbjs/react-components/AssetPreview/AssetPreviewTopBar'\n * ```\n * \n * ### Usage example\n * \n * ``` js\nconst button1 = <ActionButton key=\"btn1\"icon={<IconAddCircle />} />;\nconst button2 = <Button key=\"btn2\" secondary={true}>Edit</Button>;\nconst button3 = <Button key=\"btn3\" secondary={true}>Share</Button>;\nconst button4 = <Button key=\"btn4\">Download</Button>;\n\nconst topBar = <AssetPreviewTopBar backButtonText={t{\"Back\"}} onBackButtonClick={() => {}} buttons={[button1, button2, button3, button4]} />;\n * ```\n */\nconst AssetPreviewTopBar = React.forwardRef(function AssetPreviewTopBar(\n  {\n    onBackButtonClick,\n    backButtonText,\n    backButtonAsClose,\n    leftText,\n    buttons,\n    shadow,\n    border,\n    disabled,\n    ...props\n  },\n  forwardedRef\n) {\n  return (\n    <S.AssetPreviewTopBar\n      ref={forwardedRef}\n      $shadow={shadow}\n      $border={border}\n      disabled={disabled}\n      {...props}\n    >\n      <S.BackButtonContainer onClick={onBackButtonClick} disabled={disabled}>\n        {backButtonAsClose ? (\n          <>\n            <IconClose />\n            {backButtonText}\n          </>\n        ) : (\n          <S.BackHoverEffect>\n            <IconArrowBack />\n            {backButtonText}\n          </S.BackHoverEffect>\n        )}\n      </S.BackButtonContainer>\n      {leftText && <S.LeftText>{leftText}</S.LeftText>}\n      {Array.isArray(buttons) && (\n        <S.ButtonsContainer>\n          {buttons.map((button, index) => (\n            <span key={'topBarButton-' + index}>{button}</span>\n          ))}\n        </S.ButtonsContainer>\n      )}\n    </S.AssetPreviewTopBar>\n  );\n});\n\nAssetPreviewTopBar.propTypes = {\n  /**\n   * On-click function for the back button\n   */\n  onBackButtonClick: PropTypes.func.isRequired,\n\n  /**\n   * Translatable text for the back button\n   */\n  backButtonText: PropTypes.string.isRequired,\n\n  /**\n   * Disable the back button\n   */\n  disabled: PropTypes.bool,\n\n  /**\n   * Display the back button as an X instead of an arrow\n   */\n  backButtonAsClose: PropTypes.bool,\n\n  /**\n   * Text to be displayed grayed out after the \"Back\" text – e.g. \"Asset selected\" in gallery\n   */\n  leftText: PropTypes.string,\n\n  /**\n   * Add a shadow on the bottom border of the top bar – e.g. in gallery view\n   */\n  shadow: PropTypes.bool,\n  /**\n   * Add a border on the bottom of the top bar\n   */\n  border: PropTypes.bool,\n\n  /**\n   * `Array` of buttons to be placed on the right side of the top bar\n   */\n  buttons: PropTypes.arrayOf(PropTypes.node)\n};\n\nAssetPreviewTopBar.defaultProps = {};\n\nexport default AssetPreviewTopBar;\n"],"names":["AssetPreviewTopBar","React","forwardRef","onBackButtonClick","backButtonText","backButtonAsClose","leftText","buttons","shadow","border","disabled","props","forwardedRef","createElement","S","_extends","ref","$shadow","$border","onClick","Fragment","IconClose","IconArrowBack","Array","isArray","map","button","index","key","propTypes","process","env","NODE_ENV","PropTypes","func","isRequired","string","bool","arrayOf","node","defaultProps"],"mappings":";;;;;;;AA6BMA,MAAAA,kBAAkB,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,kBAAkBA,CACrE;EACEG,iBAAiB;EACjBC,cAAc;EACdC,iBAAiB;EACjBC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACNC,MAAM;EACNC,QAAQ;EACR,GAAGC,KAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,OACEX,cAAA,CAAAY,aAAA,CAACC,oBAAoB,EAAAC,QAAA,CAAA;AACnBC,IAAAA,GAAG,EAAEJ,YAAa;AAClBK,IAAAA,OAAO,EAAET,MAAO;AAChBU,IAAAA,OAAO,EAAET,MAAO;AAChBC,IAAAA,QAAQ,EAAEA,QAAAA;GACNC,EAAAA,KAAK,GAETV,cAAA,CAAAY,aAAA,CAACC,mBAAqB,EAAA;AAACK,IAAAA,OAAO,EAAEhB,iBAAkB;AAACO,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,EACnEL,iBAAiB,GAChBJ,cAAA,CAAAY,aAAA,CAAAZ,cAAA,CAAAmB,QAAA,EAAA,IAAA,EACEnB,cAAA,CAAAY,aAAA,CAACQ,QAAS,EAAA,IAAE,CAAC,EACZjB,cACD,CAAC,GAEHH,cAAA,CAAAY,aAAA,CAACC,eAAiB,EAAA,IAAA,EAChBb,cAAA,CAAAY,aAAA,CAACS,YAAa,MAAE,CAAC,EAChBlB,cACgB,CAEA,CAAC,EACvBE,QAAQ,IAAIL,cAAA,CAAAY,aAAA,CAACC,QAAU,EAAER,IAAAA,EAAAA,QAAqB,CAAC,EAC/CiB,KAAK,CAACC,OAAO,CAACjB,OAAO,CAAC,IACrBN,cAAA,CAAAY,aAAA,CAACC,gBAAkB,QAChBP,OAAO,CAACkB,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,KACzB1B,cAAA,CAAAY,aAAA,CAAA,MAAA,EAAA;IAAMe,GAAG,EAAE,eAAe,GAAGD,KAAAA;AAAM,GAAA,EAAED,MAAa,CACnD,CACiB,CAEF,CAAC,CAAA;AAE3B,CAAC,EAAC;AAEF1B,kBAAkB,CAAC6B,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAI7B7B,EAAAA,iBAAiB,EAAE8B,SAAS,CAACC,IAAI,CAACC,UAAU;AAK5C/B,EAAAA,cAAc,EAAE6B,SAAS,CAACG,MAAM,CAACD,UAAU;EAK3CzB,QAAQ,EAAEuB,SAAS,CAACI,IAAI;EAKxBhC,iBAAiB,EAAE4B,SAAS,CAACI,IAAI;EAKjC/B,QAAQ,EAAE2B,SAAS,CAACG,MAAM;EAK1B5B,MAAM,EAAEyB,SAAS,CAACI,IAAI;EAItB5B,MAAM,EAAEwB,SAAS,CAACI,IAAI;AAKtB9B,EAAAA,OAAO,EAAE0B,SAAS,CAACK,OAAO,CAACL,SAAS,CAACM,IAAI,CAAA;AAC3C,CAAC,GAAA,EAAA,CAAA;AAEDvC,kBAAkB,CAACwC,YAAY,GAAG,EAAE;;;;"}
+{"version":3,"file":"AssetPreviewTopBar.js","sources":["../../../../src/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.tsx"],"sourcesContent":["import React from 'react';\nimport * as S from './AssetPreviewTopBar.styled';\n\nimport { ReactComponent as IconArrowBack } from '../../../../icons/arrow-back.svg';\nimport { ReactComponent as IconClose } from '../../../../icons/close.svg';\n\ntype AssetPreviewTopBarOwnProps = {\n  /**\n   * On-click function for the back button\n   */\n  onBackButtonClick: (...args: any[]) => any;\n  /**\n   * Translatable text for the back button\n   */\n  backButtonText: string;\n  /**\n   * Disable the back button\n   */\n  disabled?: boolean;\n  /**\n   * Display the back button as an X instead of an arrow\n   */\n  backButtonAsClose?: boolean;\n  /**\n   * Text to be displayed grayed out after the \"Back\" text – e.g. \"Asset selected\" in gallery\n   */\n  leftText?: string;\n  /**\n   * Add a shadow on the bottom border of the top bar – e.g. in gallery view\n   */\n  shadow?: boolean;\n  /**\n   * Add a border on the bottom of the top bar\n   */\n  border?: boolean;\n  /**\n   * `Array` of buttons to be placed on the right side of the top bar\n   */\n  buttons?: React.ReactNode[];\n};\n\n/*\n * NMB-3998 §C.2: `props` is spread onto `S.AssetPreviewTopBar`, so the published type\n * has to admit that target's props too — a closed type here is worse than `any` for the\n * 125 consumer files. Declared members win over the base (`Omit` by `keyof AssetPreviewTopBarOwnProps`);\n * a bare `&` would INTERSECT a colliding member instead of overriding it, which narrows\n * it (measured: `rows?: number | string` & `rows?: number`) or empties it to `never`.\n */\ntype Props = Omit<\n  React.ComponentPropsWithoutRef<typeof S.AssetPreviewTopBar>,\n  keyof AssetPreviewTopBarOwnProps\n> &\n  AssetPreviewTopBarOwnProps;\n\n/**\n * Top bar for asset preview.\n *\n * ### Import\n *\n * ``` js\n * import { AssetPreviewTopBar } from '@ntbjs/react-components/widgets'\n * // or\n * import AssetPreviewTopBar from '@ntbjs/react-components/AssetPreview/AssetPreviewTopBar'\n * ```\n * \n * ### Usage example\n * \n * ``` js\nconst button1 = <ActionButton key=\"btn1\"icon={<IconAddCircle />} />;\nconst button2 = <Button key=\"btn2\" secondary={true}>Edit</Button>;\nconst button3 = <Button key=\"btn3\" secondary={true}>Share</Button>;\nconst button4 = <Button key=\"btn4\">Download</Button>;\n\nconst topBar = <AssetPreviewTopBar backButtonText={t{\"Back\"}} onBackButtonClick={() => {}} buttons={[button1, button2, button3, button4]} />;\n * ```\n */\nconst AssetPreviewTopBar = React.forwardRef<any, Props>(function AssetPreviewTopBar(\n  {\n    onBackButtonClick,\n    backButtonText,\n    backButtonAsClose,\n    leftText,\n    buttons,\n    shadow,\n    border,\n    disabled,\n    ...props\n  },\n  forwardedRef\n) {\n  return (\n    <S.AssetPreviewTopBar\n      ref={forwardedRef}\n      $shadow={shadow}\n      $border={border}\n      disabled={disabled}\n      {...props}\n    >\n      <S.BackButtonContainer onClick={onBackButtonClick} disabled={disabled}>\n        {backButtonAsClose ? (\n          <>\n            <IconClose />\n            {backButtonText}\n          </>\n        ) : (\n          <S.BackHoverEffect>\n            <IconArrowBack />\n            {backButtonText}\n          </S.BackHoverEffect>\n        )}\n      </S.BackButtonContainer>\n      {leftText && <S.LeftText>{leftText}</S.LeftText>}\n      {Array.isArray(buttons) && (\n        <S.ButtonsContainer>\n          {buttons.map((button, index) => (\n            <span key={'topBarButton-' + index}>{button}</span>\n          ))}\n        </S.ButtonsContainer>\n      )}\n    </S.AssetPreviewTopBar>\n  );\n});\n\nexport default AssetPreviewTopBar;\n"],"names":["AssetPreviewTopBar","React","forwardRef","onBackButtonClick","backButtonText","backButtonAsClose","leftText","buttons","shadow","border","disabled","props","forwardedRef","_jsxs","S","ref","$shadow","$border","children","_jsx","onClick","_Fragment","IconClose","IconArrowBack","Array","isArray","map","button","index"],"mappings":";;;;;;AA4EA,MAAMA,kBAAkB,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,kBAAkBA,CACjF;EACEG,iBAAiB;EACjBC,cAAc;EACdC,iBAAiB;EACjBC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACNC,MAAM;EACNC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,OACEC,IAAA,CAACC,oBAAoB,EAAA;AACnBC,IAAAA,GAAG,EAAEH,YAAa;AAClBI,IAAAA,OAAO,EAAER,MAAO;AAChBS,IAAAA,OAAO,EAAER,MAAO;AAChBC,IAAAA,QAAQ,EAAEA,QAAS;AAAA,IAAA,GACfC,KAAK;AAAAO,IAAAA,QAAA,EAAA,CAETC,GAAA,CAACL,mBAAqB,EAAA;AAACM,MAAAA,OAAO,EAAEjB,iBAAkB;AAACO,MAAAA,QAAQ,EAAEA,QAAS;AAAAQ,MAAAA,QAAA,EACnEb,iBAAiB,GAChBQ,IAAA,CAAAQ,QAAA,EAAA;AAAAH,QAAAA,QAAA,GACEC,GAAA,CAACG,QAAS,EAAA,EAAE,CAAC,EACZlB,cAAc;AAAA,OACf,CAAC,GAEHS,IAAA,CAACC,eAAiB,EAAA;AAAAI,QAAAA,QAAA,GAChBC,GAAA,CAACI,YAAa,EAAA,EAAE,CAAC,EAChBnB,cAAc;OACE;KAEA,CAAC,EACvBE,QAAQ,IAAIa,GAAA,CAACL,QAAU,EAAA;AAAAI,MAAAA,QAAA,EAAEZ;AAAQ,KAAa,CAAC,EAC/CkB,KAAK,CAACC,OAAO,CAAClB,OAAO,CAAC,IACrBY,GAAA,CAACL,gBAAkB,EAAA;MAAAI,QAAA,EAChBX,OAAO,CAACmB,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,KACzBT,GAAA,CAAA,MAAA,EAAA;AAAAD,QAAAA,QAAA,EAAqCS;OAAM,EAAhC,eAAe,GAAGC,KAAqB,CACnD;AAAC,KACgB,CACrB;AAAA,GACmB,CAAC;AAE3B,CAAC;;;;"}

package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.js

@@ -6,83 +6,32 @@ const shouldForwardProp = prop => {
 };
 const AssetPreviewTopBar = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  box-sizing: border-box;
-  align-items: center;
-  border-bottom: ${props => props.$border ? `1px solid` : `none`};
-  color: inherit;
-  display: flex;
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-weight: 400;
-  min-height: 72px;
-  padding: 0 24px;
-  width: 100%;
-
-  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'))}
-
-  ${props => props.$shadow && props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9')}
-
-      ${props => props.disabled && css`
-          cursor: not-allowed;
-        `}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetPreviewTopBarstyled__AssetPreviewTopBar",
+  componentId: "sc-176gs3e-0"
+})(["box-sizing:border-box;align-items:center;border-bottom:", ";color:inherit;display:flex;font-family:", ";font-weight:400;min-height:72px;padding:0 24px;width:100%;", " ", " ", ""], props => props.$border ? `1px solid` : `none`, props => props.theme.primaryFontFamily, props => props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200')), props => props.$shadow && props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9'), props => props.disabled && css(["cursor:not-allowed;"]));
 const BackButtonContainer = styled.a.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  align-items: center;
-  display: flex;
-  font-size: 1.125rem;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
-
-  ${props => props.disabled && css`
-      opacity: 0.5;
-      pointer-events: none;
-    `}
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  > svg {
-    height: 24px;
-    margin-right: 16px;
-    width: 24px;
-  }
-`;
-const BackHoverEffect = styled.div`
-  display: inline-flex;
-  align-items: center;
-
-  > svg {
-    height: 24px;
-    margin-right: 16px;
-    width: 24px;
-    transition: transform 0.3s ease-in-out;
-  }
-
-  &:hover > svg {
-    transform: translateX(-2px);
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetPreviewTopBarstyled__BackButtonContainer",
+  componentId: "sc-176gs3e-1"
+})(["align-items:center;display:flex;font-size:1.125rem;", ";", " &:hover{cursor:pointer;}> svg{height:24px;margin-right:16px;width:24px;}"], props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.disabled && css(["opacity:0.5;pointer-events:none;"]));
+const BackHoverEffect = styled.div.withConfig({
+  displayName: "AssetPreviewTopBarstyled__BackHoverEffect",
+  componentId: "sc-176gs3e-2"
+})(["display:inline-flex;align-items:center;> svg{height:24px;margin-right:16px;width:24px;transition:transform 0.3s ease-in-out;}&:hover > svg{transform:translateX(-2px);}"]);
 const LeftText = styled.span.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-size: 1.125rem;
-  margin-left: 16px;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'))};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetPreviewTopBarstyled__LeftText",
+  componentId: "sc-176gs3e-3"
+})(["font-size:1.125rem;margin-left:16px;", ";"], props => props.theme.themeProp('color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')));
 const ButtonsContainer = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  align-items: center;
-  display: flex;
-  margin-left: auto;
-
-  > span {
-    margin-left: 16px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetPreviewTopBarstyled__ButtonsContainer",
+  componentId: "sc-176gs3e-4"
+})(["align-items:center;display:flex;margin-left:auto;> span{margin-left:16px;}"]);
 
 export { AssetPreviewTopBar, BackButtonContainer, BackHoverEffect, ButtonsContainer, LeftText };
 //# sourceMappingURL=AssetPreviewTopBar.styled.js.map

package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetPreviewTopBar.styled.js","sources":["../../../../src/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const AssetPreviewTopBar = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  box-sizing: border-box;\n  align-items: center;\n  border-bottom: ${props => (props.$border ? `1px solid` : `none`)};\n  color: inherit;\n  display: flex;\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-weight: 400;\n  min-height: 72px;\n  padding: 0 24px;\n  width: 100%;\n\n  ${props =>\n    props.theme.themeProp(\n      'border-color',\n      props.theme.getColor('gray-800'),\n      props.theme.getColor('gray-200')\n    )}\n\n  ${props =>\n    props.$shadow &&\n    props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9')}\n\n      ${props =>\n        props.disabled &&\n        css`\n          cursor: not-allowed;\n        `}\n`;\n\nexport const BackButtonContainer = styled.a\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  font-size: 1.125rem;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )};\n\n  ${props =>\n    props.disabled &&\n    css`\n      opacity: 0.5;\n      pointer-events: none;\n    `}\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  > svg {\n    height: 24px;\n    margin-right: 16px;\n    width: 24px;\n  }\n`;\n\nexport const BackHoverEffect = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  > svg {\n    height: 24px;\n    margin-right: 16px;\n    width: 24px;\n    transition: transform 0.3s ease-in-out;\n  }\n\n  &:hover > svg {\n    transform: translateX(-2px);\n  }\n`;\n\nexport const LeftText = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 1.125rem;\n  margin-left: 16px;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-500'),\n      props.theme.getColor('gray-400')\n    )};\n`;\n\nexport const ButtonsContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  margin-left: auto;\n\n  > span {\n    margin-left: 16px;\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","AssetPreviewTopBar","styled","div","withConfig","attrs","applyDefaultTheme","props","$border","theme","primaryFontFamily","themeProp","getColor","$shadow","disabled","css","BackButtonContainer","a","BackHoverEffect","LeftText","span","ButtonsContainer"],"mappings":";;;AAGA,MAAMA,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,kBAAkB,GAAGC,MAAM,CAACC,GAAG,CACzCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA,iBAAmBC,EAAAA,KAAK,IAAKA,KAAK,CAACC,OAAO,GAAG,CAAA,SAAA,CAAW,GAAG,CAAO,IAAA,CAAA,CAAA;AAClE;AACA;AACA,eAAA,EAAiBD,KAAK,IAAIA,KAAK,CAACE,KAAK,CAACC,iBAAiB,CAAA;AACvD;AACA;AACA;AACA;AACA;AACA,EAAIH,EAAAA,KAAK,IACLA,KAAK,CAACE,KAAK,CAACE,SAAS,CACnB,cAAc,EACdJ,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL;AACA,EAAA,EAAIL,KAAK,IACLA,KAAK,CAACM,OAAO,IACbN,KAAK,CAACE,KAAK,CAACE,SAAS,CAAC,YAAY,EAAE,qBAAqB,EAAE,qBAAqB,CAAC,CAAA;AACrF;AACA,MAAA,EAAQJ,KAAK,IACLA,KAAK,CAACO,QAAQ,IACdC,GAAG,CAAA;AACX;AACA,QAAS,CAAA,CAAA;AACT,EAAC;AAEM,MAAMC,mBAAmB,GAAGd,MAAM,CAACe,CAAC,CACxCb,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA,EAAIC,EAAAA,KAAK,IACLA,KAAK,CAACE,KAAK,CAACE,SAAS,CACnB,OAAO,EACPJ,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL;AACA,EAAA,EAAIL,KAAK,IACLA,KAAK,CAACO,QAAQ,IACdC,GAAG,CAAA;AACP;AACA;AACA,IAAK,CAAA,CAAA;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AAEYG,MAAAA,eAAe,GAAGhB,MAAM,CAACC,GAAG,CAAA;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AAEM,MAAMgB,QAAQ,GAAGjB,MAAM,CAACkB,IAAI,CAChChB,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA,EAAIC,EAAAA,KAAK,IACLA,KAAK,CAACE,KAAK,CAACE,SAAS,CACnB,OAAO,EACPJ,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL,EAAC;AAEM,MAAMS,gBAAgB,GAAGnB,MAAM,CAACC,GAAG,CACvCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
+{"version":3,"file":"AssetPreviewTopBar.styled.js","sources":["../../../../src/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.ts"],"sourcesContent":["/*\n * $-transient-prop pattern: rules in\n * `src/components/layout/SectionSeparator/SectionSeparator.styled.ts`, derivation and\n * measurements in `scripts/TS-MIGRATION-PLAYBOOK.md` §J.\n */\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\n/**\n * `disabled` — `PropTypes.bool`, greys out the back button.\n *\n * NO `$`, AND THAT IS A DEFECT THAT IS ALREADY IN THE RENDER BASELINE. React recognises\n * `disabled` and renders it as a bare boolean attribute on any element, so\n * `widgets/AssetPreviewTopBar#disabled` in `scripts/r19-harness/baseline.json` records\n * `<div disabled=\"\">` AND `<a disabled=\"\">`. Renaming it `$disabled` removes both\n * attributes and therefore MOVES the baseline — C10 work, §E.4.\n *\n * Note it also has to be DECLARED to be read at all: `disabled` is a member of neither\n * `HTMLAttributes<HTMLDivElement>` nor `AnchorHTMLAttributes<HTMLAnchorElement>`. That is\n * the same asymmetry §J.9 records for `CompactTextInput` — there the identical read on an\n * `<input>` needs no declaration, because `InputHTMLAttributes` really does have it.\n *\n * Hosts: `AssetPreviewTopBar` and `BackButtonContainer`.\n */\ninterface AssetPreviewTopBarDisabledStyleProps {\n  disabled?: boolean;\n}\n\n/** The top bar root, i.e. what `AssetPreviewTopBar.tsx` passes to it. */\nexport interface AssetPreviewTopBarStyleProps extends AssetPreviewTopBarDisabledStyleProps {\n  /** `border` — `PropTypes.bool`; swaps `border-bottom` between `1px solid` and `none`. */\n  $border?: boolean;\n  /** `shadow` — `PropTypes.bool`. Read as `props.$shadow && props.theme.themeProp(…)`,\n   *  which evaluates to `false | RuleSet` — a valid `Interpolation`. A BARE\n   *  `${props => props.$shadow}` would not be: `Interpolation` accepts `Falsy` but not\n   *  `true`, so it would be TS2345 even with the prop correctly typed `boolean`. §J.5. */\n  $shadow?: boolean;\n}\n\n/*\n * Single-argument, and it stays that way — peer floor `styled-components: >=5.1.0`, and\n * the two majors disagree on the second parameter. §J.4. `prop` needs the annotation\n * because `withConfig` takes this by reference, so it gets no contextual typing.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const AssetPreviewTopBar = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<AssetPreviewTopBarStyleProps>(applyDefaultTheme)`\n  box-sizing: border-box;\n  align-items: center;\n  border-bottom: ${props => (props.$border ? `1px solid` : `none`)};\n  color: inherit;\n  display: flex;\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-weight: 400;\n  min-height: 72px;\n  padding: 0 24px;\n  width: 100%;\n\n  ${props =>\n    props.theme.themeProp(\n      'border-color',\n      props.theme.getColor('gray-800'),\n      props.theme.getColor('gray-200')\n    )}\n\n  ${props =>\n    props.$shadow &&\n    props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9')}\n\n      ${props =>\n        props.disabled &&\n        css`\n          cursor: not-allowed;\n        `}\n`;\n\nexport const BackButtonContainer = styled.a\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<AssetPreviewTopBarDisabledStyleProps>(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  font-size: 1.125rem;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )};\n\n  ${props =>\n    props.disabled &&\n    css`\n      opacity: 0.5;\n      pointer-events: none;\n    `}\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  > svg {\n    height: 24px;\n    margin-right: 16px;\n    width: 24px;\n  }\n`;\n\nexport const BackHoverEffect = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  > svg {\n    height: 24px;\n    margin-right: 16px;\n    width: 24px;\n    transition: transform 0.3s ease-in-out;\n  }\n\n  &:hover > svg {\n    transform: translateX(-2px);\n  }\n`;\n\nexport const LeftText = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 1.125rem;\n  margin-left: 16px;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-500'),\n      props.theme.getColor('gray-400')\n    )};\n`;\n\nexport const ButtonsContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  margin-left: auto;\n\n  > span {\n    margin-left: 16px;\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","AssetPreviewTopBar","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","$border","theme","primaryFontFamily","themeProp","getColor","$shadow","disabled","css","BackButtonContainer","a","BackHoverEffect","LeftText","span","ButtonsContainer"],"mappings":";;;AA4CA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAEM,MAAMC,kBAAkB,GAAGC,MAAM,CAACC,GAAG,CACzCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAA+BC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,8CAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,yDAAA,EAAA,0CAAA,EAAA,6DAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAGtCC,KAAK,IAAKA,KAAK,CAACC,OAAO,GAAG,CAAA,SAAA,CAAW,GAAG,CAAA,IAAA,CAAO,EAGjDD,KAAK,IAAIA,KAAK,CAACE,KAAK,CAACC,iBAAiB,EAMnDH,KAAK,IACLA,KAAK,CAACE,KAAK,CAACE,SAAS,CACnB,cAAc,EACdJ,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CACjC,CAAC,EAEDL,KAAK,IACLA,KAAK,CAACM,OAAO,IACbN,KAAK,CAACE,KAAK,CAACE,SAAS,CAAC,YAAY,EAAE,qBAAqB,EAAE,qBAAqB,CAAC,EAE7EJ,KAAK,IACLA,KAAK,CAACO,QAAQ,IACdC,GAAG,yBAEF;AAGF,MAAMC,mBAAmB,GAAGhB,MAAM,CAACiB,CAAC,CACxCf,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAAuCC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,+CAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qDAAA,EAAA,GAAA,EAAA,2EAAA,CAAA,EAI7DC,KAAK,IACLA,KAAK,CAACE,KAAK,CAACE,SAAS,CACnB,OAAO,EACPJ,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CACjC,CAAC,EAEDL,KAAK,IACLA,KAAK,CAACO,QAAQ,IACdC,GAAG,sCAGF;MAaQG,eAAe,GAAGlB,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAG,WAAA,EAAA,2CAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,yKAAA,CAAA;AAgBlC,MAAMa,QAAQ,GAAGnB,MAAM,CAACoB,IAAI,CAChClB,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,sCAAA,EAAA,GAAA,CAAA,EAIvBC,KAAK,IACLA,KAAK,CAACE,KAAK,CAACE,SAAS,CACnB,OAAO,EACPJ,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CACjC,CAAC;AAGE,MAAMS,gBAAgB,GAAGrB,MAAM,CAACC,GAAG,CACvCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,4CAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4EAAA,CAAA;;;;"}

package/build/widgets/ContextMenu/ContextMenu.js

@@ -1,23 +1,24 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
+import { useFloatingTree, FloatingTree } from '@floating-ui/react';
 import { ContextMenu as ContextMenu$1 } from './ContextMenu.styled.js';
+import { jsx } from 'react/jsx-runtime';
 
 const ContextMenu = React__default.forwardRef(function ContextMenu({
   children,
   ...props
 }, forwardedRef) {
   const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== 'sublevel'));
-  return React__default.createElement(ContextMenu$1, _extends({
-    ref: forwardedRef
-  }, filteredProps, {
-    role: "menu"
-  }), children);
+  const hasTree = useFloatingTree() !== null;
+  const menu = jsx(ContextMenu$1, {
+    ref: forwardedRef,
+    ...filteredProps,
+    role: "menu",
+    children: children
+  });
+  return hasTree ? menu : jsx(FloatingTree, {
+    children: menu
+  });
 });
-ContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.any
-} : {};
-ContextMenu.defaultProps = {};
 
 export { ContextMenu as default };
 //# sourceMappingURL=ContextMenu.js.map

package/build/widgets/ContextMenu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/widgets/ContextMenu/ContextMenu.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ContextMenu.styled';\n\n/**\n * This component wraps around an array of `ContextMenuItems` to display a context menu.\n *\n * In most use-cases, the `ContextMenu` will be wrapped in a `Popover` to provide the functionality for opening/closing and placing the menu.\n * In such cases, send the `ContextMenu` to the `Popover` as its `content` prop.\n *\n * The context menu and sublevels will automatically adjust their placement in relation to the element that opens it\n * based on available space if the provided placement doesn't work. See the `Popover` documentation for further instructions on placement.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenu } from '@ntbjs/react-components/widgets'\n * // or\n * import ContextMenu from '@ntbjs/react-components/widgets/ContextMenu'\n * ```\n * \n * ### Usage examples \n * #### Plain context menu\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} key=\"item-2\" />;\n\n<Popover content={<ContextMenu {...args}>{[item1, itemGroup1, item2]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * #### Context menu with grouped items\n * Use the `ContextMenuItemsGroup` component to group menu items together. Grouped items will not show borders\n * between themselves, indicating that their actions are related.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} key=\"item-2\" />;\n\nconst groupItem1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-1\" />:\nconst groupItem2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-2\" />;\nconst groupItem3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-3\" />;\n\nconst itemGroup1 = <ContextMenuItemsGroup key=\"item-group-1\">{[groupItem1, groupItem2, groupItem3]}</ContextMenuItemsGroup>;\n\n<Popover content={<ContextMenu {...args}>{[item1, itemGroup1, item2]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * #### Context menu with sublevels\n * Wrap a `ContextMenuItem` in a `Popover` and pass it a `ContextMenu` as child to create a sublevel/submenu. \n * A sublevel will by default be placed adjacent and aligned with the `ContextMenuItem` which opens it,\n * and adjust automatically based on available space.\n * \n * Set the `contextMenu` and `contextMenuSublevel` props of the `Popover` containing the sublevel to `true`.\n * \n * Set the `opensSublevel` prop of the `ContextMenuItem` containing the sublevel to `true`.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} hoverBackgroundColors={['#fbeae6', '#fbeae6']} key=\"item-2\" />;\n\nconst subItem1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-1\" />\nconst subItem2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-2\" />\nconst subItem3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-3\" />\n\nconst itemWithSublevel = (\n  <Popover\n    content={\n      <ContextMenu sublevel={true}>\n        {[subItem1, subItem2, subItem3, subItem4, subItem5]}\n      </ContextMenu>\n    }\n    contextMenu={true}\n    contextMenuSublevel={true}\n    key=\"item-3\"\n  >\n    <ContextMenuItem title=\"Open level 2\" opensSublevel={true} />\n  </Popover>\n);\n\n<Popover content={<ContextMenu {...args}>{[item1, item2, itemWithSublevel]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * \n * #### Context menu from a dropdown button\n * When used with a dropdown button, the `Button` component takes care of wrapping the menu items in a `Popover`.\n * Just pass the array of `ContextMenuItems` directly into the `Button` as its children.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-2\" />;\nconst item3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-3\" />;\n\n<Button onClick={onClickEffect} dropdownItems={<ContextMenu {...args}>{[item1, item2, item3, item4, item5]}</ContextMenu>}>\n  Button text\n</Button>\n```\n *\n */\nconst ContextMenu = React.forwardRef(function ContextMenu({ children, ...props }, forwardedRef) {\n  const filteredProps = Object.fromEntries(\n    Object.entries(props).filter(([key]) => key !== 'sublevel')\n  );\n\n  return (\n    <S.ContextMenu ref={forwardedRef} {...filteredProps} role=\"menu\">\n      {children}\n    </S.ContextMenu>\n  );\n});\n\nContextMenu.propTypes = {\n  /**\n   * An array containing nodes of the `ContextMenuItem` component\n   */\n  children: PropTypes.any\n};\n\nContextMenu.defaultProps = {};\n\nexport default ContextMenu;\n"],"names":["ContextMenu","React","forwardRef","children","props","forwardedRef","filteredProps","Object","fromEntries","entries","filter","key","createElement","S","_extends","ref","role","propTypes","process","env","NODE_ENV","PropTypes","any","defaultProps"],"mappings":";;;;;AA6GMA,MAAAA,WAAW,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,WAAWA,CAAC;EAAEG,QAAQ;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAAEC,YAAY,EAAE;EAC9F,MAAMC,aAAa,GAAGC,MAAM,CAACC,WAAW,CACtCD,MAAM,CAACE,OAAO,CAACL,KAAK,CAAC,CAACM,MAAM,CAAC,CAAC,CAACC,GAAG,CAAC,KAAKA,GAAG,KAAK,UAAU,CAC5D,CAAC,CAAA;EAED,OACEV,cAAA,CAAAW,aAAA,CAACC,aAAa,EAAAC,QAAA,CAAA;AAACC,IAAAA,GAAG,EAAEV,YAAAA;AAAa,GAAA,EAAKC,aAAa,EAAA;AAAEU,IAAAA,IAAI,EAAC,MAAA;AAAM,GAAA,CAAA,EAC7Db,QACY,CAAC,CAAA;AAEpB,CAAC,EAAC;AAEFH,WAAW,CAACiB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAItBjB,QAAQ,EAAEkB,SAAS,CAACC,GAAAA;AACtB,CAAC,GAAA,EAAA,CAAA;AAEDtB,WAAW,CAACuB,YAAY,GAAG,EAAE;;;;"}
+{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/widgets/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import React from 'react';\n\nimport { FloatingTree, useFloatingTree } from '@floating-ui/react';\n\nimport * as S from './ContextMenu.styled';\n\ntype ContextMenuOwnProps = {\n  /**\n   * An array containing nodes of the `ContextMenuItem` component\n   */\n  children?: any;\n  /**\n   * Marks this menu as the sublevel/submenu of another context menu.\n   *\n   * NOT DECLARED BY THE OLD propTypes, so the codemod could not emit it; the widening\n   * pass reported it as a `(dynamic key)` undeclared read but cannot type it, because\n   * `S.ContextMenu` is a `styled.div` and `sublevel` is not an HTML attribute. Declared\n   * by hand so the documented usage in this file's own JSDoc and in\n   * `ContextMenu.stories.tsx:103` keeps compiling.\n   *\n   * PRE-EXISTING FINDING, DELIBERATELY NOT FIXED HERE: nothing reads it. The component\n   * strips it out of the spread —\n   * `Object.entries(props).filter(([key]) => key !== 'sublevel')` — so it reaches\n   * neither the DOM nor `ContextMenu.styled.ts`, which reads no prop at all. The\n   * sublevel placement it appears to request is actually driven by the *`Popover`*'s\n   * `contextMenuSublevel`, which the stories set on the same element. So this is a\n   * documented public prop that is a no-op. Removing it is an API break and belongs in\n   * its own commit with its own decision; keeping the declaration records the API as it\n   * is published today rather than as we wish it were.\n   */\n  sublevel?: boolean;\n};\n\n/*\n * NMB-3998 §C.2: `props` is spread onto `S.ContextMenu`, so the published type\n * has to admit that target's props too — a closed type here is worse than `any` for the\n * 125 consumer files. Declared members win over the base (`Omit` by `keyof ContextMenuOwnProps`);\n * a bare `&` would INTERSECT a colliding member instead of overriding it, which narrows\n * it (measured: `rows?: number | string` & `rows?: number`) or empties it to `never`.\n */\ntype Props = Omit<React.ComponentPropsWithoutRef<typeof S.ContextMenu>, keyof ContextMenuOwnProps> &\n  ContextMenuOwnProps;\n\n/**\n * This component wraps around an array of `ContextMenuItems` to display a context menu.\n *\n * In most use-cases, the `ContextMenu` will be wrapped in a `Popover` to provide the functionality for opening/closing and placing the menu.\n * In such cases, send the `ContextMenu` to the `Popover` as its `content` prop.\n *\n * The context menu and sublevels will automatically adjust their placement in relation to the element that opens it\n * based on available space if the provided placement doesn't work. See the `Popover` documentation for further instructions on placement.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenu } from '@ntbjs/react-components/widgets'\n * // or\n * import ContextMenu from '@ntbjs/react-components/widgets/ContextMenu'\n * ```\n * \n * ### Usage examples \n * #### Plain context menu\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} key=\"item-2\" />;\n\n<Popover content={<ContextMenu {...args}>{[item1, itemGroup1, item2]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * #### Context menu with grouped items\n * Use the `ContextMenuItemsGroup` component to group menu items together. Grouped items will not show borders\n * between themselves, indicating that their actions are related.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} key=\"item-2\" />;\n\nconst groupItem1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-1\" />:\nconst groupItem2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-2\" />;\nconst groupItem3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-3\" />;\n\nconst itemGroup1 = <ContextMenuItemsGroup key=\"item-group-1\">{[groupItem1, groupItem2, groupItem3]}</ContextMenuItemsGroup>;\n\n<Popover content={<ContextMenu {...args}>{[item1, itemGroup1, item2]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * #### Context menu with sublevels\n * Wrap a `ContextMenuItem` in a `Popover` and pass it a `ContextMenu` as child to create a sublevel/submenu. \n * A sublevel will by default be placed adjacent and aligned with the `ContextMenuItem` which opens it,\n * and adjust automatically based on available space.\n * \n * Set the `contextMenu` and `contextMenuSublevel` props of the `Popover` containing the sublevel to `true`.\n * \n * Set the `opensSublevel` prop of the `ContextMenuItem` containing the sublevel to `true`.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} hoverBackgroundColors={['#fbeae6', '#fbeae6']} key=\"item-2\" />;\n\nconst subItem1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-1\" />\nconst subItem2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-2\" />\nconst subItem3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-3\" />\n\nconst itemWithSublevel = (\n  <Popover\n    content={\n      <ContextMenu sublevel={true}>\n        {[subItem1, subItem2, subItem3, subItem4, subItem5]}\n      </ContextMenu>\n    }\n    contextMenu={true}\n    contextMenuSublevel={true}\n    key=\"item-3\"\n  >\n    <ContextMenuItem title=\"Open level 2\" opensSublevel={true} />\n  </Popover>\n);\n\n<Popover content={<ContextMenu {...args}>{[item1, item2, itemWithSublevel]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * \n * #### Context menu from a dropdown button\n * When used with a dropdown button, the `Button` component takes care of wrapping the menu items in a `Popover`.\n * Just pass the array of `ContextMenuItems` directly into the `Button` as its children.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-2\" />;\nconst item3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-3\" />;\n\n<Button onClick={onClickEffect} dropdownItems={<ContextMenu {...args}>{[item1, item2, item3, item4, item5]}</ContextMenu>}>\n  Button text\n</Button>\n```\n *\n */\nconst ContextMenu = React.forwardRef<any, Props>(function ContextMenu(\n  { children, ...props },\n  forwardedRef\n) {\n  const filteredProps = Object.fromEntries(\n    Object.entries(props).filter(([key]) => key !== 'sublevel')\n  );\n\n  /*\n   * NMB-3998, plan C5: WHERE THE `FloatingTree` PROVIDER LIVES.\n   *\n   * C5 settles it as \"at the nesting site, not inside `Popover`\", so that a standalone\n   * `Popover` needs no tree — and `useFloatingPopover` renders no provider, which is what\n   * makes that possible. This is the nesting site: a submenu is a `Popover` wrapped around a\n   * `ContextMenuItem` INSIDE a `ContextMenu` (see this component's own JSDoc, \"Context menu\n   * with sublevels\").\n   *\n   * ONLY THE ROOT MENU CREATES ONE. `useFloatingTree()` returns the nearest provider or\n   * `null`, so a submenu's own `ContextMenu` reuses its ancestor's tree instead of starting a\n   * second one. Without that check every level would get a private tree, each containing a\n   * single node, and `getChildren()` would be empty everywhere — which is to say the check is\n   * the entire mechanism, not a micro-optimisation.\n   *\n   * WHAT IT BUYS, STATED HONESTLY, BECAUSE IT IS LESS THAN C5 ASSUMED:\n   *\n   * - With THREE or more levels it is load-bearing. `useDismiss` consults\n   *   `getChildren(tree, nodeId)` and refuses to dismiss a menu whose child is still open, so\n   *   a press inside a third-level menu no longer closes the second-level menu that owns it.\n   * - With TWO levels — every case that exists in this library and in both consumers today —\n   *   it is INERT, because the second level has no children of its own.\n   * - It can NEVER link the outermost `Popover` to its submenus, and no placement inside this\n   *   component could. This provider is rendered by the menu, which is the `Popover`'s\n   *   `content`, i.e. BELOW it in the React tree; the outer `Popover`'s `useFloatingTree()`\n   *   is therefore `null` and it never registers a node. That is a real limit of C5's\n   *   placement, not an implementation shortcut. The two behaviours that would otherwise have\n   *   needed it are both delivered another way and both depend on plan C4's INLINE default:\n   *     * the parent staying open while its submenu is used — the submenu's floating element\n   *       is a DOM descendant of the parent's, so `useDismiss`'s\n   *       `isEventTargetWithin(event, elements.floating)` already covers it;\n   *     * the whole chain closing when a leaf item is clicked — the click bubbles from the\n   *       submenu into the parent's own delegated handler (`handleContextMenuClick` in\n   *       `Popover.tsx`, where this is written out).\n   *   If sublevels are ever portalled, both stop working and the fix is to hoist a\n   *   `FloatingTree` above the outermost `Popover` — which means either `Popover`\n   *   self-wrapping when it has no parent node, or a consumer-visible wrapper. That is a\n   *   decision, and re-opening C5 is the right way to take it.\n   *\n   * It renders no DOM — `FloatingTree` is a context provider and nothing else — so neither\n   * the markup nor the CSS in `baseline.json` moves because of this, and the standalone\n   * `Popover` path is untouched.\n   */\n  const hasTree = useFloatingTree() !== null;\n\n  const menu = (\n    <S.ContextMenu ref={forwardedRef} {...filteredProps} role=\"menu\">\n      {children}\n    </S.ContextMenu>\n  );\n\n  return hasTree ? menu : <FloatingTree>{menu}</FloatingTree>;\n});\n\nexport default ContextMenu;\n"],"names":["ContextMenu","React","forwardRef","children","props","forwardedRef","filteredProps","Object","fromEntries","entries","filter","key","hasTree","useFloatingTree","menu","_jsx","S","ref","role","FloatingTree"],"mappings":";;;;;AAoJA,MAAMA,WAAW,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,WAAWA,CACnE;EAAEG,QAAQ;EAAE,GAAGC;AAAM,CAAC,EACtBC,YAAY,EACZ;EACA,MAAMC,aAAa,GAAGC,MAAM,CAACC,WAAW,CACtCD,MAAM,CAACE,OAAO,CAACL,KAAK,CAAC,CAACM,MAAM,CAAC,CAAC,CAACC,GAAG,CAAC,KAAKA,GAAG,KAAK,UAAU,CAC5D,CAAC;AA6CD,EAAA,MAAMC,OAAO,GAAGC,eAAe,EAAE,KAAK,IAAI;AAE1C,EAAA,MAAMC,IAAI,GACRC,GAAA,CAACC,aAAa,EAAA;AAACC,IAAAA,GAAG,EAAEZ,YAAa;AAAA,IAAA,GAAKC,aAAa;AAAEY,IAAAA,IAAI,EAAC,MAAM;AAAAf,IAAAA,QAAA,EAC7DA;AAAQ,GACI,CAChB;AAED,EAAA,OAAOS,OAAO,GAAGE,IAAI,GAAGC,GAAA,CAACI,YAAY,EAAA;AAAAhB,IAAAA,QAAA,EAAEW;AAAI,GAAe,CAAC;AAC7D,CAAC;;;;"}

package/build/widgets/ContextMenu/ContextMenu.styled.js

@@ -6,10 +6,10 @@ const shouldForwardProp = prop => {
 };
 const ContextMenu = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-family: ${props => props.theme.primaryFontFamily};
-  padding: 3px 0;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "ContextMenustyled__ContextMenu",
+  componentId: "sc-11pdycr-0"
+})(["font-family:", ";padding:3px 0;"], props => props.theme.primaryFontFamily);
 
 export { ContextMenu };
 //# sourceMappingURL=ContextMenu.styled.js.map

package/build/widgets/ContextMenu/ContextMenu.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.styled.js","sources":["../../../src/components/widgets/ContextMenu/ContextMenu.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const ContextMenu = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n  padding: 3px 0;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenu","styled","div","withConfig","attrs","applyDefaultTheme","props","theme","primaryFontFamily"],"mappings":";;;AAGA,MAAMA,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,WAAW,GAAGC,MAAM,CAACC,GAAG,CAClCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B,eAAA,EAAiBC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,iBAAiB,CAAA;AACvD;AACA;;;;"}
+{"version":3,"file":"ContextMenu.styled.js","sources":["../../../src/components/widgets/ContextMenu/ContextMenu.styled.ts"],"sourcesContent":["/*\n * $-transient-prop pattern: rules in\n * `src/components/layout/SectionSeparator/SectionSeparator.styled.ts`, derivation and\n * measurements in `scripts/TS-MIGRATION-PLAYBOOK.md` §J.\n *\n * NO COMPONENT IN THIS FILE READS A PROP, so there is no transient-prop type to declare —\n * rule 2, declare only what is actually passed and read. It reported ZERO errors before\n * this commit, and the one thing left to do is the predicate below.\n */\nimport styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n/*\n * Single-argument, and it stays that way — peer floor `styled-components: >=5.1.0`, and\n * the two majors disagree on the second parameter (v6 `elementToBeCreated`, v5.1\n * `defaultValidatorFn`). A one-parameter function is assignable to both. §J.4.\n *\n * `prop` NEEDS THE ANNOTATION EVEN THOUGH ITS ABSENCE REPORTED NO ERROR. `withConfig`\n * receives this by reference, so it gets no contextual typing and `prop` was an implicit\n * `any` — silent, because `noImplicitAny` is off (+474 errors, see `tsconfig.json`). With\n * `any` there, `prop.startsWith` is unchecked: a typo in the method name would have been a\n * runtime TypeError in the prop filter of every component in the file. A file at zero\n * errors is not the same as a file that is checked.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const ContextMenu = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n  padding: 3px 0;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenu","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","theme","primaryFontFamily"],"mappings":";;;AAwBA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAEM,MAAMC,WAAW,GAAGC,MAAM,CAACC,GAAG,CAClCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,gCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,cAAA,EAAA,iBAAA,CAAA,EACVC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,iBAAiB;;;;"}

package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js

@@ -1,44 +1,36 @@
-import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import { ContextMenuItem as ContextMenuItem$1, IconContainer, Label, SublevelIconContainer } from './ContextMenuItem.styled.js';
 import { ReactComponent as SvgTriangleRight } from '../../../icons/triangle-right.svg.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const ContextMenuItem = React__default.forwardRef(function ContextMenuItem({
   title,
-  icon,
+  icon = undefined,
   onClickEffect,
-  opensSublevel,
-  hoverColors,
-  hoverBackgroundColors,
+  opensSublevel = false,
+  hoverColors = undefined,
+  hoverBackgroundColors = undefined,
   ...props
 }, forwardedRef) {
-  return React__default.createElement(ContextMenuItem$1, _extends({
+  return jsxs(ContextMenuItem$1, {
     ref: forwardedRef,
     $icon: icon,
     onClick: onClickEffect,
     $hoverColors: hoverColors,
     $hoverBackgroundColors: hoverBackgroundColors,
     $openssublevel: opensSublevel,
-    className: opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'
-  }, props, {
-    role: "menuitem"
-  }), icon && React__default.createElement(IconContainer, null, icon), React__default.createElement(Label, null, title), opensSublevel && React__default.createElement(SublevelIconContainer, null, React__default.createElement(SvgTriangleRight, null)));
+    className: opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item',
+    ...props,
+    role: "menuitem",
+    children: [icon && jsx(IconContainer, {
+      children: icon
+    }), jsx(Label, {
+      children: title
+    }), opensSublevel && jsx(SublevelIconContainer, {
+      children: jsx(SvgTriangleRight, {})
+    })]
+  });
 });
-ContextMenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
-  title: PropTypes.string.isRequired,
-  icon: PropTypes.element,
-  onClickEffect: PropTypes.func,
-  opensSublevel: PropTypes.bool,
-  hoverColors: PropTypes.arrayOf(PropTypes.string),
-  hoverBackgroundColors: PropTypes.arrayOf(PropTypes.string)
-} : {};
-ContextMenuItem.defaultProps = {
-  icon: undefined,
-  hoverColors: undefined,
-  hoverBackgroundColors: undefined,
-  opensSublevel: false
-};
 
 export { ContextMenuItem as default };
 //# sourceMappingURL=ContextMenuItem.js.map

package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuItem.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ContextMenuItem.styled';\n\nimport { ReactComponent as TriangleRightIcon } from '../../../../icons/triangle-right.svg';\n\n/**\n * Single context menu item.\n *\n * See the documentation for `ContextMenu` for usage examples.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenuItem } from '@ntbjs/react-components/widgets/ContextMenu'\n * // or\n * import ContextMenuItem from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItem'\n * ```\n */\nconst ContextMenuItem = React.forwardRef(function ContextMenuItem(\n  { title, icon, onClickEffect, opensSublevel, hoverColors, hoverBackgroundColors, ...props },\n  forwardedRef\n) {\n  return (\n    <S.ContextMenuItem\n      ref={forwardedRef}\n      $icon={icon}\n      onClick={onClickEffect}\n      $hoverColors={hoverColors}\n      $hoverBackgroundColors={hoverBackgroundColors}\n      $openssublevel={opensSublevel}\n      className={opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'}\n      {...props}\n      role=\"menuitem\"\n    >\n      {icon && <S.IconContainer>{icon}</S.IconContainer>}\n      <S.Label>{title}</S.Label>\n      {opensSublevel && (\n        <S.SublevelIconContainer>\n          <TriangleRightIcon />\n        </S.SublevelIconContainer>\n      )}\n    </S.ContextMenuItem>\n  );\n});\n\nContextMenuItem.propTypes = {\n  /**\n   * Menu item text\n   */\n  title: PropTypes.string.isRequired,\n\n  /**\n   * Optional icon (left side)\n   */\n  icon: PropTypes.element,\n\n  /**\n   * Function to trigger when the item is clicked\n   */\n  onClickEffect: PropTypes.func,\n\n  /**\n   * Whether the `ContextMenuItem` opens another `ContextMenu`\n   */\n  opensSublevel: PropTypes.bool,\n\n  /**\n   * Array of custom hover text/icon color in the form of hex-strings (e.g. `'#FFFFFF'`).\n   * Must contain two colors, where the first is for dark-mode and the second is for light-mode.\n   */\n  hoverColors: PropTypes.arrayOf(PropTypes.string),\n\n  /**\n   * Array of custom hover background colors in the form of hex-strings (e.g. `'#FFFFFF'`).\n   * Must contain two colors, where the first is for dark-mode and the second is for light-mode.\n   */\n  hoverBackgroundColors: PropTypes.arrayOf(PropTypes.string)\n};\n\nContextMenuItem.defaultProps = {\n  icon: undefined,\n  hoverColors: undefined,\n  hoverBackgroundColors: undefined,\n  opensSublevel: false\n};\n\nexport default ContextMenuItem;\n"],"names":["ContextMenuItem","React","forwardRef","title","icon","onClickEffect","opensSublevel","hoverColors","hoverBackgroundColors","props","forwardedRef","createElement","S","_extends","ref","$icon","onClick","$hoverColors","$hoverBackgroundColors","$openssublevel","className","role","TriangleRightIcon","propTypes","process","env","NODE_ENV","PropTypes","string","isRequired","element","func","bool","arrayOf","defaultProps","undefined"],"mappings":";;;;;;AAmBMA,MAAAA,eAAe,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,eAAeA,CAC/D;EAAEG,KAAK;EAAEC,IAAI;EAAEC,aAAa;EAAEC,aAAa;EAAEC,WAAW;EAAEC,qBAAqB;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAC3FC,YAAY,EACZ;EACA,OACET,cAAA,CAAAU,aAAA,CAACC,iBAAiB,EAAAC,QAAA,CAAA;AAChBC,IAAAA,GAAG,EAAEJ,YAAa;AAClBK,IAAAA,KAAK,EAAEX,IAAK;AACZY,IAAAA,OAAO,EAAEX,aAAc;AACvBY,IAAAA,YAAY,EAAEV,WAAY;AAC1BW,IAAAA,sBAAsB,EAAEV,qBAAsB;AAC9CW,IAAAA,cAAc,EAAEb,aAAc;AAC9Bc,IAAAA,SAAS,EAAEd,aAAa,GAAG,kCAAkC,GAAG,mBAAA;AAAoB,GAAA,EAChFG,KAAK,EAAA;AACTY,IAAAA,IAAI,EAAC,UAAA;AAAU,GAAA,CAAA,EAEdjB,IAAI,IAAIH,cAAA,CAAAU,aAAA,CAACC,aAAe,QAAER,IAAsB,CAAC,EAClDH,cAAA,CAAAU,aAAA,CAACC,KAAO,EAAA,IAAA,EAAET,KAAe,CAAC,EACzBG,aAAa,IACZL,cAAA,CAAAU,aAAA,CAACC,qBAAuB,EACtBX,IAAAA,EAAAA,cAAA,CAAAU,aAAA,CAACW,gBAAiB,EAAE,IAAA,CACG,CAEV,CAAC,CAAA;AAExB,CAAC,EAAC;AAEFtB,eAAe,CAACuB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAI1BvB,EAAAA,KAAK,EAAEwB,SAAS,CAACC,MAAM,CAACC,UAAU;EAKlCzB,IAAI,EAAEuB,SAAS,CAACG,OAAO;EAKvBzB,aAAa,EAAEsB,SAAS,CAACI,IAAI;EAK7BzB,aAAa,EAAEqB,SAAS,CAACK,IAAI;EAM7BzB,WAAW,EAAEoB,SAAS,CAACM,OAAO,CAACN,SAAS,CAACC,MAAM,CAAC;AAMhDpB,EAAAA,qBAAqB,EAAEmB,SAAS,CAACM,OAAO,CAACN,SAAS,CAACC,MAAM,CAAA;AAC3D,CAAC,GAAA,EAAA,CAAA;AAED5B,eAAe,CAACkC,YAAY,GAAG;AAC7B9B,EAAAA,IAAI,EAAE+B,SAAS;AACf5B,EAAAA,WAAW,EAAE4B,SAAS;AACtB3B,EAAAA,qBAAqB,EAAE2B,SAAS;AAChC7B,EAAAA,aAAa,EAAE,KAAA;AACjB,CAAC;;;;"}
+{"version":3,"file":"ContextMenuItem.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport * as S from './ContextMenuItem.styled';\n\nimport { ReactComponent as TriangleRightIcon } from '../../../../icons/triangle-right.svg';\n\ntype ContextMenuItemOwnProps = {\n  /**\n   * Menu item text\n   */\n  title: string;\n  /**\n   * Optional icon (left side)\n   */\n  icon?: React.ReactElement<any>;\n  /**\n   * Function to trigger when the item is clicked\n   */\n  onClickEffect?: (...args: any[]) => any;\n  /**\n   * Whether the `ContextMenuItem` opens another `ContextMenu`\n   */\n  opensSublevel?: boolean;\n  /**\n   * Array of custom hover text/icon color in the form of hex-strings (e.g. `'#FFFFFF'`).\n   * Must contain two colors, where the first is for dark-mode and the second is for light-mode.\n   */\n  hoverColors?: string[];\n  /**\n   * Array of custom hover background colors in the form of hex-strings (e.g. `'#FFFFFF'`).\n   * Must contain two colors, where the first is for dark-mode and the second is for light-mode.\n   */\n  hoverBackgroundColors?: string[];\n};\n\n/*\n * NMB-3998 §C.2: `props` is spread onto `S.ContextMenuItem`, so the published type\n * has to admit that target's props too — a closed type here is worse than `any` for the\n * 125 consumer files. Declared members win over the base (`Omit` by `keyof ContextMenuItemOwnProps`);\n * a bare `&` would INTERSECT a colliding member instead of overriding it, which narrows\n * it (measured: `rows?: number | string` & `rows?: number`) or empties it to `never`.\n */\ntype Props = Omit<\n  React.ComponentPropsWithoutRef<typeof S.ContextMenuItem>,\n  keyof ContextMenuItemOwnProps\n> &\n  ContextMenuItemOwnProps;\n\n/**\n * Single context menu item.\n *\n * See the documentation for `ContextMenu` for usage examples.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenuItem } from '@ntbjs/react-components/widgets/ContextMenu'\n * // or\n * import ContextMenuItem from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItem'\n * ```\n */\nconst ContextMenuItem = React.forwardRef<any, Props>(function ContextMenuItem(\n  {\n    title,\n    icon = undefined,\n    onClickEffect,\n    opensSublevel = false,\n    hoverColors = undefined,\n    hoverBackgroundColors = undefined,\n    ...props\n  },\n  forwardedRef\n) {\n  return (\n    <S.ContextMenuItem\n      ref={forwardedRef}\n      $icon={icon}\n      onClick={onClickEffect}\n      $hoverColors={hoverColors}\n      $hoverBackgroundColors={hoverBackgroundColors}\n      $openssublevel={opensSublevel}\n      className={opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'}\n      {...props}\n      role=\"menuitem\"\n    >\n      {icon && <S.IconContainer>{icon}</S.IconContainer>}\n      <S.Label>{title}</S.Label>\n      {opensSublevel && (\n        <S.SublevelIconContainer>\n          <TriangleRightIcon />\n        </S.SublevelIconContainer>\n      )}\n    </S.ContextMenuItem>\n  );\n});\n\nexport default ContextMenuItem;\n"],"names":["ContextMenuItem","React","forwardRef","title","icon","undefined","onClickEffect","opensSublevel","hoverColors","hoverBackgroundColors","props","forwardedRef","_jsxs","S","ref","$icon","onClick","$hoverColors","$hoverBackgroundColors","$openssublevel","className","role","children","_jsx","TriangleRightIcon"],"mappings":";;;;;AA4DA,MAAMA,eAAe,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,eAAeA,CAC3E;EACEG,KAAK;AACLC,EAAAA,IAAI,GAAGC,SAAS;EAChBC,aAAa;AACbC,EAAAA,aAAa,GAAG,KAAK;AACrBC,EAAAA,WAAW,GAAGH,SAAS;AACvBI,EAAAA,qBAAqB,GAAGJ,SAAS;EACjC,GAAGK;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,OACEC,IAAA,CAACC,iBAAiB,EAAA;AAChBC,IAAAA,GAAG,EAAEH,YAAa;AAClBI,IAAAA,KAAK,EAAEX,IAAK;AACZY,IAAAA,OAAO,EAAEV,aAAc;AACvBW,IAAAA,YAAY,EAAET,WAAY;AAC1BU,IAAAA,sBAAsB,EAAET,qBAAsB;AAC9CU,IAAAA,cAAc,EAAEZ,aAAc;AAC9Ba,IAAAA,SAAS,EAAEb,aAAa,GAAG,kCAAkC,GAAG,mBAAoB;AAAA,IAAA,GAChFG,KAAK;AACTW,IAAAA,IAAI,EAAC,UAAU;AAAAC,IAAAA,QAAA,GAEdlB,IAAI,IAAImB,GAAA,CAACV,aAAe,EAAA;AAAAS,MAAAA,QAAA,EAAElB;AAAI,KAAkB,CAAC,EAClDmB,GAAA,CAACV,KAAO,EAAA;AAAAS,MAAAA,QAAA,EAAEnB;KAAe,CAAC,EACzBI,aAAa,IACZgB,GAAA,CAACV,qBAAuB,EAAA;AAAAS,MAAAA,QAAA,EACtBC,GAAA,CAACC,gBAAiB,EAAA,EAAE;AAAC,KACE,CAC1B;AAAA,GACgB,CAAC;AAExB,CAAC;;;;"}