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

package/build/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"InstructionSeverityDisplay.js","sources":["../../../src/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport SeverityBadge from '../../data/SeverityBadge/SeverityBadge';\nimport * as S from './InstructionSeverityDisplay.styled';\n\nconst defaultLabels = {\n  1: 'Info',\n  2: 'Info',\n  3: 'Limited use',\n  4: 'Limited use',\n  5: 'Highly restricted'\n};\n\n/**\n * InstructionSeverityDisplay communicates the usage restrictions or\n * severity levels associated with a specific instruction or asset.\n *\n * ### Import\n *\n * ``` js\n * import { InstructionSeverityDisplay } from '@ntbjs/react-components/widgets'\n * // or\n * import InstructionSeverityDisplay from '@ntbjs/react-components/widgets/InstructionSeverityDisplay'\n * ```\n */\nconst InstructionSeverityDisplay = React.forwardRef(function InstructionSeverityDisplay(\n  {\n    severity,\n    instructionText,\n    severityLabel,\n    labels,\n    icon,\n    showCard = true,\n    padding,\n    badgeFontSize,\n    detailsFontSize,\n    bgLight,\n    bgDark,\n    maxLines,\n    thumbnail,\n    ...props\n  },\n  forwardedRef\n) {\n  if (!instructionText) {\n    return null;\n  }\n\n  const effectiveSeverity = severity ?? 1;\n  const displayLabel =\n    severityLabel || (labels && labels[effectiveSeverity]) || defaultLabels[effectiveSeverity];\n\n  const hasThumbnail = thumbnail !== undefined;\n\n  const content = (\n    <>\n      <SeverityBadge\n        severity={severity}\n        label={displayLabel}\n        icon={icon}\n        fontSize={badgeFontSize ? parseFloat(badgeFontSize) : undefined}\n      />\n      <S.InstructionText $fontSize={detailsFontSize} $maxLines={maxLines}>\n        {maxLines ? <span title={instructionText}>{instructionText}</span> : instructionText}\n      </S.InstructionText>\n    </>\n  );\n\n  return (\n    <S.Card\n      ref={forwardedRef}\n      $severity={severity}\n      $showCard={showCard}\n      $padding={padding}\n      $bgLight={bgLight}\n      $bgDark={bgDark}\n      $hasThumbnail={hasThumbnail}\n      {...props}\n    >\n      {hasThumbnail && (\n        <S.ThumbnailWrapper>\n          {thumbnail && <S.ThumbnailImage src={thumbnail} alt=\"\" />}\n        </S.ThumbnailWrapper>\n      )}\n      {hasThumbnail ? <S.ContentWrapper>{content}</S.ContentWrapper> : content}\n    </S.Card>\n  );\n});\n\nInstructionSeverityDisplay.propTypes = {\n  /** Severity level (1-5). 1=Info, 3=Limited use, 5=Highly restricted. */\n  severity: PropTypes.oneOf([1, 2, 3, 4, 5]),\n  /** The instruction text to display. Component returns null if empty. */\n  instructionText: PropTypes.string,\n  /** Override the default badge label for the severity level. */\n  severityLabel: PropTypes.string,\n  /** Map of severity level to translated label string, e.g. { 1: 'Info', 3: 'Begrenset bruk', 5: 'Svært begrenset' }. */\n  labels: PropTypes.objectOf(PropTypes.string),\n  /** Override the default icon element. */\n  icon: PropTypes.element,\n  /** Whether to show card styling (border-radius, shadow, border). Defaults to true. */\n  showCard: PropTypes.bool,\n  /** Custom card padding, e.g. \"8px 6px\" or \"20px\". Defaults to \"14px 10px\". */\n  padding: PropTypes.string,\n  /** Custom font size for the badge text, e.g. \"10px\" or \"0.75rem\". Defaults to \"12px\". */\n  badgeFontSize: PropTypes.string,\n  /** Custom font size for the details/instruction text, e.g. \"12px\" or \"0.875rem\". Defaults to \"14px\". */\n  detailsFontSize: PropTypes.string,\n  /** Override card background color in light mode, e.g. \"#ffffff\" or \"transparent\". */\n  bgLight: PropTypes.string,\n  /** Override card background color in dark mode, e.g. \"#1a1a1a\" or \"transparent\". */\n  bgDark: PropTypes.string,\n  /** Max number of lines for instruction text before clamping with ellipsis. */\n  maxLines: PropTypes.number,\n  /** URL of a thumbnail image to display on the left side of the card. Pass null to show a placeholder. Omit to show no thumbnail. */\n  thumbnail: PropTypes.string\n};\n\nexport default InstructionSeverityDisplay;\n"],"names":["defaultLabels","InstructionSeverityDisplay","React","forwardRef","severity","instructionText","severityLabel","labels","icon","showCard","padding","badgeFontSize","detailsFontSize","bgLight","bgDark","maxLines","thumbnail","props","forwardedRef","effectiveSeverity","displayLabel","hasThumbnail","undefined","content","createElement","Fragment","SeverityBadge","label","fontSize","parseFloat","S","$fontSize","$maxLines","title","_extends","ref","$severity","$showCard","$padding","$bgLight","$bgDark","$hasThumbnail","src","alt","propTypes","process","env","NODE_ENV","PropTypes","oneOf","string","objectOf","element","bool","number"],"mappings":"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"}
+{"version":3,"file":"InstructionSeverityDisplay.js","sources":["../../../src/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.tsx"],"sourcesContent":["import React from 'react';\nimport SeverityBadge from '../../data/SeverityBadge/SeverityBadge';\nimport * as S from './InstructionSeverityDisplay.styled';\n\nconst defaultLabels = {\n  1: 'Info',\n  2: 'Info',\n  3: 'Limited use',\n  4: 'Limited use',\n  5: 'Highly restricted'\n};\n\ntype InstructionSeverityDisplayOwnProps = {\n  /** Severity level (1-5). 1=Info, 3=Limited use, 5=Highly restricted. */\n  severity?: 1 | 2 | 3 | 4 | 5;\n  /** The instruction text to display. Component returns null if empty. */\n  instructionText?: string;\n  /** Override the default badge label for the severity level. */\n  severityLabel?: string;\n  /** Map of severity level to translated label string, e.g. { 1: 'Info', 3: 'Begrenset bruk', 5: 'Svært begrenset' }. */\n  labels?: {\n    [key: string]: string;\n  };\n  /** Override the default icon element. */\n  icon?: React.ReactElement<any>;\n  /** Whether to show card styling (border-radius, shadow, border). Defaults to true. */\n  showCard?: boolean;\n  /** Custom card padding, e.g. \"8px 6px\" or \"20px\". Defaults to \"14px 10px\". */\n  padding?: string;\n  /** Custom font size for the badge text, e.g. \"10px\" or \"0.75rem\". Defaults to \"12px\". */\n  badgeFontSize?: string;\n  /** Custom font size for the details/instruction text, e.g. \"12px\" or \"0.875rem\". Defaults to \"14px\". */\n  detailsFontSize?: string;\n  /** Override card background color in light mode, e.g. \"#ffffff\" or \"transparent\". */\n  bgLight?: string;\n  /** Override card background color in dark mode, e.g. \"#1a1a1a\" or \"transparent\". */\n  bgDark?: string;\n  /** Max number of lines for instruction text before clamping with ellipsis. */\n  maxLines?: number;\n  /** URL of a thumbnail image to display on the left side of the card. Pass null to show a placeholder. Omit to show no thumbnail. */\n  thumbnail?: string;\n};\n\n/*\n * NMB-3998 §C.2: `props` is spread onto `S.Card`, 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 InstructionSeverityDisplayOwnProps`);\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.Card>,\n  keyof InstructionSeverityDisplayOwnProps\n> &\n  InstructionSeverityDisplayOwnProps;\n\n/**\n * InstructionSeverityDisplay communicates the usage restrictions or\n * severity levels associated with a specific instruction or asset.\n *\n * ### Import\n *\n * ``` js\n * import { InstructionSeverityDisplay } from '@ntbjs/react-components/widgets'\n * // or\n * import InstructionSeverityDisplay from '@ntbjs/react-components/widgets/InstructionSeverityDisplay'\n * ```\n */\nconst InstructionSeverityDisplay = React.forwardRef<any, Props>(function InstructionSeverityDisplay(\n  {\n    severity,\n    instructionText,\n    severityLabel,\n    labels,\n    icon,\n    showCard = true,\n    padding,\n    badgeFontSize,\n    detailsFontSize,\n    bgLight,\n    bgDark,\n    maxLines,\n    thumbnail,\n    ...props\n  },\n  forwardedRef\n) {\n  if (!instructionText) {\n    return null;\n  }\n\n  const effectiveSeverity = severity ?? 1;\n  const displayLabel =\n    severityLabel || (labels && labels[effectiveSeverity]) || defaultLabels[effectiveSeverity];\n\n  const hasThumbnail = thumbnail !== undefined;\n\n  const content = (\n    <>\n      <SeverityBadge\n        severity={severity}\n        label={displayLabel}\n        icon={icon}\n        fontSize={badgeFontSize ? parseFloat(badgeFontSize) : undefined}\n      />\n      <S.InstructionText $fontSize={detailsFontSize} $maxLines={maxLines}>\n        {maxLines ? <span title={instructionText}>{instructionText}</span> : instructionText}\n      </S.InstructionText>\n    </>\n  );\n\n  return (\n    <S.Card\n      ref={forwardedRef}\n      $severity={severity}\n      $showCard={showCard}\n      $padding={padding}\n      $bgLight={bgLight}\n      $bgDark={bgDark}\n      $hasThumbnail={hasThumbnail}\n      {...props}\n    >\n      {hasThumbnail && (\n        <S.ThumbnailWrapper>\n          {thumbnail && <S.ThumbnailImage src={thumbnail} alt=\"\" />}\n        </S.ThumbnailWrapper>\n      )}\n      {hasThumbnail ? <S.ContentWrapper>{content}</S.ContentWrapper> : content}\n    </S.Card>\n  );\n});\n\nexport default InstructionSeverityDisplay;\n"],"names":["defaultLabels","InstructionSeverityDisplay","React","forwardRef","severity","instructionText","severityLabel","labels","icon","showCard","padding","badgeFontSize","detailsFontSize","bgLight","bgDark","maxLines","thumbnail","props","forwardedRef","effectiveSeverity","displayLabel","hasThumbnail","undefined","content","_jsxs","_Fragment","children","_jsx","SeverityBadge","label","fontSize","parseFloat","S","$fontSize","$maxLines","title","ref","$severity","$showCard","$padding","$bgLight","$bgDark","$hasThumbnail","src","alt"],"mappings":";;;;;AAIA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAAC,EAAE,MAAM;AACT,EAAA,CAAC,EAAE,MAAM;AACT,EAAA,CAAC,EAAE,aAAa;AAChB,EAAA,CAAC,EAAE,aAAa;AAChB,EAAA,CAAC,EAAE;AACL,CAAC;AA0DD,MAAMC,0BAA0B,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,0BAA0BA,CACjG;EACEG,QAAQ;EACRC,eAAe;EACfC,aAAa;EACbC,MAAM;EACNC,IAAI;AACJC,EAAAA,QAAQ,GAAG,IAAI;EACfC,OAAO;EACPC,aAAa;EACbC,eAAe;EACfC,OAAO;EACPC,MAAM;EACNC,QAAQ;EACRC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,IAAI,CAACb,eAAe,EAAE;AACpB,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,MAAMc,iBAAiB,GAAGf,QAAQ,IAAI,CAAC;AACvC,EAAA,MAAMgB,YAAY,GAChBd,aAAa,IAAKC,MAAM,IAAIA,MAAM,CAACY,iBAAiB,CAAE,IAAInB,aAAa,CAACmB,iBAAiB,CAAC;AAE5F,EAAA,MAAME,YAAY,GAAGL,SAAS,KAAKM,SAAS;AAE5C,EAAA,MAAMC,OAAO,GACXC,IAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EAAA,CACEC,GAAA,CAACC,aAAa,EAAA;AACZxB,MAAAA,QAAQ,EAAEA,QAAS;AACnByB,MAAAA,KAAK,EAAET,YAAa;AACpBZ,MAAAA,IAAI,EAAEA,IAAK;AACXsB,MAAAA,QAAQ,EAAEnB,aAAa,GAAGoB,UAAU,CAACpB,aAAa,CAAC,GAAGW;AAAU,KACjE,CAAC,EACFK,GAAA,CAACK,eAAiB,EAAA;AAACC,MAAAA,SAAS,EAAErB,eAAgB;AAACsB,MAAAA,SAAS,EAAEnB,QAAS;MAAAW,QAAA,EAChEX,QAAQ,GAAGY,GAAA,CAAA,MAAA,EAAA;AAAMQ,QAAAA,KAAK,EAAE9B,eAAgB;AAAAqB,QAAAA,QAAA,EAAErB;AAAe,OAAO,CAAC,GAAGA;AAAe,KACnE,CAAC;AAAA,GACpB,CACH;AAED,EAAA,OACEmB,IAAA,CAACQ,IAAM,EAAA;AACLI,IAAAA,GAAG,EAAElB,YAAa;AAClBmB,IAAAA,SAAS,EAAEjC,QAAS;AACpBkC,IAAAA,SAAS,EAAE7B,QAAS;AACpB8B,IAAAA,QAAQ,EAAE7B,OAAQ;AAClB8B,IAAAA,QAAQ,EAAE3B,OAAQ;AAClB4B,IAAAA,OAAO,EAAE3B,MAAO;AAChB4B,IAAAA,aAAa,EAAErB,YAAa;AAAA,IAAA,GACxBJ,KAAK;AAAAS,IAAAA,QAAA,GAERL,YAAY,IACXM,GAAA,CAACK,gBAAkB,EAAA;AAAAN,MAAAA,QAAA,EAChBV,SAAS,IAAIW,GAAA,CAACK,cAAgB,EAAA;AAACW,QAAAA,GAAG,EAAE3B,SAAU;AAAC4B,QAAAA,GAAG,EAAC;OAAI;KACtC,CACrB,EACAvB,YAAY,GAAGM,GAAA,CAACK,cAAgB,EAAA;AAAAN,MAAAA,QAAA,EAAEH;KAA0B,CAAC,GAAGA,OAAO;AAAA,GAClE,CAAC;AAEb,CAAC;;;;"}

package/build/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.styled.js

@@ -6,75 +6,39 @@ const shouldForwardProp = prop => {
 };
 const Card = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  flex-direction: ${props => props.$hasThumbnail ? 'row' : 'column'};
-  gap: ${props => props.$hasThumbnail ? '12px' : '8px'};
-  align-items: flex-start;
-  padding: ${props => props.$padding || '14px 10px'};
-  ${props => {
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "InstructionSeverityDisplaystyled__Card",
+  componentId: "sc-coel0g-0"
+})(["display:flex;flex-direction:", ";gap:", ";align-items:flex-start;padding:", ";", " ", " ", ""], props => props.$hasThumbnail ? 'row' : 'column', props => props.$hasThumbnail ? '12px' : '8px', props => props.$padding || '14px 10px', props => {
   if (props.$bgDark || props.$bgLight) {
     return props.theme.themeProp('background', props.$bgDark || props.theme.getColor('gray-900'), props.$bgLight || props.theme.getColor('gray-200'));
   }
   return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200'));
-}}
-
-  ${props => props.$showCard && css`
-      border-radius: 10px;
-      box-shadow: 0px 0px 26px #0000001a;
-    `}
-
-  ${props => props.$severity === 5 && props.$showCard && css`
-      outline-offset: -1px;
-      ${props.theme.themeProp('outline', '1px solid #7f1d1d', '1px solid #dc2626')}
-    `}
-`;
+}, props => props.$showCard && css(["border-radius:10px;box-shadow:0px 0px 26px #0000001a;"]), props => props.$severity === 5 && props.$showCard && css(["outline-offset:-1px;", ""], props.theme.themeProp('outline', '1px solid #7f1d1d', '1px solid #dc2626')));
 const ThumbnailWrapper = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  flex-shrink: 0;
-  width: 56px;
-  height: 56px;
-  border-radius: 6px;
-  overflow: hidden;
-  ${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200'))}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "InstructionSeverityDisplaystyled__ThumbnailWrapper",
+  componentId: "sc-coel0g-1"
+})(["flex-shrink:0;width:56px;height:56px;border-radius:6px;overflow:hidden;", ""], props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')));
 const ThumbnailImage = styled.img.withConfig({
   shouldForwardProp
-})`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-`;
+}).withConfig({
+  displayName: "InstructionSeverityDisplaystyled__ThumbnailImage",
+  componentId: "sc-coel0g-2"
+})(["width:100%;height:100%;object-fit:cover;display:block;"]);
 const ContentWrapper = styled.div.withConfig({
   shouldForwardProp
-})`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: flex-start;
-  flex: 1;
-  min-width: 0;
-`;
+}).withConfig({
+  displayName: "InstructionSeverityDisplaystyled__ContentWrapper",
+  componentId: "sc-coel0g-3"
+})(["display:flex;flex-direction:column;gap:8px;align-items:flex-start;flex:1;min-width:0;"]);
 const InstructionText = styled.p.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-size: ${props => props.$fontSize || '14px'};
-  font-weight: 400;
-  line-height: 1.286em;
-  margin: 0;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}
-
-  ${props => props.$maxLines && css`
-      display: -webkit-box;
-      -webkit-line-clamp: ${props.$maxLines};
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    `}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "InstructionSeverityDisplaystyled__InstructionText",
+  componentId: "sc-coel0g-4"
+})(["font-size:", ";font-weight:400;line-height:1.286em;margin:0;overflow-wrap:break-word;word-break:break-word;", " ", ""], props => props.$fontSize || '14px', props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black')), props => props.$maxLines && css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], props.$maxLines));
 
 export { Card, ContentWrapper, InstructionText, ThumbnailImage, ThumbnailWrapper };
 //# sourceMappingURL=InstructionSeverityDisplay.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InstructionSeverityDisplay.styled.js","sources":["../../../src/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.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 Card = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  flex-direction: ${props => (props.$hasThumbnail ? 'row' : 'column')};\n  gap: ${props => (props.$hasThumbnail ? '12px' : '8px')};\n  align-items: flex-start;\n  padding: ${props => props.$padding || '14px 10px'};\n  ${props => {\n    if (props.$bgDark || props.$bgLight) {\n      return props.theme.themeProp(\n        'background',\n        props.$bgDark || props.theme.getColor('gray-900'),\n        props.$bgLight || props.theme.getColor('gray-200')\n      );\n    }\n    return props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('gray-200')\n    );\n  }}\n\n  ${props =>\n    props.$showCard &&\n    css`\n      border-radius: 10px;\n      box-shadow: 0px 0px 26px #0000001a;\n    `}\n\n  ${props =>\n    props.$severity === 5 &&\n    props.$showCard &&\n    css`\n      outline-offset: -1px;\n      ${props.theme.themeProp('outline', '1px solid #7f1d1d', '1px solid #dc2626')}\n    `}\n`;\n\nexport const ThumbnailWrapper = styled.div\n  .withConfig({ shouldForwardProp })\n  .attrs(applyDefaultTheme)`\n  flex-shrink: 0;\n  width: 56px;\n  height: 56px;\n  border-radius: 6px;\n  overflow: hidden;\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-700'),\n      props.theme.getColor('gray-200')\n    )}\n`;\n\nexport const ThumbnailImage = styled.img.withConfig({ shouldForwardProp })`\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n`;\n\nexport const ContentWrapper = styled.div.withConfig({ shouldForwardProp })`\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n  flex: 1;\n  min-width: 0;\n`;\n\nexport const InstructionText = styled.p\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: ${props => props.$fontSize || '14px'};\n  font-weight: 400;\n  line-height: 1.286em;\n  margin: 0;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  ${props =>\n    props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}\n\n  ${props =>\n    props.$maxLines &&\n    css`\n      display: -webkit-box;\n      -webkit-line-clamp: ${props.$maxLines};\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    `}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Card","styled","div","withConfig","attrs","applyDefaultTheme","props","$hasThumbnail","$padding","$bgDark","$bgLight","theme","themeProp","getColor","$showCard","css","$severity","ThumbnailWrapper","ThumbnailImage","img","ContentWrapper","InstructionText","p","$fontSize","$maxLines"],"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,IAAI,GAAGC,MAAM,CAACC,GAAG,CAC3BC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA,kBAAoBC,EAAAA,KAAK,IAAKA,KAAK,CAACC,aAAa,GAAG,KAAK,GAAG,QAAS,CAAA;AACrE,OAASD,EAAAA,KAAK,IAAKA,KAAK,CAACC,aAAa,GAAG,MAAM,GAAG,KAAM,CAAA;AACxD;AACA,WAAA,EAAaD,KAAK,IAAIA,KAAK,CAACE,QAAQ,IAAI,WAAW,CAAA;AACnD,EAAA,EAAIF,KAAK,IAAI;AACT,EAAA,IAAIA,KAAK,CAACG,OAAO,IAAIH,KAAK,CAACI,QAAQ,EAAE;AACnC,IAAA,OAAOJ,KAAK,CAACK,KAAK,CAACC,SAAS,CAC1B,YAAY,EACZN,KAAK,CAACG,OAAO,IAAIH,KAAK,CAACK,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EACjDP,KAAK,CAACI,QAAQ,IAAIJ,KAAK,CAACK,KAAK,CAACE,QAAQ,CAAC,UAAU,CACnD,CAAC,CAAA;AACH,GAAA;EACA,OAAOP,KAAK,CAACK,KAAK,CAACC,SAAS,CAC1B,YAAY,EACZN,KAAK,CAACK,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCP,KAAK,CAACK,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACH,CAAC,CAAA;AACH;AACA,EAAA,EAAIP,KAAK,IACLA,KAAK,CAACQ,SAAS,IACfC,GAAG,CAAA;AACP;AACA;AACA,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIT,KAAK,IACLA,KAAK,CAACU,SAAS,KAAK,CAAC,IACrBV,KAAK,CAACQ,SAAS,IACfC,GAAG,CAAA;AACP;AACA,MAAQT,EAAAA,KAAK,CAACK,KAAK,CAACC,SAAS,CAAC,SAAS,EAAE,mBAAmB,EAAE,mBAAmB,CAAC,CAAA;AAClF,IAAK,CAAA,CAAA;AACL,EAAC;AAEM,MAAMK,gBAAgB,GAAGhB,MAAM,CAACC,GAAG,CACvCC,UAAU,CAAC;AAAEN,EAAAA,iBAAAA;AAAkB,CAAC,CAAC,CACjCO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA;AACA;AACA,EAAIC,EAAAA,KAAK,IACLA,KAAK,CAACK,KAAK,CAACC,SAAS,CACnB,YAAY,EACZN,KAAK,CAACK,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCP,KAAK,CAACK,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL,EAAC;AAEM,MAAMK,cAAc,GAAGjB,MAAM,CAACkB,GAAG,CAAChB,UAAU,CAAC;AAAEN,EAAAA,iBAAAA;AAAkB,CAAC,CAAC,CAAA;AAC1E;AACA;AACA;AACA;AACA,EAAC;AAEM,MAAMuB,cAAc,GAAGnB,MAAM,CAACC,GAAG,CAACC,UAAU,CAAC;AAAEN,EAAAA,iBAAAA;AAAkB,CAAC,CAAC,CAAA;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AAEM,MAAMwB,eAAe,GAAGpB,MAAM,CAACqB,CAAC,CACpCnB,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B,aAAA,EAAeC,KAAK,IAAIA,KAAK,CAACiB,SAAS,IAAI,MAAM,CAAA;AACjD;AACA;AACA;AACA;AACA;AACA,EAAIjB,EAAAA,KAAK,IACLA,KAAK,CAACK,KAAK,CAACC,SAAS,CAAC,OAAO,EAAEN,KAAK,CAACK,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAAEP,KAAK,CAACK,KAAK,CAACE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAA;AACnG;AACA,EAAA,EAAIP,KAAK,IACLA,KAAK,CAACkB,SAAS,IACfT,GAAG,CAAA;AACP;AACA,0BAA4BT,EAAAA,KAAK,CAACkB,SAAS,CAAA;AAC3C;AACA;AACA,IAAK,CAAA,CAAA;AACL;;;;"}
+{"version":3,"file":"InstructionSeverityDisplay.styled.js","sources":["../../../src/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.styled.ts"],"sourcesContent":["/*\n * $-transient-prop pattern: rules in\n * `src/components/layout/SectionSeparator/SectionSeparator.styled.ts`, derivation\n * and measurements in `scripts/TS-MIGRATION-PLAYBOOK.md` §J.\n *\n * THIS FILE IS THE WORKED EXAMPLE FOR THE TWO CHAIN SHAPES, because it is the only\n * one of the 36 that has both:\n *\n *   Card, ThumbnailWrapper, InstructionText   .withConfig({…}).attrs(…)`…`\n *     → generic goes on `.attrs<P>()`\n *\n *   ThumbnailImage, ContentWrapper            .withConfig({…})`…`   (NO .attrs)\n *     → `.attrs<P>()` does not exist to annotate, and `styled.img<P>.withConfig({…})`\n *       is TS1477. The generic goes on the TAGGED-TEMPLATE CALL instead:\n *       styled.img.withConfig({ shouldForwardProp })<P>`…`\n *       C7 rule 1 says the generic goes on `.attrs()` \"and only there\"; that is\n *       wrong for this shape, and §J.1 corrects it with the measurement.\n *\n * Neither of those two reads any prop, so NEITHER IS ANNOTATED HERE — rule 2, declare\n * only what is actually passed. The shape is documented because it is the one the\n * a7bb76d prototype skips with \"chain has no .attrs() and root is not the tag\", and\n * whoever converts a file where such a site DOES read a prop needs to know the slot\n * exists rather than reaching for a suppression.\n */\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n/**\n * Card's props, i.e. what `InstructionSeverityDisplay.tsx` passes to `S.Card`.\n * Value types from that file's propTypes; all optional per §J.5.\n */\nexport interface CardStyleProps {\n  /** `severity` — `PropTypes.oneOf([1, 2, 3, 4, 5])`. Closed on purpose: the template\n   *  compares `=== 5`, and a comparison against a value outside the union is TS2367\n   *  rather than a branch that never fires. */\n  $severity?: 1 | 2 | 3 | 4 | 5;\n  /** `showCard` — component defaults it to `true`, but see §J.5: a default in the\n   *  COMPONENT is not a default here, so this stays optional. */\n  $showCard?: boolean;\n  /** `padding` — a whole CSS padding shorthand, e.g. `'8px 6px'`. `string`, not\n   *  `number`: the template uses it raw (`padding: ${props.$padding}`) with a\n   *  `'14px 10px'` fallback, so a number would emit a unitless `padding: 8`. */\n  $padding?: string;\n  /** `bgLight` — CSS colour applied under `body.light-theme`. */\n  $bgLight?: string;\n  /** `bgDark` — CSS colour applied under `body.dark-theme`. */\n  $bgDark?: string;\n  /** Derived in the component as `thumbnail !== undefined`, so genuinely `boolean`\n   *  and not the `string` the `thumbnail` prop is. */\n  $hasThumbnail?: boolean;\n}\n\n/** InstructionText's props. */\ninterface InstructionTextStyleProps {\n  /** `detailsFontSize` — a font-size with its unit, e.g. `'12px'`, `'0.875rem'`.\n   *  `string` for the same reason as `$padding`: it is interpolated raw. */\n  $fontSize?: string;\n  /** `maxLines` — `PropTypes.number`, the `-webkit-line-clamp` count. Read only\n   *  behind `props.$maxLines &&`, which is what keeps it valid when\n   *  `strictNullChecks` is eventually turned on. */\n  $maxLines?: number;\n}\n\n/*\n * Single-argument, and it stays that way — the peer floor is\n * `styled-components: >=5.1.0` and the two majors disagree on the second parameter.\n * See SectionSeparator.styled.ts and §J.4. `prop` needs the annotation because\n * `withConfig` takes this by reference and so gives it no contextual typing.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Card = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<CardStyleProps>(applyDefaultTheme)`\n  display: flex;\n  flex-direction: ${props => (props.$hasThumbnail ? 'row' : 'column')};\n  gap: ${props => (props.$hasThumbnail ? '12px' : '8px')};\n  align-items: flex-start;\n  padding: ${props => props.$padding || '14px 10px'};\n  ${props => {\n    if (props.$bgDark || props.$bgLight) {\n      return props.theme.themeProp(\n        'background',\n        props.$bgDark || props.theme.getColor('gray-900'),\n        props.$bgLight || props.theme.getColor('gray-200')\n      );\n    }\n    return props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('gray-200')\n    );\n  }}\n\n  ${props =>\n    props.$showCard &&\n    css`\n      border-radius: 10px;\n      box-shadow: 0px 0px 26px #0000001a;\n    `}\n\n  ${props =>\n    props.$severity === 5 &&\n    props.$showCard &&\n    css`\n      outline-offset: -1px;\n      ${props.theme.themeProp('outline', '1px solid #7f1d1d', '1px solid #dc2626')}\n    `}\n`;\n\nexport const ThumbnailWrapper = styled.div\n  .withConfig({ shouldForwardProp })\n  .attrs(applyDefaultTheme)`\n  flex-shrink: 0;\n  width: 56px;\n  height: 56px;\n  border-radius: 6px;\n  overflow: hidden;\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-700'),\n      props.theme.getColor('gray-200')\n    )}\n`;\n\n/*\n * NO `.attrs()`, and no prop read, so no generic. If a prop read is ever added here,\n * the annotation goes on the TEMPLATE CALL — `styled.img.withConfig({…})<P>`…`` —\n * and NOT on `styled.img<P>.withConfig(…)`, which is TS1477. §J.1.\n */\nexport const ThumbnailImage = styled.img.withConfig({ shouldForwardProp })`\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n`;\n\nexport const ContentWrapper = styled.div.withConfig({ shouldForwardProp })`\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n  flex: 1;\n  min-width: 0;\n`;\n\nexport const InstructionText = styled.p\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<InstructionTextStyleProps>(applyDefaultTheme)`\n  font-size: ${props => props.$fontSize || '14px'};\n  font-weight: 400;\n  line-height: 1.286em;\n  margin: 0;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  ${props =>\n    props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}\n\n  ${props =>\n    props.$maxLines &&\n    css`\n      display: -webkit-box;\n      -webkit-line-clamp: ${props.$maxLines};\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    `}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Card","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","$hasThumbnail","$padding","$bgDark","$bgLight","theme","themeProp","getColor","$showCard","css","$severity","ThumbnailWrapper","ThumbnailImage","img","ContentWrapper","InstructionText","p","$fontSize","$maxLines"],"mappings":"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"}

package/build/widgets/InstructionSeverityDisplay/index.js

@@ -0,0 +1,2 @@
+export { default } from './InstructionSeverityDisplay.js';
+//# sourceMappingURL=index.js.map

package/build/widgets/InstructionSeverityDisplay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/widgets/Instructions/Instructions.js

@@ -1,39 +1,40 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { isFunction } from 'lodash';
-import PropTypes from 'prop-types';
 import React__default, { useState, useEffect, useCallback } from 'react';
 import { ReactComponent as SvgWarningCircle } from '../../icons/warning-circle.svg.js';
 import CompactAutocompleteSelect from '../../inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js';
 import TextArea from '../../inputs/TextArea/TextArea.js';
 import { Instructions as Instructions$1, TopBarContainer, SelectContainer, InstructionsArea } from './Instructions.styled.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
+const NOOP = () => {};
 const Instructions = React__default.forwardRef(function Instructions({
-  clickToAdd,
+  clickToAdd = false,
   customAddMessage,
   selectedOption,
   loadOptions,
-  readOnly,
-  disabled,
-  hidden,
+  readOnly = false,
+  disabled = false,
+  hidden = false,
   name,
-  lightBackground,
-  autoSelect,
+  lightBackground = false,
+  autoSelect = true,
   subscribeCurrentValue: subscribeCurrentValueProp,
   onChange: onChangeProp,
   onFocus: onFocusProp,
   onBlur: onBlurProp,
-  onUpdateCallback,
+  onUpdateCallback = NOOP,
   availableOptions,
   loadingMessageFunc,
   placeholder,
-  type,
-  selectType,
-  edit,
+  type = '',
+  selectType = '',
+  edit = false,
   rows,
   isExpanded,
   loadingIcon,
   successIcon,
-  padding,
+  padding = 'medium',
+  options,
   ...props
 }, forwardedRef) {
   const [isHovered, setIsHovered] = useState(false);
@@ -61,7 +62,7 @@ const Instructions = React__default.forwardRef(function Instructions({
       setCurrentValue(customMessage);
       setInitialHover(true);
     }
-  }, [addInstructions, handleOnFocus]);
+  }, [addInstructions, customMessage]);
   const onChange = useCallback(event => {
     setCurrentValue(event.target.value);
     if (isFunction(onChangeProp)) {
@@ -90,11 +91,6 @@ const Instructions = React__default.forwardRef(function Instructions({
   const handleMouseLeave = () => {
     setIsHovered(false);
   };
-  const handleOnFocus = () => {
-    if (customMessage === currentValue) {
-      setCurrentValue('');
-    }
-  };
   const handleChange = selected => {
     if (selected === null) {
       setSelected({});
@@ -112,90 +108,52 @@ const Instructions = React__default.forwardRef(function Instructions({
     }
   };
   const sharedSelectProps = {
-    options: loadOptions ? undefined : availableOptions,
+    options: loadOptions ? undefined : options ?? availableOptions,
     loadOptions: loadOptions,
     loadingMessage: loadingMessageFunc,
     placeholder: placeholder
   };
   if (hidden) return null;
-  return React__default.createElement(Instructions$1, _extends({
+  return jsxs(Instructions$1, {
     ref: forwardedRef,
-    initialHover: initialHover,
     onMouseDown: handleMouseOver,
-    onMouseLeave: handleMouseLeave
-  }, props), !readOnly && !disabled && React__default.createElement(TopBarContainer, {
-    initialHover: initialHover,
-    className: isHovered && !readOnly && !disabled && 'slide-in'
-  }, React__default.createElement(SelectContainer, null, React__default.createElement(CompactAutocompleteSelect, _extends({
-    type: selectType,
-    value: selectedOption,
-    creatable: false,
-    onChange: handleChange
-  }, sharedSelectProps)))), React__default.createElement(InstructionsArea, {
-    type: type
-  }, React__default.createElement(TextArea, {
-    noBorder: true,
-    instructionsTextArea: true,
-    type: type,
-    lightBackground: background,
-    readOnly: readOnly,
-    disabled: disabled,
-    name: name,
-    isExpanded: isExpanded,
-    edit: edit,
-    value: currentValue === null ? '' : currentValue,
-    onFocus: onFocus,
-    onChange: onChange,
-    onBlur: onBlur,
-    rows: rows,
-    icon: React__default.createElement(SvgWarningCircle, null),
-    loadingIcon: loadingIcon,
-    successIcon: successIcon,
-    padding: padding
-  })));
+    onMouseLeave: handleMouseLeave,
+    ...props,
+    children: [!readOnly && !disabled && jsx(TopBarContainer, {
+      $initialHover: initialHover,
+      className: isHovered && !readOnly && !disabled && 'slide-in',
+      children: jsx(SelectContainer, {
+        children: jsx(CompactAutocompleteSelect, {
+          type: selectType,
+          value: selectedOption,
+          creatable: false,
+          onChange: handleChange,
+          ...sharedSelectProps
+        })
+      })
+    }), jsx(InstructionsArea, {
+      children: jsx(TextArea, {
+        noBorder: true,
+        type: type,
+        $lightBackground: background,
+        readOnly: readOnly,
+        disabled: disabled,
+        name: name,
+        isExpanded: isExpanded,
+        edit: edit,
+        value: currentValue === null ? '' : currentValue,
+        onFocus: onFocus,
+        onChange: onChange,
+        onBlur: onBlur,
+        rows: rows,
+        icon: jsx(SvgWarningCircle, {}),
+        loadingIcon: loadingIcon,
+        successIcon: successIcon,
+        padding: padding
+      })
+    })]
+  });
 });
-Instructions.defaultProps = {
-  clickToAdd: false,
-  lightBackground: false,
-  autoSelect: true,
-  hidden: false,
-  edit: false,
-  disabled: false,
-  readOnly: false,
-  type: '',
-  selectType: '',
-  padding: 'medium',
-  onUpdateCallback: () => {}
-};
-Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
-  name: PropTypes.string,
-  placeholder: PropTypes.string,
-  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  selectedOption: PropTypes.any,
-  loadOptions: PropTypes.func,
-  loadingMessageFunc: PropTypes.func,
-  clickToAdd: PropTypes.bool,
-  customAddMessage: PropTypes.string,
-  autoSelect: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  disabled: PropTypes.bool,
-  hidden: PropTypes.bool,
-  availableOptions: PropTypes.arrayOf(PropTypes.object),
-  lightBackground: PropTypes.bool,
-  edit: PropTypes.bool,
-  options: PropTypes.array,
-  subscribeCurrentValue: PropTypes.func,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onUpdateCallback: PropTypes.func,
-  type: PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'instructions-warning', 'loading', 'success']),
-  selectType: PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
-  isExpanded: PropTypes.func,
-  loadingIcon: PropTypes.element,
-  successIcon: PropTypes.element,
-  padding: PropTypes.oneOf(['', 'small', 'medium', 'large'])
-} : {};
 
 export { Instructions as default };
 //# sourceMappingURL=Instructions.js.map

package/build/widgets/Instructions/Instructions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Instructions.js","sources":["../../../src/components/widgets/Instructions/Instructions.js"],"sourcesContent":["import { isFunction } from 'lodash';\nimport PropTypes from 'prop-types';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { ReactComponent as AlertIcon } from '../../../icons/warning-circle.svg';\nimport AutocompleteSelect from '../../inputs/CompactAutocompleteSelect/CompactAutocompleteSelect';\nimport TextArea from '../../inputs/TextArea/TextArea';\nimport * as S from './Instructions.styled';\n\n/**\n * Instructions that let you display Terms & Conditions\n *\n *\n * ### Import\n *\n * ``` js\n * import { Instructions } from '@ntbjs/react-components/widgets/Instructions'\n * // or\n * import Instructions from '@ntbjs/react-components/widgets/Instructions'\n * ```\n *\n * ### AutocompleteSelect\n * `AutocompleteSelect` is integrated within Instructions in order to implement the Drop-down Menu (check out the `Autocomplete` component documentation).\n *\n *\n *  <br /> ## Options `object` format\n * Options are represented by an `Array` of `objects` with the following format:\n *\n * ``` js\n * {\n *   value: \"Example\",\n *   label: \"Example\"\n * }\n * ```\n *\n */\n\nconst Instructions = React.forwardRef(function Instructions(\n  {\n    clickToAdd,\n    customAddMessage,\n    selectedOption,\n    loadOptions,\n    readOnly,\n    disabled,\n    hidden,\n    name,\n    lightBackground,\n    autoSelect,\n    subscribeCurrentValue: subscribeCurrentValueProp,\n    onChange: onChangeProp,\n    onFocus: onFocusProp,\n    onBlur: onBlurProp,\n    onUpdateCallback,\n    availableOptions,\n    loadingMessageFunc,\n    placeholder,\n    type,\n    selectType,\n    edit,\n    rows,\n    isExpanded,\n    loadingIcon,\n    successIcon,\n    padding,\n    ...props\n  },\n  forwardedRef\n) {\n  const [isHovered, setIsHovered] = useState(false);\n  const [selected, setSelected] = useState({});\n  const [addInstructions, setAddInstructions] = useState(clickToAdd);\n  const [customMessage, setCustomMessage] = useState(customAddMessage);\n  const [background, setBackground] = useState(lightBackground);\n  const [initialHover, setInitialHover] = useState(true);\n  const [currentValue, setCurrentValue] = useState();\n\n  useEffect(() => {\n    if (isFunction(subscribeCurrentValueProp)) {\n      subscribeCurrentValueProp(currentValue);\n    }\n  }, [currentValue]);\n\n  useEffect(() => {\n    handleChange(selected);\n  }, [selected]);\n  //Selected option to be displayed on first render\n  useEffect(() => {\n    if (selectedOption) {\n      setCurrentValue(selectedOption.value);\n    }\n  }, [selectedOption]);\n  //Custom instructions added by consumer\n  useEffect(() => {\n    if (addInstructions) {\n      setCurrentValue(customMessage);\n      setInitialHover(true);\n    }\n  }, [addInstructions, handleOnFocus]);\n\n  const onChange = useCallback(\n    event => {\n      setCurrentValue(event.target.value);\n      if (isFunction(onChangeProp)) {\n        onChangeProp(event);\n      }\n    },\n    [onChangeProp]\n  );\n  const onFocus = useCallback(\n    event => {\n      if (autoSelect) {\n        event.target.select();\n      }\n      if (isFunction(onFocusProp)) {\n        onFocusProp(event);\n      }\n      if (event.target.value === customMessage) {\n        setCurrentValue('');\n      }\n    },\n    [autoSelect, readOnly, onFocusProp]\n  );\n  const onBlur = useCallback(\n    event => {\n      if (isFunction(onBlurProp)) {\n        onBlurProp(event);\n      }\n    },\n    [onBlurProp]\n  );\n\n  const handleMouseOver = () => {\n    setIsHovered(true);\n  };\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n  };\n\n  const handleOnFocus = () => {\n    if (customMessage === currentValue) {\n      setCurrentValue('');\n    }\n  };\n\n  const handleChange = selected => {\n    if (selected === null) {\n      setSelected({});\n      setAddInstructions(true);\n      setBackground(true);\n      setInitialHover(true);\n      setCustomMessage(customAddMessage);\n    } else {\n      setSelected(selected);\n      setCurrentValue(selected.value);\n      setAddInstructions(false);\n      setBackground(false);\n      setInitialHover(false);\n      onUpdateCallback(selected);\n    }\n  };\n\n  const sharedSelectProps = {\n    options: loadOptions ? undefined : availableOptions,\n    loadOptions: loadOptions,\n    loadingMessage: loadingMessageFunc,\n    placeholder: placeholder\n  };\n\n  if (hidden) return null;\n\n  return (\n    <S.Instructions\n      ref={forwardedRef}\n      initialHover={initialHover}\n      onMouseDown={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n    >\n      {!readOnly && !disabled && (\n        <S.TopBarContainer\n          initialHover={initialHover}\n          className={isHovered && !readOnly && !disabled && 'slide-in'}\n        >\n          <S.SelectContainer>\n            <AutocompleteSelect\n              type={selectType}\n              value={selectedOption}\n              creatable={false}\n              onChange={handleChange}\n              {...sharedSelectProps}\n            />\n          </S.SelectContainer>\n        </S.TopBarContainer>\n      )}\n\n      <S.InstructionsArea type={type}>\n        <TextArea\n          noBorder\n          instructionsTextArea={true}\n          type={type}\n          lightBackground={background}\n          readOnly={readOnly}\n          disabled={disabled}\n          name={name}\n          isExpanded={isExpanded}\n          edit={edit}\n          value={currentValue === null ? '' : currentValue}\n          onFocus={onFocus}\n          onChange={onChange}\n          onBlur={onBlur}\n          rows={rows}\n          icon={<AlertIcon />}\n          loadingIcon={loadingIcon}\n          successIcon={successIcon}\n          padding={padding}\n        />\n      </S.InstructionsArea>\n    </S.Instructions>\n  );\n});\n\nInstructions.defaultProps = {\n  clickToAdd: false,\n  lightBackground: false,\n  autoSelect: true,\n  hidden: false,\n  edit: false,\n  disabled: false,\n  readOnly: false,\n  type: '',\n  selectType: '',\n  padding: 'medium',\n  onUpdateCallback: () => {}\n};\n\nInstructions.propTypes = {\n  /**\n   * Name of the text area (used when sending form data)\n   */\n  name: PropTypes.string,\n  /**\n   * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. \"Search categories...\"\n   */\n  placeholder: PropTypes.string,\n  /**\n   * How many rows/lines of text to be displayed by default\n   */\n  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /**\n   * Selected option\n   */\n  selectedOption: PropTypes.any,\n  /**\n   * Function with a `Promise` returning filtered options.\n   *\n   * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n   * for details.\n   *\n   * **Note:**\n   * <br />This will override the `availableOptions` prop if both props are set.\n   */\n  loadOptions: PropTypes.func,\n  /**\n   * Function for custom \"Loading...\" message while waiting for the first page\n   * from `loadOptions` to resolve. Defaults to \"Loading...\" if no function is provided.\n   */\n  loadingMessageFunc: PropTypes.func,\n  /**\n  /**\n   * Whether the components displays an initial custom message.\n   */\n  clickToAdd: PropTypes.bool,\n  /**\n   * Add initial custom message. i.e: `No instructions (click to add)`.\n   */\n  customAddMessage: PropTypes.string,\n  /**\n   * Whether to auto select the entire value when the input is focused – does also work when the field is in read-only mode\n   */\n  autoSelect: PropTypes.bool,\n  /**\n   * Whether the instruction is read only\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Whether the intruction is disabled\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Whether the component is hidden or visible.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * `Array` of `objects` that populate the select menu. This is only needed\n   * when asynchronous option fetching with the `loadOptions` prop is not used.\n   *\n   * **Note:**\n   * <br />This will be overridden by the `loadOptions` prop if both props are set.\n   */\n  availableOptions: PropTypes.arrayOf(PropTypes.object),\n  /**\n   * `LightBackground color\n   */\n  lightBackground: PropTypes.bool,\n  /**\n   * Displays a light-yellow background to show that instruction value is editable\n   */\n  edit: PropTypes.bool,\n  /**\n   * Function with a `Promise` returning filtered options.\n   *\n   * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n   * for details.\n   *\n   * **Note:**\n   * <br /> `options`should be passed as an `array`of `objects`\n   * <br />This will override the `availableOptions` prop if both props are set.\n   */\n  options: PropTypes.array,\n  /**\n   * Callback for `onChange`\n   */\n  subscribeCurrentValue: PropTypes.func,\n  /**\n   * Callback for `onChange`\n   */\n  onChange: PropTypes.func,\n  /**\n   * Callback for `onFocus`\n   */\n  onFocus: PropTypes.func,\n  /**\n   * Callback for `onBlur`\n   */\n  onBlur: PropTypes.func,\n  /**\n   * Callback for `onUpdateCallback`: register to AutocompleteSelect label and value\n   */\n  onUpdateCallback: PropTypes.func,\n  /**\n   * Define the type based on error,error-border , warning, loading and success.\n   */\n  type: PropTypes.oneOf([\n    '',\n    'error',\n    'error-border',\n    'warning',\n    'instructions-warning',\n    'loading',\n    'success'\n  ]),\n  /**\n   * Define the type AutoCompleteSelect based on error,error-border , warning, loading and success.\n   */\n  selectType: PropTypes.oneOf([\n    '',\n    'error',\n    'warning',\n    'instructions-warning',\n    'loading',\n    'success'\n  ]),\n  isExpanded: PropTypes.func,\n  /**\n   * Icon element – E.g: `icon={<Spinner />}`\n   */\n  loadingIcon: PropTypes.element,\n  /**\n   * Icon element – E.g: `icon={<Check />}`\n   */\n  successIcon: PropTypes.element,\n  /**\n   * Add padding (small-medium-large)\n   */\n  padding: PropTypes.oneOf(['', 'small', 'medium', 'large'])\n};\n\nexport default Instructions;\n"],"names":["Instructions","React","forwardRef","clickToAdd","customAddMessage","selectedOption","loadOptions","readOnly","disabled","hidden","name","lightBackground","autoSelect","subscribeCurrentValue","subscribeCurrentValueProp","onChange","onChangeProp","onFocus","onFocusProp","onBlur","onBlurProp","onUpdateCallback","availableOptions","loadingMessageFunc","placeholder","type","selectType","edit","rows","isExpanded","loadingIcon","successIcon","padding","props","forwardedRef","isHovered","setIsHovered","useState","selected","setSelected","addInstructions","setAddInstructions","customMessage","setCustomMessage","background","setBackground","initialHover","setInitialHover","currentValue","setCurrentValue","useEffect","isFunction","handleChange","value","handleOnFocus","useCallback","event","target","select","handleMouseOver","handleMouseLeave","sharedSelectProps","options","undefined","loadingMessage","createElement","S","_extends","ref","onMouseDown","onMouseLeave","className","AutocompleteSelect","creatable","TextArea","noBorder","instructionsTextArea","icon","AlertIcon","defaultProps","propTypes","process","env","NODE_ENV","PropTypes","string","oneOfType","number","any","func","bool","arrayOf","object","array","oneOf","element"],"mappings":"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"}
+{"version":3,"file":"Instructions.js","sources":["../../../src/components/widgets/Instructions/Instructions.tsx"],"sourcesContent":["import { isFunction } from 'lodash';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { ReactComponent as AlertIcon } from '../../../icons/warning-circle.svg';\nimport AutocompleteSelect from '../../inputs/CompactAutocompleteSelect/CompactAutocompleteSelect';\nimport TextArea from '../../inputs/TextArea/TextArea';\nimport * as S from './Instructions.styled';\n\nconst NOOP = () => {};\n\ntype InstructionsOwnProps = {\n  /**\n   * Name of the text area (used when sending form data)\n   */\n  name?: string;\n  /**\n   * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. \"Search categories...\"\n   */\n  placeholder?: string;\n  /**\n   * How many rows/lines of text to be displayed by default\n   */\n  rows?: number | string;\n  /**\n   * Selected option\n   */\n  selectedOption?: any;\n  /**\n   * Function with a `Promise` returning filtered options.\n   *\n   * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n   * for details.\n   *\n   * **Note:**\n   * <br />This will override the `availableOptions` prop if both props are set.\n   */\n  loadOptions?: (...args: any[]) => any;\n  /**\n   * Function for custom \"Loading...\" message while waiting for the first page\n   * from `loadOptions` to resolve. Defaults to \"Loading...\" if no function is provided.\n   */\n  loadingMessageFunc?: (...args: any[]) => any;\n  /**\n    /**\n      * Whether the components displays an initial custom message.\n      */\n  clickToAdd?: boolean;\n  /**\n   * Add initial custom message. i.e: `No instructions (click to add)`.\n   */\n  customAddMessage?: string;\n  /**\n   * Whether to auto select the entire value when the input is focused – does also work when the field is in read-only mode\n   */\n  autoSelect?: boolean;\n  /**\n   * Whether the instruction is read only\n   */\n  readOnly?: boolean;\n  /**\n   * Whether the intruction is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Whether the component is hidden or visible.\n   */\n  hidden?: boolean;\n  /**\n   * `Array` of `objects` that populate the select menu. This is only needed\n   * when asynchronous option fetching with the `loadOptions` prop is not used.\n   *\n   * **Note:**\n   * <br />This will be overridden by the `loadOptions` prop if both props are set.\n   */\n  availableOptions?: any[];\n  /**\n   * `LightBackground color\n   */\n  lightBackground?: boolean;\n  /**\n   * Displays a light-yellow background to show that instruction value is editable\n   */\n  edit?: boolean;\n  /**\n   * Function with a `Promise` returning filtered options.\n   *\n   * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n   * for details.\n   *\n   * **Note:**\n   * <br /> `options`should be passed as an `array`of `objects`\n   * <br />This will override the `availableOptions` prop if both props are set.\n   */\n  options?: any[];\n  /**\n   * Callback for `onChange`\n   */\n  subscribeCurrentValue?: (...args: any[]) => any;\n  /**\n   * Callback for `onChange`\n   */\n  onChange?: (...args: any[]) => any;\n  /**\n   * Callback for `onFocus`\n   */\n  onFocus?: (...args: any[]) => any;\n  /**\n   * Callback for `onBlur`\n   */\n  onBlur?: (...args: any[]) => any;\n  /**\n   * Callback for `onUpdateCallback`: register to AutocompleteSelect label and value\n   */\n  onUpdateCallback?: (...args: any[]) => any;\n  /**\n   * Define the type based on error,error-border , warning, loading and success.\n   */\n  type?: '' | 'error' | 'error-border' | 'warning' | 'instructions-warning' | 'loading' | 'success';\n  /**\n   * Define the type AutoCompleteSelect based on error,error-border , warning, loading and success.\n   */\n  selectType?: '' | 'error' | 'warning' | 'instructions-warning' | 'loading' | 'success';\n  isExpanded?: (...args: any[]) => any;\n  /**\n   * Icon element – E.g: `icon={<Spinner />}`\n   */\n  loadingIcon?: React.ReactElement<any>;\n  /**\n   * Icon element – E.g: `icon={<Check />}`\n   */\n  successIcon?: React.ReactElement<any>;\n  /**\n   * Add padding (small-medium-large)\n   */\n  padding?: '' | 'small' | 'medium' | 'large';\n};\n\n/*\n * NMB-3998 §C.2: `props` is spread onto `S.Instructions`, 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 InstructionsOwnProps`);\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 InstructionsProps = Omit<\n  React.ComponentPropsWithoutRef<typeof S.Instructions>,\n  keyof InstructionsOwnProps\n> &\n  InstructionsOwnProps;\n\n/**\n * Instructions that let you display Terms & Conditions\n *\n *\n * ### Import\n *\n * ``` js\n * import { Instructions } from '@ntbjs/react-components/widgets/Instructions'\n * // or\n * import Instructions from '@ntbjs/react-components/widgets/Instructions'\n * ```\n *\n * ### AutocompleteSelect\n * `AutocompleteSelect` is integrated within Instructions in order to implement the Drop-down Menu (check out the `Autocomplete` component documentation).\n *\n *\n *  <br /> ## Options `object` format\n * Options are represented by an `Array` of `objects` with the following format:\n *\n * ``` js\n * {\n *   value: \"Example\",\n *   label: \"Example\"\n * }\n * ```\n *\n */\n\nconst Instructions = React.forwardRef<any, InstructionsProps>(function Instructions(\n  {\n    clickToAdd = false,\n    customAddMessage,\n    selectedOption,\n    loadOptions,\n    readOnly = false,\n    disabled = false,\n    hidden = false,\n    name,\n    lightBackground = false,\n    autoSelect = true,\n    subscribeCurrentValue: subscribeCurrentValueProp,\n    onChange: onChangeProp,\n    onFocus: onFocusProp,\n    onBlur: onBlurProp,\n    onUpdateCallback = NOOP,\n    availableOptions,\n    loadingMessageFunc,\n    placeholder,\n    type = '',\n    selectType = '',\n    edit = false,\n    rows,\n    isExpanded,\n    loadingIcon,\n    successIcon,\n    padding = 'medium',\n    /*\n     * NMB-3998 DOM LEAK. `options` is declared and documented on `InstructionsOwnProps`\n     * but was never destructured, so it fell into the `...props` rest below and was\n     * spread onto `<S.Instructions>`. Nothing in `Instructions.styled.ts` reads it and it\n     * has no `$` prefix, so `shouldForwardProp` forwarded it to the host `<div>`, where\n     * React stringified the array: `<div options=\"[object Object],[object Object],…\">` is\n     * in the committed render baseline entry `widgets/Instructions`.\n     *\n     * Destructuring it here is what stops the leak. It is also consumed for the first\n     * time, in `sharedSelectProps` below, which is the behaviour its own JSDoc has always\n     * documented (\"will override the `availableOptions` prop if both props are set\") and\n     * which nothing implemented. Leaving it destructured-but-unused would have been a\n     * knowingly dead binding.\n     */\n    options,\n    ...props\n  },\n  forwardedRef\n) {\n  const [isHovered, setIsHovered] = useState(false);\n  const [selected, setSelected] = useState({});\n  const [addInstructions, setAddInstructions] = useState(clickToAdd);\n  const [customMessage, setCustomMessage] = useState(customAddMessage);\n  const [background, setBackground] = useState(lightBackground);\n  const [initialHover, setInitialHover] = useState(true);\n  /*\n   * NMB-3998: same failure as CompactTextInput — bare `useState()` infers `undefined`, so\n   * the setter is `(prevState: undefined) => undefined` and rejects every string assigned\n   * to it (TS2345 at the `customMessage` and `''` sites). All six writes are strings\n   * (`selectedOption.value`, `customMessage`, `event.target.value`, `''`,\n   * `selected.value`). The initial value stays `undefined` — type-only, no argument added.\n   */\n  const [currentValue, setCurrentValue] = useState<string | undefined>();\n\n  useEffect(() => {\n    if (isFunction(subscribeCurrentValueProp)) {\n      subscribeCurrentValueProp(currentValue);\n    }\n  }, [currentValue]);\n\n  useEffect(() => {\n    handleChange(selected);\n  }, [selected]);\n  //Selected option to be displayed on first render\n  useEffect(() => {\n    if (selectedOption) {\n      setCurrentValue(selectedOption.value);\n    }\n  }, [selectedOption]);\n  //Custom instructions added by consumer\n  useEffect(() => {\n    if (addInstructions) {\n      setCurrentValue(customMessage);\n      setInitialHover(true);\n    }\n  }, [addInstructions, customMessage]);\n\n  const onChange = useCallback(\n    event => {\n      setCurrentValue(event.target.value);\n      if (isFunction(onChangeProp)) {\n        onChangeProp(event);\n      }\n    },\n    [onChangeProp]\n  );\n  const onFocus = useCallback(\n    event => {\n      if (autoSelect) {\n        event.target.select();\n      }\n      if (isFunction(onFocusProp)) {\n        onFocusProp(event);\n      }\n      if (event.target.value === customMessage) {\n        setCurrentValue('');\n      }\n    },\n    [autoSelect, readOnly, onFocusProp]\n  );\n  const onBlur = useCallback(\n    event => {\n      if (isFunction(onBlurProp)) {\n        onBlurProp(event);\n      }\n    },\n    [onBlurProp]\n  );\n\n  const handleMouseOver = () => {\n    setIsHovered(true);\n  };\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n  };\n\n  const handleChange = selected => {\n    if (selected === null) {\n      setSelected({});\n      setAddInstructions(true);\n      setBackground(true);\n      setInitialHover(true);\n      setCustomMessage(customAddMessage);\n    } else {\n      setSelected(selected);\n      setCurrentValue(selected.value);\n      setAddInstructions(false);\n      setBackground(false);\n      setInitialHover(false);\n      onUpdateCallback(selected);\n    }\n  };\n\n  const sharedSelectProps = {\n    // `options` wins over `availableOptions` when both are set — its documented contract.\n    options: loadOptions ? undefined : (options ?? availableOptions),\n    loadOptions: loadOptions,\n    loadingMessage: loadingMessageFunc,\n    placeholder: placeholder\n  };\n\n  if (hidden) return null;\n\n  return (\n    <S.Instructions\n      ref={forwardedRef}\n      onMouseDown={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n    >\n      {!readOnly && !disabled && (\n        <S.TopBarContainer\n          $initialHover={initialHover}\n          className={isHovered && !readOnly && !disabled && 'slide-in'}\n        >\n          <S.SelectContainer>\n            <AutocompleteSelect\n              type={selectType}\n              value={selectedOption}\n              creatable={false}\n              onChange={handleChange}\n              {...sharedSelectProps}\n            />\n          </S.SelectContainer>\n        </S.TopBarContainer>\n      )}\n\n      {/*\n       * NMB-3998 DOM LEAK, fixed by deleting a prop nothing consumed. `S.InstructionsArea`\n       * used to be given `type={type}`. It is a `styled.div` whose template reads no props\n       * at all, and `type` has no `$` prefix, so `shouldForwardProp` forwarded it straight\n       * onto the `<div>` — `<div type=\"warning\" …>` is in the committed render baseline\n       * entry `widgets/Instructions`, and `type` is not an attribute of `<div>`. The `type`\n       * styling is done by the `TextArea` below, which does consume it.\n       */}\n      <S.InstructionsArea>\n        <TextArea\n          noBorder\n          type={type}\n          /**\n           * INERT. TextArea stopped consuming `lightBackground` in f5ff074\n           * (Aug 2024), so Instructions' documented `lightBackground` prop has had\n           * no visual effect since then — its only remaining behaviour was leaking\n           * onto the DOM as an unknown attribute. Kept transient ($-prefixed) so\n           * styled-components strips it, rather than deleted, because deleting the\n           * pass-down orphans the `background` state and the public prop while\n           * fixing nothing a consumer can see. Restoring the feature is a\n           * behaviour change and needs its own ticket.\n           */\n          $lightBackground={background}\n          readOnly={readOnly}\n          disabled={disabled}\n          name={name}\n          isExpanded={isExpanded}\n          edit={edit}\n          value={currentValue === null ? '' : currentValue}\n          onFocus={onFocus}\n          onChange={onChange}\n          onBlur={onBlur}\n          rows={rows}\n          icon={<AlertIcon />}\n          loadingIcon={loadingIcon}\n          successIcon={successIcon}\n          padding={padding}\n        />\n      </S.InstructionsArea>\n    </S.Instructions>\n  );\n});\n\nexport default Instructions;\n"],"names":["NOOP","Instructions","React","forwardRef","clickToAdd","customAddMessage","selectedOption","loadOptions","readOnly","disabled","hidden","name","lightBackground","autoSelect","subscribeCurrentValue","subscribeCurrentValueProp","onChange","onChangeProp","onFocus","onFocusProp","onBlur","onBlurProp","onUpdateCallback","availableOptions","loadingMessageFunc","placeholder","type","selectType","edit","rows","isExpanded","loadingIcon","successIcon","padding","options","props","forwardedRef","isHovered","setIsHovered","useState","selected","setSelected","addInstructions","setAddInstructions","customMessage","setCustomMessage","background","setBackground","initialHover","setInitialHover","currentValue","setCurrentValue","useEffect","isFunction","handleChange","value","useCallback","event","target","select","handleMouseOver","handleMouseLeave","sharedSelectProps","undefined","loadingMessage","_jsxs","S","ref","onMouseDown","onMouseLeave","children","_jsx","$initialHover","className","AutocompleteSelect","creatable","TextArea","noBorder","$lightBackground","icon","AlertIcon"],"mappings":"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"}

package/build/widgets/Instructions/Instructions.styled.js

@@ -1,32 +1,33 @@
 import styled from 'styled-components';
 import { applyDefaultTheme } from '../../utils/defaultTheme.js';
 
-const Instructions = styled.div.attrs(applyDefaultTheme)`
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  ${props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};
-`;
-const TopBarContainer = styled.div.attrs(applyDefaultTheme)`
-  position: absolute;
-  display: flex;
-  width: 100%;
-  margin-top: 0;
-  transition: margin-top 120ms;
-  &&.slide-in {
-    margin-top: -24px;
-  }
-  ${props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};
-
-  ${props => props.initialHover && props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};
-`;
-const SelectContainer = styled.div.attrs(applyDefaultTheme)`
-  width: 100%;
-  margin: 0 2px;
-`;
-const InstructionsArea = styled.div.attrs(applyDefaultTheme)`
-  margin: 2px 2px -2px 2px;
-`;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Instructions = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Instructionsstyled__Instructions",
+  componentId: "sc-lasand-0"
+})(["display:flex;position:relative;flex-direction:column;", ";"], props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
+const TopBarContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Instructionsstyled__TopBarContainer",
+  componentId: "sc-lasand-1"
+})(["position:absolute;display:flex;width:100%;margin-top:0;transition:margin-top 120ms;&&.slide-in{margin-top:-24px;}", ";", ";"], props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')), props => props.$initialHover && props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
+const SelectContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Instructionsstyled__SelectContainer",
+  componentId: "sc-lasand-2"
+})(["width:100%;margin:0 2px;"]);
+const InstructionsArea = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Instructionsstyled__InstructionsArea",
+  componentId: "sc-lasand-3"
+})(["margin:2px 2px -2px 2px;"]);
 
 export { Instructions, InstructionsArea, SelectContainer, TopBarContainer };
 //# sourceMappingURL=Instructions.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Instructions.styled.js","sources":["../../../src/components/widgets/Instructions/Instructions.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nexport const Instructions = styled.div.attrs(applyDefaultTheme)`\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  ${props =>\n    props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};\n`;\n\nexport const TopBarContainer = styled.div.attrs(applyDefaultTheme)`\n  position: absolute;\n  display: flex;\n  width: 100%;\n  margin-top: 0;\n  transition: margin-top 120ms;\n  &&.slide-in {\n    margin-top: -24px;\n  }\n  ${props =>\n    props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};\n\n  ${props =>\n    props.initialHover &&\n    props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};\n`;\n\nexport const SelectContainer = styled.div.attrs(applyDefaultTheme)`\n  width: 100%;\n  margin: 0 2px;\n`;\n\nexport const InstructionsArea = styled.div.attrs(applyDefaultTheme)`\n  margin: 2px 2px -2px 2px;\n`;\n"],"names":["Instructions","styled","div","attrs","applyDefaultTheme","props","theme","themeProp","getColor","TopBarContainer","initialHover","SelectContainer","InstructionsArea"],"mappings":";;;AAGO,MAAMA,YAAY,GAAGC,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC/D;AACA;AACA;AACA,EAAIC,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAEF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAC7F,EAAC;AAEM,MAAMC,eAAe,GAAGR,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAIC,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAEF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAC7F;AACA,EAAIH,EAAAA,KAAK,IACLA,KAAK,CAACK,YAAY,IAClBL,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAEF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAC7F,EAAC;AAEM,MAAMG,eAAe,GAAGV,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAClE;AACA;AACA,EAAC;AAEM,MAAMQ,gBAAgB,GAAGX,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AACnE;AACA;;;;"}
+{"version":3,"file":"Instructions.styled.js","sources":["../../../src/components/widgets/Instructions/Instructions.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';\n\n/**\n * `TopBarContainer`, the only component in this file that reads a prop.\n */\ninterface InstructionsTopBarStyleProps {\n  /**\n   * `initialHover` — `Instructions.tsx`'s `useState(true)`, so genuinely `boolean` and not\n   * derived from any prop. Transient, so it never reaches the DOM.\n   *\n   * READ, PASSED, AND NEVERTHELESS INERT — recorded, not fixed. The rule it guards is\n   * `themeProp('background', '#634E01', getColor('signal-yellow-400'))`, character for\n   * character the same declaration as the UNCONDITIONAL one three lines above it. So\n   * whichever way `$initialHover` goes, the emitted background is identical and the\n   * conditional only ever adds a duplicate of the rule that precedes it.\n   *\n   * Deleting it is the fix, and it is not a type-only change: removing the block removes a\n   * duplicate declaration from the generated CSS and therefore moves the render baseline\n   * (§J.8). Whether the intent was a DIFFERENT hover colour is a question for whoever owns\n   * the design, not for this commit.\n   */\n  $initialHover?: 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 *\n * NOTE, for whoever audits DOM leaks here: this predicate is doing its job and both leaks\n * this component had were upstream of it, in `Instructions.tsx`, which is where they were\n * fixed — nothing in this file read either prop, so there was never anything to declare.\n * For the record, since the recorded baseline still shows them until it is re-recorded:\n * `widgets/Instructions` opened `<div options=\"[object Object],[object Object],…\">`\n * (`options` was never destructured, so it rode the `...props` rest onto `S.Instructions`)\n * and `InstructionsArea` rendered `<div type=\"warning\">` (`type={type}` was passed to a\n * component whose template reads no props at all).\n */\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Instructions = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  ${props =>\n    props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};\n`;\n\nexport const TopBarContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<InstructionsTopBarStyleProps>(applyDefaultTheme)`\n  position: absolute;\n  display: flex;\n  width: 100%;\n  margin-top: 0;\n  transition: margin-top 120ms;\n  &&.slide-in {\n    margin-top: -24px;\n  }\n  ${props =>\n    props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};\n\n  ${props =>\n    props.$initialHover &&\n    props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};\n`;\n\nexport const SelectContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  width: 100%;\n  margin: 0 2px;\n`;\n\nexport const InstructionsArea = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  margin: 2px 2px -2px 2px;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Instructions","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","theme","themeProp","getColor","TopBarContainer","$initialHover","SelectContainer","InstructionsArea"],"mappings":";;;AA4CA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAEM,MAAMC,YAAY,GAAGC,MAAM,CAACC,GAAG,CACnCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,kCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uDAAA,EAAA,GAAA,CAAA,EAIvBC,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAEF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAGtF,MAAMC,eAAe,GAAGX,MAAM,CAACC,GAAG,CACtCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAA+BC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mHAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EASrDC,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAEF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC,EAEzFH,KAAK,IACLA,KAAK,CAACK,aAAa,IACnBL,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAEF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAGtF,MAAMG,eAAe,GAAGb,MAAM,CAACC,GAAG,CACtCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0BAAA,CAAA;AAKpB,MAAMQ,gBAAgB,GAAGd,MAAM,CAACC,GAAG,CACvCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,sCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0BAAA,CAAA;;;;"}