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

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

@@ -6,81 +6,26 @@ const shouldForwardProp = prop => {
 };
 const ContextMenuItem = styled.span.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-size: 0.875rem;
-  font-weight: normal;
-  height: 31px;
-  min-width: 160px;
-  padding: ${props => props.$openssublevel ? '0 8px' : '0 28px 0 8px'};
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
-
-  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE')}
-
-  ${props => !props.$icon && css`
-      padding-left: 28px;
-    `}
-
-
-  :last-of-type {
-    height: 32px;
-  }
-
-  &:hover {
-    cursor: pointer;
-
-    ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
-  }
-
-  ${props => props.$openssublevelhoverColors && props.$hoverColors[0] && props.$hoverColors[1] && css`
-      &&:hover {
-        ${props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])}
-      }
-    `}
-
-  ${props => props.$hoverBackgroundColors && props.$hoverBackgroundColors[0] && props.$hoverBackgroundColors[1] && css`
-      &&:hover {
-        ${props => props.theme.themeProp('background-color', props.$hoverBackgroundColors[0], props.$hoverBackgroundColors[1])}
-      }
-    `}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "ContextMenuItemstyled__ContextMenuItem",
+  componentId: "sc-8s6zvg-0"
+})(["align-items:center;cursor:pointer;display:flex;font-family:", ";font-size:0.875rem;font-weight:normal;height:31px;min-width:160px;padding:", ";", " ", " ", " :last-of-type{height:32px;}&:hover{cursor:pointer;", "}", " ", ""], props => props.theme.primaryFontFamily, props => props.$openssublevel ? '0 8px' : '0 28px 0 8px', props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')), props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE'), props => !props.$icon && css(["padding-left:28px;"]), props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200')), props => props.$hoverColors && props.$hoverColors[0] && props.$hoverColors[1] && css(["&&:hover{", "}"], props => props.theme.themeProp('color', props.$hoverColors[0], props.$hoverColors[1])), props => props.$hoverBackgroundColors && props.$hoverBackgroundColors[0] && props.$hoverBackgroundColors[1] && css(["&&:hover{", "}"], props => props.theme.themeProp('background-color', props.$hoverBackgroundColors[0], props.$hoverBackgroundColors[1])));
 const IconContainer = styled.span.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  align-items: center;
-  display: flex;
-  height: fit-content;
-  max-width: 12px;
-  margin-right: 8px;
-
-  svg {
-    height: 12px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "ContextMenuItemstyled__IconContainer",
+  componentId: "sc-8s6zvg-1"
+})(["align-items:center;display:flex;height:fit-content;max-width:12px;margin-right:8px;svg{height:12px;}"]);
 const SublevelIconContainer = styled.span.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  align-items: center;
-  display: flex;
-  height: fit-content;
-  max-width: 12px;
-  margin-left: auto;
-  margin-right: 8px;
-  padding-left: 24px;
-
-  svg {
-     height: 6px;
-    width: 6px;
-  }
-`;
-const Label = styled.span`
-  align-items: center;
-  display: flex;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "ContextMenuItemstyled__SublevelIconContainer",
+  componentId: "sc-8s6zvg-2"
+})(["align-items:center;display:flex;height:fit-content;max-width:12px;margin-left:auto;margin-right:8px;padding-left:24px;svg{height:6px;width:6px;}"]);
+const Label = styled.span.withConfig({
+  displayName: "ContextMenuItemstyled__Label",
+  componentId: "sc-8s6zvg-3"
+})(["align-items:center;display:flex;"]);
 
 export { ContextMenuItem, IconContainer, Label, SublevelIconContainer };
 //# sourceMappingURL=ContextMenuItem.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuItem.styled.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.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 ContextMenuItem = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 0.875rem;\n  font-weight: normal;\n  height: 31px;\n  min-width: 160px;\n  padding: ${props => (props.$openssublevel ? '0 8px' : '0 28px 0 8px')};\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-700')\n    )}\n\n  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE')}\n\n  ${props =>\n    !props.$icon &&\n    css`\n      padding-left: 28px;\n    `}\n\n\n  :last-of-type {\n    height: 32px;\n  }\n\n  &:hover {\n    cursor: pointer;\n\n    ${props =>\n      props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-600'),\n        props.theme.getColor('gray-200')\n      )}\n  }\n\n  ${props =>\n    props.$openssublevelhoverColors &&\n    props.$hoverColors[0] &&\n    props.$hoverColors[1] &&\n    css`\n      &&:hover {\n        ${props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])}\n      }\n    `}\n\n  ${props =>\n    props.$hoverBackgroundColors &&\n    props.$hoverBackgroundColors[0] &&\n    props.$hoverBackgroundColors[1] &&\n    css`\n      &&:hover {\n        ${props =>\n          props.theme.themeProp(\n            'background-color',\n            props.$hoverBackgroundColors[0],\n            props.$hoverBackgroundColors[1]\n          )}\n      }\n    `}\n`;\n\nexport const IconContainer = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  height: fit-content;\n  max-width: 12px;\n  margin-right: 8px;\n\n  svg {\n    height: 12px;\n  }\n`;\n\nexport const SublevelIconContainer = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  height: fit-content;\n  max-width: 12px;\n  margin-left: auto;\n  margin-right: 8px;\n  padding-left: 24px;\n\n  svg {\n     height: 6px;\n    width: 6px;\n  }\n`;\n\nexport const Label = styled.span`\n  align-items: center;\n  display: flex;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenuItem","styled","span","withConfig","attrs","applyDefaultTheme","props","theme","primaryFontFamily","$openssublevel","themeProp","getColor","$icon","css","$openssublevelhoverColors","$hoverColors","hoverColors","$hoverBackgroundColors","IconContainer","SublevelIconContainer","Label"],"mappings":"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"}
+{"version":3,"file":"ContextMenuItem.styled.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.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 * The two stacked defects this file used to carry in its first `&&:hover` block are FIXED,\n * together, because fixing either alone throws: the guard read the run-together\n * `$openssublevelhoverColors` and the rule inside it read `props.hoverColors` with no `$`.\n * Both now read `$hoverColors`, and the guard tests the array's presence before indexing\n * it, exactly like the `$hoverBackgroundColors` block below. That activates a rule that has\n * never been emitted, so it moves the render baseline (§E.3/§J.8); the re-record is a\n * separate, reviewed commit.\n */\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\nimport type { ReactElement } from 'react';\n\n/**\n * `ContextMenuItem`'s props, i.e. what `ContextMenuItem.tsx` passes to\n * `<S.ContextMenuItem>`: `$icon`, `$hoverColors`, `$hoverBackgroundColors` and\n * `$openssublevel`. Value types from that file's propTypes; all optional per §J.5.\n */\nexport interface ContextMenuItemStyleProps {\n  /** `icon` — `PropTypes.element`, so a React element and not a `ReactNode`. Read only\n   *  as `!props.$icon`, i.e. for presence. */\n  $icon?: ReactElement<any>;\n  /** `opensSublevel` — `PropTypes.bool`. Selects the right-hand padding, since a\n   *  sublevel item has its own chevron in that space. Lower-case by existing convention\n   *  at both ends; renaming it would be a two-file change for no type benefit. */\n  $openssublevel?: boolean;\n  /** `hoverColors` — `PropTypes.arrayOf(PropTypes.string)`, documented as exactly\n   *  `[darkModeColor, lightModeColor]` hex strings. `string[]` and not\n   *  `[string, string]`: the propTypes say an array of any length, which is why the\n   *  template guards the array's presence and then `[0]` and `[1]` individually. */\n  $hoverColors?: string[];\n  /** `hoverBackgroundColors` — same shape as `$hoverColors`. */\n  $hoverBackgroundColors?: string[];\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 ContextMenuItem = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<ContextMenuItemStyleProps>(applyDefaultTheme)`\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 0.875rem;\n  font-weight: normal;\n  height: 31px;\n  min-width: 160px;\n  padding: ${props => (props.$openssublevel ? '0 8px' : '0 28px 0 8px')};\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-700')\n    )}\n\n  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE')}\n\n  ${props =>\n    !props.$icon &&\n    css`\n      padding-left: 28px;\n    `}\n\n\n  :last-of-type {\n    height: 32px;\n  }\n\n  &:hover {\n    cursor: pointer;\n\n    ${props =>\n      props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-600'),\n        props.theme.getColor('gray-200')\n      )}\n  }\n\n  ${props =>\n    props.$hoverColors &&\n    props.$hoverColors[0] &&\n    props.$hoverColors[1] &&\n    css<Pick<ContextMenuItemStyleProps, '$hoverColors'>>`\n      &&:hover {\n        ${props => props.theme.themeProp('color', props.$hoverColors[0], props.$hoverColors[1])}\n      }\n    `}\n\n  ${props =>\n    props.$hoverBackgroundColors &&\n    props.$hoverBackgroundColors[0] &&\n    props.$hoverBackgroundColors[1] &&\n    css<Pick<ContextMenuItemStyleProps, '$hoverBackgroundColors'>>`\n      &&:hover {\n        ${props =>\n          props.theme.themeProp(\n            'background-color',\n            props.$hoverBackgroundColors[0],\n            props.$hoverBackgroundColors[1]\n          )}\n      }\n    `}\n`;\n\nexport const IconContainer = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  height: fit-content;\n  max-width: 12px;\n  margin-right: 8px;\n\n  svg {\n    height: 12px;\n  }\n`;\n\nexport const SublevelIconContainer = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  height: fit-content;\n  max-width: 12px;\n  margin-left: auto;\n  margin-right: 8px;\n  padding-left: 24px;\n\n  svg {\n     height: 6px;\n    width: 6px;\n  }\n`;\n\nexport const Label = styled.span`\n  align-items: center;\n  display: flex;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenuItem","styled","span","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","theme","primaryFontFamily","$openssublevel","themeProp","getColor","$icon","css","$hoverColors","$hoverBackgroundColors","IconContainer","SublevelIconContainer","Label"],"mappings":"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"}

package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js

@@ -1,22 +1,18 @@
-import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import { ContextMenuItemsGroup as ContextMenuItemsGroup$1 } from './ContextMenuItemsGroup.styled.js';
+import { jsx } from 'react/jsx-runtime';
 
 const ContextMenuItemsGroup = React__default.forwardRef(function ContextMenuItemsGroup({
   children,
   ...props
 }, forwardedRef) {
-  return React__default.createElement(ContextMenuItemsGroup$1, _extends({
-    ref: forwardedRef
-  }, props, {
-    role: "group"
-  }), children);
+  return jsx(ContextMenuItemsGroup$1, {
+    ref: forwardedRef,
+    ...props,
+    role: "group",
+    children: children
+  });
 });
-ContextMenuItemsGroup.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.arrayOf(PropTypes.node)
-} : {};
-ContextMenuItemsGroup.defaultProps = {};
 
 export { ContextMenuItemsGroup as default };
 //# sourceMappingURL=ContextMenuItemsGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuItemsGroup.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ContextMenuItemsGroup.styled';\n\n/**\n * Simple wrapper for a group of context menu items. These will be displayed without a border between each item.\n *\n * See the documentation for `ContextMenu` for an example.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenuItemsGroup } from '@ntbjs/react-components/widgets/ContextMenu'\n * // or\n * import ContextMenuItemsGroup from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItemsGroup'\n * ```\n *\n */\nconst ContextMenuItemsGroup = React.forwardRef(function ContextMenuItemsGroup(\n  { children, ...props },\n  forwardedRef\n) {\n  return (\n    <S.ContextMenuItemsGroup ref={forwardedRef} {...props} role=\"group\">\n      {children}\n    </S.ContextMenuItemsGroup>\n  );\n});\n\nContextMenuItemsGroup.propTypes = {\n  /**\n   * An array containing nodes of the `ContextMenuItem` component\n   */\n  children: PropTypes.arrayOf(PropTypes.node)\n};\n\nContextMenuItemsGroup.defaultProps = {};\n\nexport default ContextMenuItemsGroup;\n"],"names":["ContextMenuItemsGroup","React","forwardRef","children","props","forwardedRef","createElement","S","_extends","ref","role","propTypes","process","env","NODE_ENV","PropTypes","arrayOf","node","defaultProps"],"mappings":";;;;;AAkBMA,MAAAA,qBAAqB,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,qBAAqBA,CAC3E;EAAEG,QAAQ;EAAE,GAAGC,KAAAA;AAAM,CAAC,EACtBC,YAAY,EACZ;EACA,OACEJ,cAAA,CAAAK,aAAA,CAACC,uBAAuB,EAAAC,QAAA,CAAA;AAACC,IAAAA,GAAG,EAAEJ,YAAAA;AAAa,GAAA,EAAKD,KAAK,EAAA;AAAEM,IAAAA,IAAI,EAAC,OAAA;AAAO,GAAA,CAAA,EAChEP,QACsB,CAAC,CAAA;AAE9B,CAAC,EAAC;AAEFH,qBAAqB,CAACW,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAIhCX,EAAAA,QAAQ,EAAEY,SAAS,CAACC,OAAO,CAACD,SAAS,CAACE,IAAI,CAAA;AAC5C,CAAC,GAAA,EAAA,CAAA;AAEDjB,qBAAqB,CAACkB,YAAY,GAAG,EAAE;;;;"}
+{"version":3,"file":"ContextMenuItemsGroup.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.tsx"],"sourcesContent":["import React from 'react';\nimport * as S from './ContextMenuItemsGroup.styled';\n\ntype ContextMenuItemsGroupOwnProps = {\n  /**\n   * Nodes of the `ContextMenuItem` component — one, or an array.\n   *\n   * DEFECT FIXED, NOT TRANSCRIBED. The propTypes said\n   * `children: PropTypes.arrayOf(PropTypes.node)`, and the codemod faithfully rendered\n   * that as `React.ReactNode[]` — which REJECTS A SINGLE JSX CHILD, because React does not\n   * wrap one child in an array:\n   *\n   *     <ContextMenuItemsGroup><ContextMenuItem title=\"Edit\" /></ContextMenuItemsGroup>\n   *\n   * gives `children` as one element. On React 16 this was a dev-time propTypes warning\n   * only, which is how it survived — the React 16 gate is what surfaced it. Under the\n   * generated closed type it became a hard COMPILE error at every such call site, in the\n   * consumer as well as here, so faithfully reproducing the propTypes would have shipped a\n   * type that forbids the component's most obvious usage.\n   *\n   * `React.ReactNode` is the accurate type and it still admits the array form, since\n   * `ReactNode` includes `Iterable<ReactNode>`. The component only forwards `children` to\n   * `S.ContextMenuItemsGroup`, so nothing here depends on it being an array. Zero runtime\n   * change: the propTypes this replaces were already deleted by the codemod.\n   */\n  children?: React.ReactNode;\n};\n\n/*\n * NMB-3998 §C.2: `props` is spread onto `S.ContextMenuItemsGroup`, 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 ContextMenuItemsGroupOwnProps`);\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.ContextMenuItemsGroup>,\n  keyof ContextMenuItemsGroupOwnProps\n> &\n  ContextMenuItemsGroupOwnProps;\n\n/**\n * Simple wrapper for a group of context menu items. These will be displayed without a border between each item.\n *\n * See the documentation for `ContextMenu` for an example.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenuItemsGroup } from '@ntbjs/react-components/widgets/ContextMenu'\n * // or\n * import ContextMenuItemsGroup from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItemsGroup'\n * ```\n *\n */\nconst ContextMenuItemsGroup = React.forwardRef<any, Props>(function ContextMenuItemsGroup(\n  { children, ...props },\n  forwardedRef\n) {\n  return (\n    <S.ContextMenuItemsGroup ref={forwardedRef} {...props} role=\"group\">\n      {children}\n    </S.ContextMenuItemsGroup>\n  );\n});\n\nexport default ContextMenuItemsGroup;\n"],"names":["ContextMenuItemsGroup","React","forwardRef","children","props","forwardedRef","_jsx","S","ref","role"],"mappings":";;;;AAuDA,MAAMA,qBAAqB,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,qBAAqBA,CACvF;EAAEG,QAAQ;EAAE,GAAGC;AAAM,CAAC,EACtBC,YAAY,EACZ;AACA,EAAA,OACEC,GAAA,CAACC,uBAAuB,EAAA;AAACC,IAAAA,GAAG,EAAEH,YAAa;AAAA,IAAA,GAAKD,KAAK;AAAEK,IAAAA,IAAI,EAAC,OAAO;AAAAN,IAAAA,QAAA,EAChEA;AAAQ,GACc,CAAC;AAE9B,CAAC;;;;"}

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

@@ -6,17 +6,10 @@ const shouldForwardProp = prop => {
 };
 const ContextMenuItemsGroup = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-
-
-  > * {
-    border-bottom: none !important;
-  }
-
-  > *:not(:last-child) {
-    height: 32px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "ContextMenuItemsGroupstyled__ContextMenuItemsGroup",
+  componentId: "sc-ot5edl-0"
+})(["> *{border-bottom:none !important;}> *:not(:last-child){height:32px;}"]);
 
 export { ContextMenuItemsGroup };
 //# sourceMappingURL=ContextMenuItemsGroup.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuItemsGroup.styled.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.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 ContextMenuItemsGroup = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n\n\n  > * {\n    border-bottom: none !important;\n  }\n\n  > *:not(:last-child) {\n    height: 32px;\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenuItemsGroup","styled","div","withConfig","attrs","applyDefaultTheme"],"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,qBAAqB,GAAGC,MAAM,CAACC,GAAG,CAC5CC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
+{"version":3,"file":"ContextMenuItemsGroup.styled.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.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 ContextMenuItemsGroup = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n\n\n  > * {\n    border-bottom: none !important;\n  }\n\n  > *:not(:last-child) {\n    height: 32px;\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenuItemsGroup","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId"],"mappings":";;;AAwBA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAEM,MAAMC,qBAAqB,GAAGC,MAAM,CAACC,GAAG,CAC5CC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,oDAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uEAAA,CAAA;;;;"}

package/build/widgets/InfoCard/InfoCard.js

@@ -1,7 +1,6 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState } from 'react';
-import PropTypes from 'prop-types';
 import { Container, MetricsContainer, IconTotalContainer, IconContainer, Total, Label, Link, ButtonLink, StyledArrowIcon } from './InfoCard.styled.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const InfoCard = React__default.forwardRef(function InfoCard({
   icon,
@@ -14,27 +13,33 @@ const InfoCard = React__default.forwardRef(function InfoCard({
 }, forwardedRef) {
   const [isLinkHovered, setIsLinkHovered] = useState(false);
   const handleLinkClick = e => onClick(e);
-  return React__default.createElement(Container, _extends({
+  return jsxs(Container, {
     height: height,
-    ref: forwardedRef
-  }, props), React__default.createElement(MetricsContainer, null, React__default.createElement(IconTotalContainer, null, React__default.createElement(IconContainer, null, icon), React__default.createElement(Total, null, total)), React__default.createElement(Label, null, label)), linkLabel && onClick && React__default.createElement(Link, {
-    onClick: handleLinkClick,
-    onMouseEnter: () => setIsLinkHovered(true),
-    onMouseLeave: () => setIsLinkHovered(false)
-  }, React__default.createElement(ButtonLink, {
-    $isHovered: isLinkHovered
-  }, linkLabel), React__default.createElement(StyledArrowIcon, {
-    $isHovered: isLinkHovered
-  })));
+    ref: forwardedRef,
+    ...props,
+    children: [jsxs(MetricsContainer, {
+      children: [jsxs(IconTotalContainer, {
+        children: [jsx(IconContainer, {
+          children: icon
+        }), jsx(Total, {
+          children: total
+        })]
+      }), jsx(Label, {
+        children: label
+      })]
+    }), linkLabel && onClick && jsxs(Link, {
+      onClick: handleLinkClick,
+      onMouseEnter: () => setIsLinkHovered(true),
+      onMouseLeave: () => setIsLinkHovered(false),
+      children: [jsx(ButtonLink, {
+        $isHovered: isLinkHovered,
+        children: linkLabel
+      }), jsx(StyledArrowIcon, {
+        $isHovered: isLinkHovered
+      })]
+    })]
+  });
 });
-InfoCard.propTypes = process.env.NODE_ENV !== "production" ? {
-  icon: PropTypes.element.isRequired,
-  total: PropTypes.number.isRequired,
-  label: PropTypes.string.isRequired,
-  linkLabel: PropTypes.string,
-  onClick: PropTypes.func,
-  height: PropTypes.number
-} : {};
 
 export { InfoCard as default };
 //# sourceMappingURL=InfoCard.js.map

package/build/widgets/InfoCard/InfoCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoCard.js","sources":["../../../src/components/widgets/InfoCard/InfoCard.js"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './InfoCard.styled';\n\n/**\n * Info Card\n *\n * ### Import\n *\n * ``` js\n * import { InfoCard } from '@ntbjs/react-components/widgets'\n * // or\n * import InfoCard from '@ntbjs/react-components/widgets/InfoCard'\n * ```\n *\n * ### Props\n * ```\n * Pass `icon={<svg></svg>}` to display an icon.\n * Pass `total={100}` to display number.\n * Pass `label={\"this is a label\"}` to display a label.\n * Pass `linkLabel={\"this is a label\"}` to display a link next to the arrow icon.\n * Pass `height={50}` to adjust the card´s height.\n * Pass `onClick={function}` to handle click event.\n * ```\n */\n\nconst InfoCard = React.forwardRef(function InfoCard(\n  { icon, total, label, linkLabel, onClick, height, ...props },\n  forwardedRef\n) {\n  const [isLinkHovered, setIsLinkHovered] = useState(false);\n\n  const handleLinkClick = e => onClick(e);\n\n  return (\n    <S.Container height={height} ref={forwardedRef} {...props}>\n      <S.MetricsContainer>\n        <S.IconTotalContainer>\n          <S.IconContainer>{icon}</S.IconContainer>\n          <S.Total>{total}</S.Total>\n        </S.IconTotalContainer>\n        <S.Label>{label}</S.Label>\n      </S.MetricsContainer>\n      {linkLabel && onClick && (\n        <S.Link\n          onClick={handleLinkClick}\n          onMouseEnter={() => setIsLinkHovered(true)}\n          onMouseLeave={() => setIsLinkHovered(false)}\n        >\n          <S.ButtonLink $isHovered={isLinkHovered}>{linkLabel}</S.ButtonLink>\n          <S.StyledArrowIcon $isHovered={isLinkHovered} />\n        </S.Link>\n      )}\n    </S.Container>\n  );\n});\n\nInfoCard.propTypes = {\n  icon: PropTypes.element.isRequired,\n  total: PropTypes.number.isRequired,\n  label: PropTypes.string.isRequired,\n  linkLabel: PropTypes.string,\n  onClick: PropTypes.func,\n  height: PropTypes.number\n};\n\nexport default InfoCard;\n"],"names":["InfoCard","React","forwardRef","icon","total","label","linkLabel","onClick","height","props","forwardedRef","isLinkHovered","setIsLinkHovered","useState","handleLinkClick","e","createElement","S","_extends","ref","onMouseEnter","onMouseLeave","$isHovered","propTypes","process","env","NODE_ENV","PropTypes","element","isRequired","number","string","func"],"mappings":";;;;;AA0BMA,MAAAA,QAAQ,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,QAAQA,CACjD;EAAEG,IAAI;EAAEC,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC,OAAO;EAAEC,MAAM;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAC5DC,YAAY,EACZ;EACA,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAEzD,EAAA,MAAMC,eAAe,GAAGC,CAAC,IAAIR,OAAO,CAACQ,CAAC,CAAC,CAAA;EAEvC,OACEd,cAAA,CAAAe,aAAA,CAACC,SAAW,EAAAC,QAAA,CAAA;AAACV,IAAAA,MAAM,EAAEA,MAAO;AAACW,IAAAA,GAAG,EAAET,YAAAA;AAAa,GAAA,EAAKD,KAAK,CAAA,EACvDR,cAAA,CAAAe,aAAA,CAACC,gBAAkB,EAAA,IAAA,EACjBhB,cAAA,CAAAe,aAAA,CAACC,kBAAoB,EAAA,IAAA,EACnBhB,cAAA,CAAAe,aAAA,CAACC,aAAe,EAAA,IAAA,EAAEd,IAAsB,CAAC,EACzCF,cAAA,CAAAe,aAAA,CAACC,KAAO,EAAA,IAAA,EAAEb,KAAe,CACL,CAAC,EACvBH,cAAA,CAAAe,aAAA,CAACC,KAAO,EAAEZ,IAAAA,EAAAA,KAAe,CACP,CAAC,EACpBC,SAAS,IAAIC,OAAO,IACnBN,cAAA,CAAAe,aAAA,CAACC,IAAM,EAAA;AACLV,IAAAA,OAAO,EAAEO,eAAgB;AACzBM,IAAAA,YAAY,EAAEA,MAAMR,gBAAgB,CAAC,IAAI,CAAE;AAC3CS,IAAAA,YAAY,EAAEA,MAAMT,gBAAgB,CAAC,KAAK,CAAA;AAAE,GAAA,EAE5CX,cAAA,CAAAe,aAAA,CAACC,UAAY,EAAA;AAACK,IAAAA,UAAU,EAAEX,aAAAA;GAAgBL,EAAAA,SAAwB,CAAC,EACnEL,cAAA,CAAAe,aAAA,CAACC,eAAiB,EAAA;AAACK,IAAAA,UAAU,EAAEX,aAAAA;GAAgB,CACzC,CAEC,CAAC,CAAA;AAElB,CAAC,EAAC;AAEFX,QAAQ,CAACuB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AACnBvB,EAAAA,IAAI,EAAEwB,SAAS,CAACC,OAAO,CAACC,UAAU;AAClCzB,EAAAA,KAAK,EAAEuB,SAAS,CAACG,MAAM,CAACD,UAAU;AAClCxB,EAAAA,KAAK,EAAEsB,SAAS,CAACI,MAAM,CAACF,UAAU;EAClCvB,SAAS,EAAEqB,SAAS,CAACI,MAAM;EAC3BxB,OAAO,EAAEoB,SAAS,CAACK,IAAI;EACvBxB,MAAM,EAAEmB,SAAS,CAACG,MAAAA;AACpB,CAAC,GAAA,EAAA;;;;"}
+{"version":3,"file":"InfoCard.js","sources":["../../../src/components/widgets/InfoCard/InfoCard.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport * as S from './InfoCard.styled';\n\ntype InfoCardOwnProps = {\n  icon: React.ReactElement<any>;\n  total: number;\n  label: string;\n  linkLabel?: string;\n  onClick?: (...args: any[]) => any;\n  height?: number;\n};\n\n/*\n * NMB-3998 §C.2: `props` is spread onto `S.Container`, 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 InfoCardOwnProps`);\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.Container>, keyof InfoCardOwnProps> &\n  InfoCardOwnProps;\n\n/**\n * Info Card\n *\n * ### Import\n *\n * ``` js\n * import { InfoCard } from '@ntbjs/react-components/widgets'\n * // or\n * import InfoCard from '@ntbjs/react-components/widgets/InfoCard'\n * ```\n *\n * ### Props\n * ```\n * Pass `icon={<svg></svg>}` to display an icon.\n * Pass `total={100}` to display number.\n * Pass `label={\"this is a label\"}` to display a label.\n * Pass `linkLabel={\"this is a label\"}` to display a link next to the arrow icon.\n * Pass `height={50}` to adjust the card´s height.\n * Pass `onClick={function}` to handle click event.\n * ```\n */\n\nconst InfoCard = React.forwardRef<any, Props>(function InfoCard(\n  { icon, total, label, linkLabel, onClick, height, ...props },\n  forwardedRef\n) {\n  const [isLinkHovered, setIsLinkHovered] = useState(false);\n\n  const handleLinkClick = e => onClick(e);\n\n  return (\n    <S.Container height={height} ref={forwardedRef} {...props}>\n      <S.MetricsContainer>\n        <S.IconTotalContainer>\n          <S.IconContainer>{icon}</S.IconContainer>\n          <S.Total>{total}</S.Total>\n        </S.IconTotalContainer>\n        <S.Label>{label}</S.Label>\n      </S.MetricsContainer>\n      {linkLabel && onClick && (\n        <S.Link\n          onClick={handleLinkClick}\n          onMouseEnter={() => setIsLinkHovered(true)}\n          onMouseLeave={() => setIsLinkHovered(false)}\n        >\n          <S.ButtonLink $isHovered={isLinkHovered}>{linkLabel}</S.ButtonLink>\n          <S.StyledArrowIcon $isHovered={isLinkHovered} />\n        </S.Link>\n      )}\n    </S.Container>\n  );\n});\n\nexport default InfoCard;\n"],"names":["InfoCard","React","forwardRef","icon","total","label","linkLabel","onClick","height","props","forwardedRef","isLinkHovered","setIsLinkHovered","useState","handleLinkClick","e","_jsxs","S","ref","children","_jsx","onMouseEnter","onMouseLeave","$isHovered"],"mappings":";;;;AA4CA,MAAMA,QAAQ,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,QAAQA,CAC7D;EAAEG,IAAI;EAAEC,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC,OAAO;EAAEC,MAAM;EAAE,GAAGC;AAAM,CAAC,EAC5DC,YAAY,EACZ;EACA,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;AAEzD,EAAA,MAAMC,eAAe,GAAGC,CAAC,IAAIR,OAAO,CAACQ,CAAC,CAAC;AAEvC,EAAA,OACEC,IAAA,CAACC,SAAW,EAAA;AAACT,IAAAA,MAAM,EAAEA,MAAO;AAACU,IAAAA,GAAG,EAAER,YAAa;AAAA,IAAA,GAAKD,KAAK;AAAAU,IAAAA,QAAA,EAAA,CACvDH,IAAA,CAACC,gBAAkB,EAAA;AAAAE,MAAAA,QAAA,EAAA,CACjBH,IAAA,CAACC,kBAAoB,EAAA;AAAAE,QAAAA,QAAA,EAAA,CACnBC,GAAA,CAACH,aAAe,EAAA;AAAAE,UAAAA,QAAA,EAAEhB;AAAI,SAAkB,CAAC,EACzCiB,GAAA,CAACH,KAAO,EAAA;AAAAE,UAAAA,QAAA,EAAEf;AAAK,SAAU,CAAC;AAAA,OACN,CAAC,EACvBgB,GAAA,CAACH,KAAO,EAAA;AAAAE,QAAAA,QAAA,EAAEd;AAAK,OAAU,CAAC;KACR,CAAC,EACpBC,SAAS,IAAIC,OAAO,IACnBS,IAAA,CAACC,IAAM,EAAA;AACLV,MAAAA,OAAO,EAAEO,eAAgB;AACzBO,MAAAA,YAAY,EAAEA,MAAMT,gBAAgB,CAAC,IAAI,CAAE;AAC3CU,MAAAA,YAAY,EAAEA,MAAMV,gBAAgB,CAAC,KAAK,CAAE;AAAAO,MAAAA,QAAA,EAAA,CAE5CC,GAAA,CAACH,UAAY,EAAA;AAACM,QAAAA,UAAU,EAAEZ,aAAc;AAAAQ,QAAAA,QAAA,EAAEb;AAAS,OAAe,CAAC,EACnEc,GAAA,CAACH,eAAiB,EAAA;AAACM,QAAAA,UAAU,EAAEZ;AAAc,OAAE,CAAC;AAAA,KAC1C,CACT;AAAA,GACU,CAAC;AAElB,CAAC;;;;"}

package/build/widgets/InfoCard/InfoCard.styled.js

@@ -8,106 +8,58 @@ const shouldForwardProp = prop => {
 };
 const Container = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-size: 1rem;
-  font-weight: 500;
-  ${props => props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('gray-50'))};
-  height: ${props => props.height ? `${props.height}px` : '50px'};
-  border-radius: 3px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 5px 0;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "InfoCardstyled__Container",
+  componentId: "sc-gnifwb-0"
+})(["font-family:", ";font-size:1rem;font-weight:500;", ";height:", ";border-radius:3px;display:flex;flex-direction:row;align-items:center;padding:5px 0;"], props => props.theme.primaryFontFamily, props => props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('gray-50')), props => props.height ? `${props.height}px` : '50px');
 const MetricsContainer = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  width: 70%;
-  gap: 5px;
-  padding-left: 15px;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "InfoCardstyled__MetricsContainer",
+  componentId: "sc-gnifwb-1"
+})(["display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:70%;gap:5px;padding-left:15px;"]);
 const IconTotalContainer = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "InfoCardstyled__IconTotalContainer",
+  componentId: "sc-gnifwb-2"
+})(["display:flex;justify-content:center;align-items:center;gap:10px;"]);
 const Total = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-size: 1.22rem;
-  font-weight: 700;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "InfoCardstyled__Total",
+  componentId: "sc-gnifwb-3"
+})(["font-size:1.22rem;font-weight:700;", ";"], props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
 const Label = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-size: 0.875rem;
-  font-weight: 400;
-  opacity: 0.8;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-500'))};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "InfoCardstyled__Label",
+  componentId: "sc-gnifwb-4"
+})(["font-size:0.875rem;font-weight:400;opacity:0.8;", ";"], props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-500')));
 const IconContainer = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 18px;
-  margin-top: -0.05rem;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "InfoCardstyled__IconContainer",
+  componentId: "sc-gnifwb-5"
+})(["display:flex;justify-content:center;align-items:center;width:18px;margin-top:-0.05rem;"]);
 const Link = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-size: 0.875rem;
-  font-weight: 400;
-  width: 30%;
-  opacity: 0.7;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-right: 20px;
-  cursor: pointer;
-  height: 100%;
-  gap: 10px;
-  svg {
-    transition: transform 0.2s ease-in-out;
-  }
-  &:hover svg {
-    transform: translateX(2px);
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "InfoCardstyled__Link",
+  componentId: "sc-gnifwb-6"
+})(["font-size:0.875rem;font-weight:400;width:30%;opacity:0.7;display:flex;align-items:center;justify-content:flex-end;margin-right:20px;cursor:pointer;height:100%;gap:10px;svg{transition:transform 0.2s ease-in-out;}&:hover svg{transform:translateX(2px);}"]);
 const ButtonLink = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-size: 0.875rem;
-  font-weight: 500;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  opacity: ${props => props.$isHovered ? 1 : 0.8};
-  transition: color 0.2s ease-in-out;
-  ${props => props.$isHovered ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "InfoCardstyled__ButtonLink",
+  componentId: "sc-gnifwb-7"
+})(["font-size:0.875rem;font-weight:500;height:100%;display:flex;align-items:center;white-space:nowrap;opacity:", ";transition:color 0.2s ease-in-out;", ";"], props => props.$isHovered ? 1 : 0.8, props => props.$isHovered ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
 const StyledArrowIcon = styled(SvgArrowForward).withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  height: 15px;
-  margin-right: 10px;
-  opacity: ${props => props.$isHovered ? 1 : 0.8};
-  transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;
-  transform: ${props => props.$isHovered ? 'translateX(2px)' : 'translateX(0)'};
-
-  ${props => props.$isHovered ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black'))};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "InfoCardstyled__StyledArrowIcon",
+  componentId: "sc-gnifwb-8"
+})(["height:15px;margin-right:10px;opacity:", ";transition:transform 0.2s ease-in-out,fill 0.2s ease-in-out;transform:", ";", ";"], props => props.$isHovered ? 1 : 0.8, props => props.$isHovered ? 'translateX(2px)' : 'translateX(0)', props => props.$isHovered ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')));
 
 export { ButtonLink, Container, IconContainer, IconTotalContainer, Label, Link, MetricsContainer, StyledArrowIcon, Total };
 //# sourceMappingURL=InfoCard.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InfoCard.styled.js","sources":["../../../src/components/widgets/InfoCard/InfoCard.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { ArrowForwardIcon } from '../../../icons';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Container = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 1rem;\n  font-weight: 500;\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-800'),\n      props.theme.getColor('gray-50')\n    )};\n  height: ${props => (props.height ? `${props.height}px` : '50px')};\n  border-radius: 3px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 5px 0;\n`;\n\nexport const MetricsContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  width: 70%;\n  gap: 5px;\n  padding-left: 15px;\n`;\n\nexport const IconTotalContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n`;\nexport const Total = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 1.22rem;\n  font-weight: 700;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )};\n`;\n\nexport const Label = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  font-weight: 400;\n  opacity: 0.8;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-500')\n    )};\n`;\nexport const IconContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 18px;\n  margin-top: -0.05rem;\n`;\n\nexport const Link = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  font-weight: 400;\n  width: 30%;\n  opacity: 0.7;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-right: 20px;\n  cursor: pointer;\n  height: 100%;\n  gap: 10px;\n  svg {\n    transition: transform 0.2s ease-in-out;\n  }\n  &:hover svg {\n    transform: translateX(2px);\n  }\n`;\n\nexport const ButtonLink = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  font-weight: 500;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  opacity: ${props => (props.$isHovered ? 1 : 0.8)};\n  transition: color 0.2s ease-in-out;\n  ${props =>\n    props.$isHovered\n      ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))\n      : props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-100'),\n          props.theme.getColor('gray-900')\n        )};\n`;\n\nexport const StyledArrowIcon = styled(ArrowForwardIcon)\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  height: 15px;\n  margin-right: 10px;\n  opacity: ${props => (props.$isHovered ? 1 : 0.8)};\n  transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;\n  transform: ${props => (props.$isHovered ? 'translateX(2px)' : 'translateX(0)')};\n\n  ${props =>\n    props.$isHovered\n      ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black'))\n      : props.theme.themeProp(\n          'fill',\n          props.theme.getColor('white'),\n          props.theme.getColor('black')\n        )};\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Container","styled","div","withConfig","attrs","applyDefaultTheme","props","theme","primaryFontFamily","themeProp","getColor","height","MetricsContainer","IconTotalContainer","Total","Label","IconContainer","Link","ButtonLink","$isHovered","StyledArrowIcon","ArrowForwardIcon"],"mappings":"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"}
+{"version":3,"file":"InfoCard.styled.js","sources":["../../../src/components/widgets/InfoCard/InfoCard.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 from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { ArrowForwardIcon } from '../../../icons';\n\n/**\n * `height` — `PropTypes.number`, px, interpolated as `${props.height}px` with a `50px`\n * fallback. `number` and not `number | string`: a string here would already render\n * `height: 60pxpx`.\n *\n * NO `$`, AND THAT IS A DEFECT THAT IS ALREADY IN THE RENDER BASELINE. `height` is not a\n * member of `HTMLAttributes<HTMLDivElement>` (which is why the read needs this\n * declaration at all) but React DOES recognise it and renders it, so `widgets/InfoCard`\n * in `scripts/r19-harness/baseline.json` opens with `<div height=\"60\" class=\"…\">`.\n * Renaming it `$height` removes that attribute and therefore MOVES the baseline — C10\n * work, §E.4.\n */\nexport interface InfoCardContainerStyleProps {\n  height?: number;\n}\n\n/**\n * `$isHovered` — the `Link`'s hover state, held in `InfoCard.tsx`'s `useState`, so\n * genuinely `boolean` and not derived from any prop.\n *\n * NOT COVERABLE BY THE RENDER GATE, and the fixture says so: it comes from `useState`, so\n * it is `false` in every static render whatever props are passed. Both of its hosts\n * therefore have rule blocks the baseline can never exercise — which is exactly why the\n * type matters here more than it would on a prop a fixture pins.\n *\n * Hosts: `ButtonLink` and `StyledArrowIcon`.\n */\ninterface InfoCardHoverStyleProps {\n  $isHovered?: 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 Container = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<InfoCardContainerStyleProps>(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 1rem;\n  font-weight: 500;\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-800'),\n      props.theme.getColor('gray-50')\n    )};\n  height: ${props => (props.height ? `${props.height}px` : '50px')};\n  border-radius: 3px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 5px 0;\n`;\n\nexport const MetricsContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  width: 70%;\n  gap: 5px;\n  padding-left: 15px;\n`;\n\nexport const IconTotalContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n`;\nexport const Total = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 1.22rem;\n  font-weight: 700;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )};\n`;\n\nexport const Label = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  font-weight: 400;\n  opacity: 0.8;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-500')\n    )};\n`;\nexport const IconContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 18px;\n  margin-top: -0.05rem;\n`;\n\nexport const Link = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  font-weight: 400;\n  width: 30%;\n  opacity: 0.7;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-right: 20px;\n  cursor: pointer;\n  height: 100%;\n  gap: 10px;\n  svg {\n    transition: transform 0.2s ease-in-out;\n  }\n  &:hover svg {\n    transform: translateX(2px);\n  }\n`;\n\nexport const ButtonLink = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<InfoCardHoverStyleProps>(applyDefaultTheme)`\n  font-size: 0.875rem;\n  font-weight: 500;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  opacity: ${props => (props.$isHovered ? 1 : 0.8)};\n  transition: color 0.2s ease-in-out;\n  ${props =>\n    props.$isHovered\n      ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))\n      : props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-100'),\n          props.theme.getColor('gray-900')\n        )};\n`;\n\nexport const StyledArrowIcon = styled(ArrowForwardIcon)\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<InfoCardHoverStyleProps>(applyDefaultTheme)`\n  height: 15px;\n  margin-right: 10px;\n  opacity: ${props => (props.$isHovered ? 1 : 0.8)};\n  transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;\n  transform: ${props => (props.$isHovered ? 'translateX(2px)' : 'translateX(0)')};\n\n  ${props =>\n    props.$isHovered\n      ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black'))\n      : props.theme.themeProp(\n          'fill',\n          props.theme.getColor('white'),\n          props.theme.getColor('black')\n        )};\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Container","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","theme","primaryFontFamily","themeProp","getColor","height","MetricsContainer","IconTotalContainer","Total","Label","IconContainer","Link","ButtonLink","$isHovered","StyledArrowIcon","ArrowForwardIcon"],"mappings":"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"}

package/build/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.js

@@ -1,8 +1,7 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import SeverityBadge from '../../data/SeverityBadge/SeverityBadge.js';
 import { InstructionText, Card, ThumbnailWrapper, ThumbnailImage, ContentWrapper } from './InstructionSeverityDisplay.styled.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 const defaultLabels = {
   1: 'Info',
@@ -33,45 +32,40 @@ const InstructionSeverityDisplay = React__default.forwardRef(function Instructio
   const effectiveSeverity = severity ?? 1;
   const displayLabel = severityLabel || labels && labels[effectiveSeverity] || defaultLabels[effectiveSeverity];
   const hasThumbnail = thumbnail !== undefined;
-  const content = React__default.createElement(React__default.Fragment, null, React__default.createElement(SeverityBadge, {
-    severity: severity,
-    label: displayLabel,
-    icon: icon,
-    fontSize: badgeFontSize ? parseFloat(badgeFontSize) : undefined
-  }), React__default.createElement(InstructionText, {
-    $fontSize: detailsFontSize,
-    $maxLines: maxLines
-  }, maxLines ? React__default.createElement("span", {
-    title: instructionText
-  }, instructionText) : instructionText));
-  return React__default.createElement(Card, _extends({
+  const content = jsxs(Fragment, {
+    children: [jsx(SeverityBadge, {
+      severity: severity,
+      label: displayLabel,
+      icon: icon,
+      fontSize: badgeFontSize ? parseFloat(badgeFontSize) : undefined
+    }), jsx(InstructionText, {
+      $fontSize: detailsFontSize,
+      $maxLines: maxLines,
+      children: maxLines ? jsx("span", {
+        title: instructionText,
+        children: instructionText
+      }) : instructionText
+    })]
+  });
+  return jsxs(Card, {
     ref: forwardedRef,
     $severity: severity,
     $showCard: showCard,
     $padding: padding,
     $bgLight: bgLight,
     $bgDark: bgDark,
-    $hasThumbnail: hasThumbnail
-  }, props), hasThumbnail && React__default.createElement(ThumbnailWrapper, null, thumbnail && React__default.createElement(ThumbnailImage, {
-    src: thumbnail,
-    alt: ""
-  })), hasThumbnail ? React__default.createElement(ContentWrapper, null, content) : content);
+    $hasThumbnail: hasThumbnail,
+    ...props,
+    children: [hasThumbnail && jsx(ThumbnailWrapper, {
+      children: thumbnail && jsx(ThumbnailImage, {
+        src: thumbnail,
+        alt: ""
+      })
+    }), hasThumbnail ? jsx(ContentWrapper, {
+      children: content
+    }) : content]
+  });
 });
-InstructionSeverityDisplay.propTypes = process.env.NODE_ENV !== "production" ? {
-  severity: PropTypes.oneOf([1, 2, 3, 4, 5]),
-  instructionText: PropTypes.string,
-  severityLabel: PropTypes.string,
-  labels: PropTypes.objectOf(PropTypes.string),
-  icon: PropTypes.element,
-  showCard: PropTypes.bool,
-  padding: PropTypes.string,
-  badgeFontSize: PropTypes.string,
-  detailsFontSize: PropTypes.string,
-  bgLight: PropTypes.string,
-  bgDark: PropTypes.string,
-  maxLines: PropTypes.number,
-  thumbnail: PropTypes.string
-} : {};
 
 export { InstructionSeverityDisplay as default };
 //# sourceMappingURL=InstructionSeverityDisplay.js.map