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

package/build/inputs/TextInput/TextInput.styled.js

@@ -1,249 +1,58 @@
 import styled, { css } from 'styled-components';
 import { applyDefaultTheme } from '../../utils/defaultTheme.js';
 
-const activeLabel = css`
-  font-size: 0.75rem;
-  padding: 0 3px;
-  top: -7px;
-  letter-spacing: 0.03em;
-  left: 8px !important;
-  opacity: 1 !important;
-`;
+const activeLabel = css(["font-size:0.75rem;padding:0 3px;top:-7px;letter-spacing:0.03em;left:8px !important;opacity:1 !important;"]);
 const shouldForwardProp = prop => {
   return prop !== 'theme' && !prop.startsWith('$');
 };
 const Adornment = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  flex-shrink: 0;
-  font-family: inherit;
-  font-size: 0.875rem;
-  line-height: initial;
-  padding: 13px 10px;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))}
-  ${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
-  border: 1px solid;
-  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'))}
-  border-radius: 3px;
-  ${props => props.$isPrefix ? css`
-          padding-right: 10px;
-          border-right: 0;
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        ` : css`
-          padding-left: 0;
-          margin-left: -3px;
-          border-left: 0;
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-        `}
-  box-sizing: border-box;
-  appearance: none;
-  transition: border-color 350ms;
-  height: 2.75rem;
-
-  ${props => props.$warning && css`
-      border-color: ${props.theme.getColor('orange-500')} !important;
-    `}
-  ${props => props.$error && css`
-      border-color: ${props.theme.getColor('red-500')} !important;
-    `}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextInputstyled__Adornment",
+  componentId: "sc-11se2z5-0"
+})(["flex-shrink:0;font-family:inherit;font-size:0.875rem;line-height:initial;padding:13px 10px;", " ", " border:1px solid;", " border-radius:3px;", " box-sizing:border-box;appearance:none;transition:border-color 350ms;height:2.75rem;", " ", ""], props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.$isPrefix ? css(["padding-right:10px;border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;"]) : css(["padding-left:0;margin-left:-3px;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;"]), props => props.$warning && css(["border-color:", " !important;"], props.theme.getColor('orange-500')), props => props.$error && css(["border-color:", " !important;"], props.theme.getColor('red-500')));
 const TextInputWrapper = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-content: center;
-
-  &:focus-within {
-    ${Adornment} {
-      outline: none;
-      ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1)}
-    }
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextInputstyled__TextInputWrapper",
+  componentId: "sc-11se2z5-1"
+})(["display:flex;align-content:center;&:focus-within{", "{outline:none;", "}}"], Adornment, props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1));
 const InputIconContainer = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  opacity: 0;
-  pointer-events: none;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-  padding-right: 4px;
-  padding-left: 30px;
-  display: flex;
-  align-items: center;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  color: ${props => props.theme.getColor('gray-400')};
-
-  ${props => props.$warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43')}
-
-  ${props => props.$error && props.theme.themeProp('color', '#CB968F', '#CB968F')}
-
-  > svg {
-    width: 12px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextInputstyled__InputIconContainer",
+  componentId: "sc-11se2z5-2"
+})(["opacity:0;pointer-events:none;border-top-right-radius:3px;border-bottom-right-radius:3px;padding-right:4px;padding-left:30px;display:flex;align-items:center;position:absolute;right:0;top:0;bottom:0;color:", ";", " ", " > svg{width:12px;}"], props => props.theme.getColor('gray-400'), props => props.$warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43'), props => props.$error && props.theme.themeProp('color', '#CB968F', '#CB968F'));
 const TextInputField = styled.input.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: block;
-  width: 100%;
-  font-family: inherit;
-  font-size: 0.875rem;
-  line-height: 1;
-  padding: 13px 10px;
-  border-radius: 3px;
-  box-sizing: border-box;
-  appearance: none;
-  transition: border-color 350ms;
-  height: 2.75rem !important;
-  margin-bottom: 0;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
-  ${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
-  border: 1px solid;
-  ${props => props.$noBorder || props.readOnly ? 'border-color: transparent !important' : props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'))};
-
-  ${props => props.readOnly && css`
-      user-select: text;
-      cursor: default;
-    `}
-
-  ${props => props.$warning && css`
-      border-color: ${props.theme.getColor('orange-500')} !important;
-    `}
-  ${props => props.$error && css`
-      border-color: ${props.theme.getColor('red-500')} !important;
-    `}
-  ${props => props.$hasIcon && css`
-      padding-left: 35px;
-    `}
-
-  &::placeholder {
-    ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1)}
-
-    ${props => props.theme.themeProp('opacity', 0.6, 0.5, 1)}
-  }
-  &:focus {
-    outline: none !important;
-    box-shadow: none !important;
-   ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-600'))}
-    ${props => props.readOnly && css`
-        outline: none;
-      `}
-  }
-  &&:hover:not(:focus) {
-    ${props => props.$noBorder ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')) : props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))};
-    transition: background 350ms;
-    & + ${InputIconContainer} {
-      opacity: 1;
-      transition: opacity 350ms;
-    }
-  }
-
-
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextInputstyled__TextInputField",
+  componentId: "sc-11se2z5-3"
+})(["display:block;width:100%;font-family:inherit;font-size:0.875rem;line-height:1;padding:13px 10px;border-radius:3px;box-sizing:border-box;appearance:none;transition:border-color 350ms;height:2.75rem !important;margin-bottom:0;", " ", " border:1px solid;", ";", " ", " ", " ", " &::placeholder{", " ", "}&:focus{outline:none !important;box-shadow:none !important;", " ", "}&&:hover:not(:focus){", ";transition:background 350ms;& + ", "{opacity:1;transition:opacity 350ms;}}"], props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.$noBorder || props.readOnly ? 'border-color: transparent !important' : props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.readOnly && css(["user-select:text;cursor:default;"]), props => props.$warning && css(["border-color:", " !important;"], props.theme.getColor('orange-500')), props => props.$error && css(["border-color:", " !important;"], props.theme.getColor('red-500')), props => props.$hasIcon && css(["padding-left:35px;"]), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1), props => props.theme.themeProp('opacity', 0.6, 0.5, 1), props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-600')), props => props.readOnly && css(["outline:none;"]), props => props.$noBorder ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')) : props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), InputIconContainer);
 const TextInputLabel = styled.label.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: absolute;
-  top: 15px;
-  left: 11px;
-  line-height: 1.2;
-  font-size: 0.875rem;
-  transition: all 150ms;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))}
-
-  ${props => props.theme.themeProp('opacity', 0.6, 0.5)}
-
-  ${props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`)}
-
-  ${props => (props.$hasPlaceholder || props.$hasAdornments) && css`
-      ${activeLabel};
-    `}
-
-  ${props => props.$hasIcon && css`
-      left: 35px;
-    `}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextInputstyled__TextInputLabel",
+  componentId: "sc-11se2z5-4"
+})(["position:absolute;top:15px;left:11px;line-height:1.2;font-size:0.875rem;transition:all 150ms;", " ", " ", " ", " ", ""], props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')), props => props.theme.themeProp('opacity', 0.6, 0.5), props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`), props => (props.$hasPlaceholder || props.$hasAdornments) && css(["", ";"], activeLabel), props => props.$hasIcon && css(["left:35px;"]));
 const TextInputFieldIcon = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 2.625rem;
-  display: flex;
-  padding: 0 10px;
-
-  svg {
-    width: 15px;
-    opacity: 0.6;
-    transition: opacity 250ms;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextInputstyled__TextInputFieldIcon",
+  componentId: "sc-11se2z5-5"
+})(["position:absolute;top:0;left:0;height:2.625rem;display:flex;padding:0 10px;svg{width:15px;opacity:0.6;transition:opacity 250ms;}"]);
 const TextInput = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: relative;
-
-  ${props => props.disabled && css`
-      user-select: none;
-      opacity: 0.5;
-      cursor: not-allowed;
-      > * {
-        pointer-events: none;
-      }
-    `}
-
-  &:focus-within {
-    ${TextInputLabel} {
-      ${activeLabel};
-    }
-
-    ${TextInputFieldIcon} {
-      svg {
-        opacity: 1;
-      }
-    }
-  }
-
-  ${TextInputField}:not(:placeholder-shown) + ${TextInputLabel} {
-    ${activeLabel};
-    ${props => props.$error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
-
-    ${props => props.$error && css`
-        color: ${props.theme.getColor('red-500')};
-      `}
-    ${props => props.$warning && css`
-        color: ${props.theme.getColor('orange-500')};
-      `} 
-  } 
-}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextInputstyled__TextInput",
+  componentId: "sc-11se2z5-6"
+})(["position:relative;", " &:focus-within{", "{", ";}", "{svg{opacity:1;}}}", ":not(:placeholder-shown) + ", "{", ";", " ", " ", "}}"], props => props.disabled && css(["user-select:none;opacity:0.5;cursor:not-allowed;> *{pointer-events:none;}"]), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, props => props.$error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')), props => props.$error && css(["color:", ";"], props.theme.getColor('red-500')), props => props.$warning && css(["color:", ";"], props.theme.getColor('orange-500')));
 const Description = styled.p.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  margin: 8px 0 0 0;
-  padding: 0 0.6875rem;
-  font-size: 0.75rem;
-  line-height: 1.333;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
-
-  ${props => props.$error && css`
-      ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
-    `}
-
-  ${props => props.$warning && css`
-      ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))}
-    `}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextInputstyled__Description",
+  componentId: "sc-11se2z5-7"
+})(["margin:8px 0 0 0;padding:0 0.6875rem;font-size:0.75rem;line-height:1.333;", ";", " ", ""], props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.$error && css(["", ""], props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))), props => props.$warning && css(["", ""], props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))));
 
 export { Adornment, Description, InputIconContainer, TextInput, TextInputField, TextInputFieldIcon, TextInputLabel, TextInputWrapper };
 //# sourceMappingURL=TextInput.styled.js.map

package/build/inputs/TextInput/TextInput.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.styled.js","sources":["../../../src/components/inputs/TextInput/TextInput.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst activeLabel = css`\n  font-size: 0.75rem;\n  padding: 0 3px;\n  top: -7px;\n  letter-spacing: 0.03em;\n  left: 8px !important;\n  opacity: 1 !important;\n`;\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Adornment = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  flex-shrink: 0;\n  font-family: inherit;\n  font-size: 0.875rem;\n  line-height: initial;\n  padding: 13px 10px;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-400'),\n      props.theme.getColor('gray-500')\n    )}\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('white')\n    )}\n  border: 1px solid;\n  ${props =>\n    props.theme.themeProp(\n      'border-color',\n      props.theme.getColor('gray-500'),\n      props.theme.getColor('gray-400')\n    )}\n  border-radius: 3px;\n  ${props =>\n    props.$isPrefix\n      ? css`\n          padding-right: 10px;\n          border-right: 0;\n          border-top-right-radius: 0;\n          border-bottom-right-radius: 0;\n        `\n      : css`\n          padding-left: 0;\n          margin-left: -3px;\n          border-left: 0;\n          border-top-left-radius: 0;\n          border-bottom-left-radius: 0;\n        `}\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n  height: 2.75rem;\n\n  ${props =>\n    props.$warning &&\n    css`\n      border-color: ${props.theme.getColor('orange-500')} !important;\n    `}\n  ${props =>\n    props.$error &&\n    css`\n      border-color: ${props.theme.getColor('red-500')} !important;\n    `}\n`;\n\nexport const TextInputWrapper = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-content: center;\n\n  &:focus-within {\n    ${Adornment} {\n      outline: none;\n      ${props =>\n        props.theme.themeProp(\n          'border-color',\n          props.theme.getColor('gray-600'),\n          props.theme.getColor('gray-600'),\n          1\n        )}\n    }\n  }\n`;\n\nexport const InputIconContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  opacity: 0;\n  pointer-events: none;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n  padding-right: 4px;\n  padding-left: 30px;\n  display: flex;\n  align-items: center;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  color: ${props => props.theme.getColor('gray-400')};\n\n  ${props => props.$warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43')}\n\n  ${props => props.$error && props.theme.themeProp('color', '#CB968F', '#CB968F')}\n\n  > svg {\n    width: 12px;\n  }\n`;\n\nexport const TextInputField = styled.input\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: block;\n  width: 100%;\n  font-family: inherit;\n  font-size: 0.875rem;\n  line-height: 1;\n  padding: 13px 10px;\n  border-radius: 3px;\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n  height: 2.75rem !important;\n  margin-bottom: 0;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )}\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('white')\n    )}\n  border: 1px solid;\n  ${props =>\n    props.$noBorder || props.readOnly\n      ? 'border-color: transparent !important'\n      : props.theme.themeProp(\n          'border-color',\n          props.theme.getColor('gray-500'),\n          props.theme.getColor('gray-400')\n        )};\n\n  ${props =>\n    props.readOnly &&\n    css`\n      user-select: text;\n      cursor: default;\n    `}\n\n  ${props =>\n    props.$warning &&\n    css`\n      border-color: ${props.theme.getColor('orange-500')} !important;\n    `}\n  ${props =>\n    props.$error &&\n    css`\n      border-color: ${props.theme.getColor('red-500')} !important;\n    `}\n  ${props =>\n    props.$hasIcon &&\n    css`\n      padding-left: 35px;\n    `}\n\n  &::placeholder {\n    ${props =>\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-300'),\n        props.theme.getColor('gray-600'),\n        1\n      )}\n\n    ${props => props.theme.themeProp('opacity', 0.6, 0.5, 1)}\n  }\n  &:focus {\n    outline: none !important;\n    box-shadow: none !important;\n   ${props =>\n     props.theme.themeProp(\n       'border-color',\n       props.theme.getColor('gray-400'),\n       props.theme.getColor('gray-600')\n     )}\n    ${props =>\n      props.readOnly &&\n      css`\n        outline: none;\n      `}\n  }\n  &&:hover:not(:focus) {\n    ${props =>\n      props.$noBorder\n        ? props.theme.themeProp(\n            'background',\n            props.theme.getColor('gray-700'),\n            props.theme.getColor('gray-200')\n          )\n        : props.theme.themeProp(\n            'background',\n            props.theme.getColor('gray-700'),\n            props.theme.getColor('gray-100')\n          )};\n    transition: background 350ms;\n    & + ${InputIconContainer} {\n      opacity: 1;\n      transition: opacity 350ms;\n    }\n  }\n\n\n`;\n\nexport const TextInputLabel = styled.label\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  position: absolute;\n  top: 15px;\n  left: 11px;\n  line-height: 1.2;\n  font-size: 0.875rem;\n  transition: all 150ms;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-600')\n    )}\n\n  ${props => props.theme.themeProp('opacity', 0.6, 0.5)}\n\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`,\n      `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`\n    )}\n\n  ${props =>\n    (props.$hasPlaceholder || props.$hasAdornments) &&\n    css`\n      ${activeLabel};\n    `}\n\n  ${props =>\n    props.$hasIcon &&\n    css`\n      left: 35px;\n    `}\n`;\n\nexport const TextInputFieldIcon = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 2.625rem;\n  display: flex;\n  padding: 0 10px;\n\n  svg {\n    width: 15px;\n    opacity: 0.6;\n    transition: opacity 250ms;\n  }\n`;\n\nexport const TextInput = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  position: relative;\n\n  ${props =>\n    props.disabled &&\n    css`\n      user-select: none;\n      opacity: 0.5;\n      cursor: not-allowed;\n      > * {\n        pointer-events: none;\n      }\n    `}\n\n  &:focus-within {\n    ${TextInputLabel} {\n      ${activeLabel};\n    }\n\n    ${TextInputFieldIcon} {\n      svg {\n        opacity: 1;\n      }\n    }\n  }\n\n  ${TextInputField}:not(:placeholder-shown) + ${TextInputLabel} {\n    ${activeLabel};\n    ${props =>\n      props.$error &&\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('red-200'),\n        props.theme.getColor('red-500')\n      )}\n\n    ${props =>\n      props.$error &&\n      css`\n        color: ${props.theme.getColor('red-500')};\n      `}\n    ${props =>\n      props.$warning &&\n      css`\n        color: ${props.theme.getColor('orange-500')};\n      `} \n  } \n}\n`;\n\nexport const Description = styled.p\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  margin: 8px 0 0 0;\n  padding: 0 0.6875rem;\n  font-size: 0.75rem;\n  line-height: 1.333;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-400'),\n      props.theme.getColor('gray-500')\n    )};\n\n  ${props =>\n    props.$error &&\n    css`\n      ${props.theme.themeProp(\n        'color',\n        props.theme.getColor('red-200'),\n        props.theme.getColor('red-500')\n      )}\n    `}\n\n  ${props =>\n    props.$warning &&\n    css`\n      ${props.theme.themeProp(\n        'color',\n        props.theme.getColor('red-200'),\n        props.theme.getColor('orange-500')\n      )}\n    `}\n`;\n"],"names":["activeLabel","css","shouldForwardProp","prop","startsWith","Adornment","styled","div","withConfig","attrs","applyDefaultTheme","props","theme","themeProp","getColor","$isPrefix","$warning","$error","TextInputWrapper","InputIconContainer","TextInputField","input","$noBorder","readOnly","$hasIcon","TextInputLabel","label","$hasPlaceholder","$hasAdornments","TextInputFieldIcon","TextInput","disabled","Description","p"],"mappings":"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"}
+{"version":3,"file":"TextInput.styled.js","sources":["../../../src/components/inputs/TextInput/TextInput.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n/*\n * A module-scope `css` helper with NO INTERPOLATIONS AT ALL, so it has no props and\n * takes no generic — and, unlike `CompactTextInput`'s `linkColor`, it is not subject to\n * the weak-type rule either: `RuleSet<object>` has nothing to overlap with, so it drops\n * into all three of its hosts (`TextInputLabel` and, twice, `TextInput`) unchanged.\n * §J.7, last paragraph.\n */\nconst activeLabel = css`\n  font-size: 0.75rem;\n  padding: 0 3px;\n  top: -7px;\n  letter-spacing: 0.03em;\n  left: 8px !important;\n  opacity: 1 !important;\n`;\n\n/*\n * Single-argument, and it stays that way — peer floor `styled-components: >=5.1.0`\n * and the two majors disagree on the second parameter. Rules in\n * `layout/SectionSeparator/SectionSeparator.styled.ts`, derivation in\n * `scripts/TS-MIGRATION-PLAYBOOK.md` §J.4. `prop` needs the annotation because\n * `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\n/**\n * The validation pair that five of this file's seven styled components carry.\n *\n * `boolean` for both, and NOT the `bool | string` that `error`'s and `warning`'s own\n * propTypes allow: `TextInput.tsx` derives `hasError` / `hasWarning`\n * (`isBoolean(x) ? x : !isEmpty(x)`) and passes those, keeping the message text for\n * `Description`'s children. §J.6, rule 2 — the JSX site says which value arrives.\n */\nexport interface ValidationStyleProps {\n  /** `hasError` — red border / red message. */\n  $error?: boolean;\n  /** `hasWarning` — orange border / orange message. */\n  $warning?: boolean;\n}\n\n/*\n * `Adornment` IS ALSO PASSED `htmlFor`, AND THAT IS A DEFECT — recorded here, not fixed\n * here, and not declared because this template never reads it.\n *\n * `TextInput.tsx` renders the PREFIX adornment as\n * `<S.Adornment htmlFor={`text-input-${uniqueId}`} …>` (the suffix one, 50 lines below,\n * has no `htmlFor`) — but this is a `styled.div`, `htmlFor` has no `$`, and\n * `shouldForwardProp` forwards it, so React emits `for=\"text-input-…\"` ON A `<div>`.\n * That attribute is meaningless outside `<label>`/`<output>` and it is in the recorded\n * render baseline. The click-to-focus this was reaching for is already implemented by\n * the `onClick` handler next to it. The fix — make it a `styled.label`, or drop the\n * prop — changes the rendered DOM either way, so it belongs to C10 with its baseline\n * re-record. §E.4 third case.\n */\nexport const Adornment = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<\n    ValidationStyleProps & {\n      /**\n       * `true` on the prefix adornment and `false` on the suffix one — the JSX passes\n       * both literals explicitly, so this is `boolean` and the `else` arm is live.\n       */\n      $isPrefix?: boolean;\n    }\n  >(applyDefaultTheme)`\n  flex-shrink: 0;\n  font-family: inherit;\n  font-size: 0.875rem;\n  line-height: initial;\n  padding: 13px 10px;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-400'),\n      props.theme.getColor('gray-500')\n    )}\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('white')\n    )}\n  border: 1px solid;\n  ${props =>\n    props.theme.themeProp(\n      'border-color',\n      props.theme.getColor('gray-500'),\n      props.theme.getColor('gray-400')\n    )}\n  border-radius: 3px;\n  ${props =>\n    props.$isPrefix\n      ? css`\n          padding-right: 10px;\n          border-right: 0;\n          border-top-right-radius: 0;\n          border-bottom-right-radius: 0;\n        `\n      : css`\n          padding-left: 0;\n          margin-left: -3px;\n          border-left: 0;\n          border-top-left-radius: 0;\n          border-bottom-left-radius: 0;\n        `}\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n  height: 2.75rem;\n\n  ${props =>\n    props.$warning &&\n    css`\n      border-color: ${props.theme.getColor('orange-500')} !important;\n    `}\n  ${props =>\n    props.$error &&\n    css`\n      border-color: ${props.theme.getColor('red-500')} !important;\n    `}\n`;\n\nexport const TextInputWrapper = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-content: center;\n\n  &:focus-within {\n    ${Adornment} {\n      outline: none;\n      ${props =>\n        props.theme.themeProp(\n          'border-color',\n          props.theme.getColor('gray-600'),\n          props.theme.getColor('gray-600'),\n          1\n        )}\n    }\n  }\n`;\n\nexport const InputIconContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<ValidationStyleProps>(applyDefaultTheme)`\n  opacity: 0;\n  pointer-events: none;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n  padding-right: 4px;\n  padding-left: 30px;\n  display: flex;\n  align-items: center;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  color: ${props => props.theme.getColor('gray-400')};\n\n  ${props => props.$warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43')}\n\n  ${props => props.$error && props.theme.themeProp('color', '#CB968F', '#CB968F')}\n\n  > svg {\n    width: 12px;\n  }\n`;\n\n/*\n * `readOnly` is read three times below and is deliberately NOT declared: on a\n * `styled.input` it is a genuine `InputHTMLAttributes` member, so the reads already\n * typecheck and the attribute belongs on the element. §J.9, first row — the case that\n * costs nothing. (On `Radio`'s and `Switch`'s roots the same name IS a defect, because\n * those are a `<label>` and a `<div>`.)\n */\nexport const TextInputField = styled.input\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<\n    ValidationStyleProps & {\n      /** `noBorder` — `PropTypes.bool`, component default `false`. */\n      $noBorder?: boolean;\n      /** `Boolean(icon)` — derived, so `boolean` and not `icon`'s element type. */\n      $hasIcon?: boolean;\n    }\n  >(applyDefaultTheme)`\n  display: block;\n  width: 100%;\n  font-family: inherit;\n  font-size: 0.875rem;\n  line-height: 1;\n  padding: 13px 10px;\n  border-radius: 3px;\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n  height: 2.75rem !important;\n  margin-bottom: 0;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )}\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('white')\n    )}\n  border: 1px solid;\n  ${props =>\n    props.$noBorder || props.readOnly\n      ? 'border-color: transparent !important'\n      : props.theme.themeProp(\n          'border-color',\n          props.theme.getColor('gray-500'),\n          props.theme.getColor('gray-400')\n        )};\n\n  ${props =>\n    props.readOnly &&\n    css`\n      user-select: text;\n      cursor: default;\n    `}\n\n  ${props =>\n    props.$warning &&\n    css`\n      border-color: ${props.theme.getColor('orange-500')} !important;\n    `}\n  ${props =>\n    props.$error &&\n    css`\n      border-color: ${props.theme.getColor('red-500')} !important;\n    `}\n  ${props =>\n    props.$hasIcon &&\n    css`\n      padding-left: 35px;\n    `}\n\n  &::placeholder {\n    ${props =>\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-300'),\n        props.theme.getColor('gray-600'),\n        1\n      )}\n\n    ${props => props.theme.themeProp('opacity', 0.6, 0.5, 1)}\n  }\n  &:focus {\n    outline: none !important;\n    box-shadow: none !important;\n   ${props =>\n     props.theme.themeProp(\n       'border-color',\n       props.theme.getColor('gray-400'),\n       props.theme.getColor('gray-600')\n     )}\n    ${props =>\n      props.readOnly &&\n      css`\n        outline: none;\n      `}\n  }\n  &&:hover:not(:focus) {\n    ${props =>\n      props.$noBorder\n        ? props.theme.themeProp(\n            'background',\n            props.theme.getColor('gray-700'),\n            props.theme.getColor('gray-200')\n          )\n        : props.theme.themeProp(\n            'background',\n            props.theme.getColor('gray-700'),\n            props.theme.getColor('gray-100')\n          )};\n    transition: background 350ms;\n    & + ${InputIconContainer} {\n      opacity: 1;\n      transition: opacity 350ms;\n    }\n  }\n\n\n`;\n\n/*\n * `TextInput.tsx` ALSO passes `$error` here and this template never reads it — a dead\n * pass, so it is NOT declared (rule 2: declare only what is read). It is harmless\n * rather than a DOM leak, because the `$` keeps it out of the DOM; the error colouring\n * of this label is done by the parent's\n * `${TextInputField}:not(:placeholder-shown) + ${TextInputLabel}` block instead. Fix\n * (type-only, but out of this bucket's scope): stop passing it.\n */\nexport const TextInputLabel = styled.label\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<{\n    /** `Boolean(placeholder)` — floats the label out of the field. */\n    $hasPlaceholder?: boolean;\n    /** `Boolean(prefix || suffix)` — same effect, for the adornment case. */\n    $hasAdornments?: boolean;\n    /** `Boolean(icon)` — shifts the label right of the icon. */\n    $hasIcon?: boolean;\n  }>(applyDefaultTheme)`\n  position: absolute;\n  top: 15px;\n  left: 11px;\n  line-height: 1.2;\n  font-size: 0.875rem;\n  transition: all 150ms;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-600')\n    )}\n\n  ${props => props.theme.themeProp('opacity', 0.6, 0.5)}\n\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`,\n      `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`\n    )}\n\n  ${props =>\n    (props.$hasPlaceholder || props.$hasAdornments) &&\n    css`\n      ${activeLabel};\n    `}\n\n  ${props =>\n    props.$hasIcon &&\n    css`\n      left: 35px;\n    `}\n`;\n\nexport const TextInputFieldIcon = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 2.625rem;\n  display: flex;\n  padding: 0 10px;\n\n  svg {\n    width: 15px;\n    opacity: 0.6;\n    transition: opacity 250ms;\n  }\n`;\n\n/*\n * `disabled` HAS NO `$`, AND THAT IS A DEFECT — declared here, not fixed here.\n *\n * `TextInput.tsx` renders `<S.TextInput $error=… disabled={disabled} $warning=… …>` on a\n * `styled.div`; `disabled` is not a member of `HTMLAttributes<HTMLDivElement>`, which is\n * why the read below was TS2339, and `shouldForwardProp` forwards every non-`$` prop, so\n * `disabled=\"\"` is on the rendered wrapper `<div>` today and is in the recorded render\n * baseline. The fix is to rename it `$disabled` at both ends; that removes a DOM\n * attribute, so it belongs to C10 with its baseline re-record and must not ride along in\n * a type-only commit. §E.4 third case, §J.9.\n */\nexport const TextInput = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<\n    ValidationStyleProps & {\n      /** `disabled` — `PropTypes.bool`. Leaks to the DOM; see above. */\n      disabled?: boolean;\n    }\n  >(applyDefaultTheme)`\n  position: relative;\n\n  ${props =>\n    props.disabled &&\n    css`\n      user-select: none;\n      opacity: 0.5;\n      cursor: not-allowed;\n      > * {\n        pointer-events: none;\n      }\n    `}\n\n  &:focus-within {\n    ${TextInputLabel} {\n      ${activeLabel};\n    }\n\n    ${TextInputFieldIcon} {\n      svg {\n        opacity: 1;\n      }\n    }\n  }\n\n  ${TextInputField}:not(:placeholder-shown) + ${TextInputLabel} {\n    ${activeLabel};\n    ${props =>\n      props.$error &&\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('red-200'),\n        props.theme.getColor('red-500')\n      )}\n\n    ${props =>\n      props.$error &&\n      css`\n        color: ${props.theme.getColor('red-500')};\n      `}\n    ${props =>\n      props.$warning &&\n      css`\n        color: ${props.theme.getColor('orange-500')};\n      `} \n  } \n}\n`;\n\nexport const Description = styled.p\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<ValidationStyleProps>(applyDefaultTheme)`\n  margin: 8px 0 0 0;\n  padding: 0 0.6875rem;\n  font-size: 0.75rem;\n  line-height: 1.333;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-400'),\n      props.theme.getColor('gray-500')\n    )};\n\n  ${props =>\n    props.$error &&\n    css`\n      ${props.theme.themeProp(\n        'color',\n        props.theme.getColor('red-200'),\n        props.theme.getColor('red-500')\n      )}\n    `}\n\n  ${props =>\n    props.$warning &&\n    css`\n      ${props.theme.themeProp(\n        'color',\n        props.theme.getColor('red-200'),\n        props.theme.getColor('orange-500')\n      )}\n    `}\n`;\n"],"names":["activeLabel","css","shouldForwardProp","prop","startsWith","Adornment","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","theme","themeProp","getColor","$isPrefix","$warning","$error","TextInputWrapper","InputIconContainer","TextInputField","input","$noBorder","readOnly","$hasIcon","TextInputLabel","label","$hasPlaceholder","$hasAdornments","TextInputFieldIcon","TextInput","disabled","Description","p"],"mappings":";;;AAUA,MAAMA,WAAW,GAAGC,GAAG,CAAA,CAAA,0GAAA,CAAA,CAOtB;AASD,MAAMC,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AA+BM,MAAMC,SAAS,GAAGC,MAAM,CAACC,GAAG,CAChCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAQJC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,4BAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,6FAAA,EAAA,GAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,sFAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAOlBC,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,EACDH,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,YAAY,EACZF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,OAAO,CAC9B,CAAC,EAEDH,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,cAAc,EACdF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,EAEDH,KAAK,IACLA,KAAK,CAACI,SAAS,GACXhB,GAAG,CAAA,CAAA,2FAAA,CAAA,CAAA,GAMHA,GAAG,CAAA,CAAA,qGAAA,CAAA,CAMF,EAMLY,KAAK,IACLA,KAAK,CAACK,QAAQ,IACdjB,GAAG,CAAA,CAAA,eAAA,EAAA,cAAA,CAAA,EACeY,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,YAAY,CAAC,CACnD,EACDH,KAAK,IACLA,KAAK,CAACM,MAAM,IACZlB,GAAG,oCACeY,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,CAChD;AAGE,MAAMI,gBAAgB,GAAGd,MAAM,CAACC,GAAG,CACvCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mDAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,EAKrBP,SAAS,EAEPQ,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,cAAc,EACdF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChC,CACF,CAAC;AAKF,MAAMK,kBAAkB,GAAGf,MAAM,CAACC,GAAG,CACzCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAAuBC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,8MAAA,EAAA,GAAA,EAAA,GAAA,EAAA,qBAAA,CAAA,EAatCC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAEhDH,KAAK,IAAIA,KAAK,CAACK,QAAQ,IAAIL,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,EAE/EF,KAAK,IAAIA,KAAK,CAACM,MAAM,IAAIN,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;AAc1E,MAAMO,cAAc,GAAGhB,MAAM,CAACiB,KAAK,CACvCf,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAOJC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,iCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,kOAAA,EAAA,GAAA,EAAA,oBAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,kBAAA,EAAA,GAAA,EAAA,8DAAA,EAAA,GAAA,EAAA,wBAAA,EAAA,mCAAA,EAAA,wCAAA,CAAA,EAalBC,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,EACDH,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,YAAY,EACZF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,OAAO,CAC9B,CAAC,EAEDH,KAAK,IACLA,KAAK,CAACW,SAAS,IAAIX,KAAK,CAACY,QAAQ,GAC7B,sCAAsC,GACtCZ,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,cAAc,EACdF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,EAELH,KAAK,IACLA,KAAK,CAACY,QAAQ,IACdxB,GAAG,CAAA,CAAA,kCAAA,CAAA,CAGF,EAEDY,KAAK,IACLA,KAAK,CAACK,QAAQ,IACdjB,GAAG,CAAA,CAAA,eAAA,EAAA,cAAA,CAAA,EACeY,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,YAAY,CAAC,CACnD,EACDH,KAAK,IACLA,KAAK,CAACM,MAAM,IACZlB,GAAG,CAAA,CAAA,eAAA,EAAA,cAAA,CAAA,EACeY,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,CAChD,EACDH,KAAK,IACLA,KAAK,CAACa,QAAQ,IACdzB,GAAG,CAAA,CAAA,oBAAA,CAAA,CAEF,EAGCY,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChC,CACF,CAAC,EAEDH,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAKvDF,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,cAAc,EACdF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,EACAH,KAAK,IACLA,KAAK,CAACY,QAAQ,IACdxB,GAAG,mBAEF,EAGDY,KAAK,IACLA,KAAK,CAACW,SAAS,GACXX,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,YAAY,EACZF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,GACDH,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,YAAY,EACZF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,EAEDK,kBAAkB;AAiBrB,MAAMM,cAAc,GAAGrB,MAAM,CAACsB,KAAK,CACvCpB,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAOHC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,iCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,+FAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAQnBC,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,EAEDH,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,EAEnDF,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,YAAY,EACZ,CAAA,sBAAA,EAAyBF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,oCAAoC,EAC7F,CAAA,sBAAA,EAAyBH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,OAAO,CAAC,CAAA,kCAAA,CACxD,CAAC,EAEDH,KAAK,IACL,CAACA,KAAK,CAACgB,eAAe,IAAIhB,KAAK,CAACiB,cAAc,KAC9C7B,GAAG,YACCD,WAAW,CACd,EAEDa,KAAK,IACLA,KAAK,CAACa,QAAQ,IACdzB,GAAG,CAAA,CAAA,YAAA,CAAA,CAEF;AAGE,MAAM8B,kBAAkB,GAAGzB,MAAM,CAACC,GAAG,CACzCC,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,kIAAA,CAAA;AA0BpB,MAAMoB,SAAS,GAAG1B,MAAM,CAACC,GAAG,CAChCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAKJC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,4BAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,EAAA,kBAAA,EAAA,GAAA,EAAA,IAAA,EAAA,oBAAA,EAAA,6BAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,IAAA,CAAA,EAGlBC,KAAK,IACLA,KAAK,CAACoB,QAAQ,IACdhC,GAAG,CAAA,CAAA,2EAAA,CAAA,CAOF,EAGC0B,cAAc,EACZ3B,WAAW,EAGb+B,kBAAkB,EAOpBT,cAAc,EAA8BK,cAAc,EACxD3B,WAAW,EACXa,KAAK,IACLA,KAAK,CAACM,MAAM,IACZN,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,EAC/BH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAChC,CAAC,EAEDH,KAAK,IACLA,KAAK,CAACM,MAAM,IACZlB,GAAG,kBACQY,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,CACzC,EACDH,KAAK,IACLA,KAAK,CAACK,QAAQ,IACdjB,GAAG,kBACQY,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,YAAY,CAAC,CAC5C;AAKA,MAAMkB,WAAW,GAAG5B,MAAM,CAAC6B,CAAC,CAChC3B,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAAuBC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,2EAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAM7CC,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,EAEDH,KAAK,IACLA,KAAK,CAACM,MAAM,IACZlB,GAAG,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA,EACCY,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,EAC/BH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAChC,CAAC,CACF,EAEDH,KAAK,IACLA,KAAK,CAACK,QAAQ,IACdjB,GAAG,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA,EACCY,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,EAC/BH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,YAAY,CACnC,CAAC,CACF;;;;"}

package/build/layout/InputGroup/InputGroup.js

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

package/build/layout/InputGroup/InputGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.js","sources":["../../../src/components/layout/InputGroup/InputGroup.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './InputGroup.styled';\n\n/**\n * Wrapper component to visually group related inputs by adding space above/below the group.\n *\n * ### Import\n *\n * ``` js\n * import { InputGroup } from '@ntbjs/react-components/layout'\n * // or\n * import InputGroup from '@ntbjs/react-components/layout/InputGroup'\n * ```\n *\n * ### Usage example\n * Pass an array of input elements to the `InputGroup` as its children:\n *\n * ``` js\nconst item1 = <CompactTextInput label=\"Size\" type=\"text\" value=\"4369 x 2913 px\" />;\nconst item2 = <CompactTextInput label=\"Resolution\" type=\"text\" value=\"300 dpi 37.0 x 24.7 cm px\" />;\nconst item3 = <CompactTextInput label=\"File size\" type=\"text\" value=\"7.22 MB\" />;\n\nconst inputGroup = <InputGroup>{[item1, item2, item3, item4]}</InputGroup>;\n * ```\n */\nconst InputGroup = React.forwardRef(function InputGroup({ children, ...props }, forwardedRef) {\n  return (\n    <S.InputGroup ref={forwardedRef} {...props}>\n      {children}\n    </S.InputGroup>\n  );\n});\n\nInputGroup.propTypes = {\n  /**\n   * An array of inputs – e.g. `<CompactTextInput>`\n   */\n  children: PropTypes.node\n};\n\nInputGroup.defaultProps = {};\n\nexport default InputGroup;\n"],"names":["InputGroup","React","forwardRef","children","props","forwardedRef","createElement","S","_extends","ref","propTypes","process","env","NODE_ENV","PropTypes","node","defaultProps"],"mappings":";;;;;AA0BMA,MAAAA,UAAU,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,UAAUA,CAAC;EAAEG,QAAQ;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAAEC,YAAY,EAAE;EAC5F,OACEJ,cAAA,CAAAK,aAAA,CAACC,YAAY,EAAAC,QAAA,CAAA;AAACC,IAAAA,GAAG,EAAEJ,YAAAA;GAAkBD,EAAAA,KAAK,CACvCD,EAAAA,QACW,CAAC,CAAA;AAEnB,CAAC,EAAC;AAEFH,UAAU,CAACU,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAIrBV,QAAQ,EAAEW,SAAS,CAACC,IAAAA;AACtB,CAAC,GAAA,EAAA,CAAA;AAEDf,UAAU,CAACgB,YAAY,GAAG,EAAE;;;;"}
+{"version":3,"file":"InputGroup.js","sources":["../../../src/components/layout/InputGroup/InputGroup.tsx"],"sourcesContent":["import React from 'react';\nimport * as S from './InputGroup.styled';\n\ntype InputGroupOwnProps = {\n  /**\n   * An array of inputs – e.g. `<CompactTextInput>`\n   */\n  children?: React.ReactNode;\n};\n\n/*\n * NMB-3998 §C.2: `props` is spread onto `S.InputGroup`, 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 InputGroupOwnProps`);\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.InputGroup>, keyof InputGroupOwnProps> &\n  InputGroupOwnProps;\n\n/**\n * Wrapper component to visually group related inputs by adding space above/below the group.\n *\n * ### Import\n *\n * ``` js\n * import { InputGroup } from '@ntbjs/react-components/layout'\n * // or\n * import InputGroup from '@ntbjs/react-components/layout/InputGroup'\n * ```\n *\n * ### Usage example\n * Pass an array of input elements to the `InputGroup` as its children:\n *\n * ``` js\nconst item1 = <CompactTextInput label=\"Size\" type=\"text\" value=\"4369 x 2913 px\" />;\nconst item2 = <CompactTextInput label=\"Resolution\" type=\"text\" value=\"300 dpi 37.0 x 24.7 cm px\" />;\nconst item3 = <CompactTextInput label=\"File size\" type=\"text\" value=\"7.22 MB\" />;\n\nconst inputGroup = <InputGroup>{[item1, item2, item3, item4]}</InputGroup>;\n * ```\n */\nconst InputGroup = React.forwardRef<any, Props>(function InputGroup(\n  { children, ...props },\n  forwardedRef\n) {\n  return (\n    <S.InputGroup ref={forwardedRef} {...props}>\n      {children}\n    </S.InputGroup>\n  );\n});\n\nexport default InputGroup;\n"],"names":["InputGroup","React","forwardRef","children","props","forwardedRef","_jsx","S","ref"],"mappings":";;;;AA0CA,MAAMA,UAAU,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,UAAUA,CACjE;EAAEG,QAAQ;EAAE,GAAGC;AAAM,CAAC,EACtBC,YAAY,EACZ;AACA,EAAA,OACEC,GAAA,CAACC,YAAY,EAAA;AAACC,IAAAA,GAAG,EAAEH,YAAa;AAAA,IAAA,GAAKD,KAAK;AAAAD,IAAAA,QAAA,EACvCA;AAAQ,GACG,CAAC;AAEnB,CAAC;;;;"}

package/build/layout/InputGroup/InputGroup.styled.js

@@ -6,9 +6,10 @@ const shouldForwardProp = prop => {
 };
 const InputGroup = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  margin: 8px 0;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "InputGroupstyled__InputGroup",
+  componentId: "sc-pf7v2r-0"
+})(["margin:8px 0;"]);
 
 export { InputGroup };
 //# sourceMappingURL=InputGroup.styled.js.map

package/build/layout/InputGroup/InputGroup.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.styled.js","sources":["../../../src/components/layout/InputGroup/InputGroup.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 InputGroup = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  margin: 8px 0;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","InputGroup","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,UAAU,GAAGC,MAAM,CAACC,GAAG,CACjCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;;;;"}
+{"version":3,"file":"InputGroup.styled.js","sources":["../../../src/components/layout/InputGroup/InputGroup.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 GENERIC HERE, AND THAT IS THE CORRECT OUTCOME, NOT AN OMISSION. The single template\n * below is one static declaration with no interpolation at all, and `InputGroup.tsx`\n * passes nothing but `children` and a `{...props}` spread. Rule 2: declare only what the\n * component actually passes. This file entered the styled-generics bucket at 0 errors and\n * the only change it needs is the `shouldForwardProp` parameter annotation.\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. §J.4. `prop` needs the annotation\n * because `withConfig` takes this by reference, so it gets no contextual typing and\n * `prop.startsWith` would otherwise go unchecked.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const InputGroup = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  margin: 8px 0;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","InputGroup","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId"],"mappings":";;;AAoBA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAEM,MAAMC,UAAU,GAAGC,MAAM,CAACC,GAAG,CACjCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,eAAA,CAAA;;;;"}

package/build/layout/InputGroup/index.js

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

package/build/layout/InputGroup/index.js.map

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

package/build/layout/SectionSeparator/SectionSeparator.js

@@ -1,23 +1,19 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import { SectionSeparator as SectionSeparator$1 } from './SectionSeparator.styled.js';
+import { jsx } from 'react/jsx-runtime';
 
 const SectionSeparator = React__default.forwardRef(function SectionSeparator({
   vertical = false,
   margin = 0,
   ...props
 }, forwardedRef) {
-  return React__default.createElement(SectionSeparator$1, _extends({
+  return jsx(SectionSeparator$1, {
     $vertical: vertical,
     $margin: margin,
-    ref: forwardedRef
-  }, props));
+    ref: forwardedRef,
+    ...props
+  });
 });
-SectionSeparator.propTypes = process.env.NODE_ENV !== "production" ? {
-  vertical: PropTypes.bool,
-  margin: PropTypes.number
-} : {};
 
 export { SectionSeparator as default };
 //# sourceMappingURL=SectionSeparator.js.map

package/build/layout/SectionSeparator/SectionSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionSeparator.js","sources":["../../../src/components/layout/SectionSeparator/SectionSeparator.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './SectionSeparator.styled';\n\n/**\n * Section separators are used to separate sections in the UI.\n * It will fill 100% of the width or height of its parent container by default.\n *\n *\n * ### Import\n *\n * ``` js\n * import { SectionSeparator } from '@ntbjs/react-components/layout'\n * // or\n * import SectionSeparator from '@ntbjs/react-components/layout/SectionSeparator'\n * ```\n *\n */\nconst SectionSeparator = React.forwardRef(function SectionSeparator(\n  { vertical = false, margin = 0, ...props },\n  forwardedRef\n) {\n  return <S.SectionSeparator $vertical={vertical} $margin={margin} ref={forwardedRef} {...props} />;\n});\n\nSectionSeparator.propTypes = {\n  /**\n   * Whether the section separator should be displayed vertically.\n   */\n  vertical: PropTypes.bool,\n  /**\n   * Padding in pixels to apply to the separator.\n   */\n  margin: PropTypes.number\n};\n\nexport default SectionSeparator;\n"],"names":["SectionSeparator","React","forwardRef","vertical","margin","props","forwardedRef","createElement","S","_extends","$vertical","$margin","ref","propTypes","process","env","NODE_ENV","PropTypes","bool","number"],"mappings":";;;;;AAkBMA,MAAAA,gBAAgB,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,gBAAgBA,CACjE;AAAEG,EAAAA,QAAQ,GAAG,KAAK;AAAEC,EAAAA,MAAM,GAAG,CAAC;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAC1CC,YAAY,EACZ;EACA,OAAOL,cAAA,CAAAM,aAAA,CAACC,kBAAkB,EAAAC,QAAA,CAAA;AAACC,IAAAA,SAAS,EAAEP,QAAS;AAACQ,IAAAA,OAAO,EAAEP,MAAO;AAACQ,IAAAA,GAAG,EAAEN,YAAAA;GAAkBD,EAAAA,KAAK,CAAG,CAAC,CAAA;AACnG,CAAC,EAAC;AAEFL,gBAAgB,CAACa,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAI3Bb,QAAQ,EAAEc,SAAS,CAACC,IAAI;EAIxBd,MAAM,EAAEa,SAAS,CAACE,MAAAA;AACpB,CAAC,GAAA,EAAA;;;;"}
+{"version":3,"file":"SectionSeparator.js","sources":["../../../src/components/layout/SectionSeparator/SectionSeparator.tsx"],"sourcesContent":["import React from 'react';\nimport * as S from './SectionSeparator.styled';\n\ntype SectionSeparatorOwnProps = {\n  /**\n   * Whether the section separator should be displayed vertically.\n   */\n  vertical?: boolean;\n  /**\n   * Padding in pixels to apply to the separator.\n   */\n  margin?: number;\n};\n\n/*\n * NMB-3998 §C.2: `props` is spread onto `S.SectionSeparator`, 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 SectionSeparatorOwnProps`);\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.SectionSeparator>,\n  keyof SectionSeparatorOwnProps\n> &\n  SectionSeparatorOwnProps;\n\n/**\n * Section separators are used to separate sections in the UI.\n * It will fill 100% of the width or height of its parent container by default.\n *\n *\n * ### Import\n *\n * ``` js\n * import { SectionSeparator } from '@ntbjs/react-components/layout'\n * // or\n * import SectionSeparator from '@ntbjs/react-components/layout/SectionSeparator'\n * ```\n *\n */\nconst SectionSeparator = React.forwardRef<any, Props>(function SectionSeparator(\n  { vertical = false, margin = 0, ...props },\n  forwardedRef\n) {\n  return <S.SectionSeparator $vertical={vertical} $margin={margin} ref={forwardedRef} {...props} />;\n});\n\nexport default SectionSeparator;\n"],"names":["SectionSeparator","React","forwardRef","vertical","margin","props","forwardedRef","_jsx","S","$vertical","$margin","ref"],"mappings":";;;;AAyCA,MAAMA,gBAAgB,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,gBAAgBA,CAC7E;AAAEG,EAAAA,QAAQ,GAAG,KAAK;AAAEC,EAAAA,MAAM,GAAG,CAAC;EAAE,GAAGC;AAAM,CAAC,EAC1CC,YAAY,EACZ;AACA,EAAA,OAAOC,GAAA,CAACC,kBAAkB,EAAA;AAACC,IAAAA,SAAS,EAAEN,QAAS;AAACO,IAAAA,OAAO,EAAEN,MAAO;AAACO,IAAAA,GAAG,EAAEL,YAAa;IAAA,GAAKD;AAAK,GAAG,CAAC;AACnG,CAAC;;;;"}

package/build/layout/SectionSeparator/SectionSeparator.styled.js

@@ -6,14 +6,10 @@ const shouldForwardProp = prop => {
 };
 const SectionSeparator = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  height: ${props => props.$vertical ? '100%' : '1px'};
-  width: ${props => props.$vertical ? '1px' : '100%'};
-
-  ${props => props.$vertical ? `margin-left: ${props.$margin}px; margin-right: ${props.$margin}px;` : `margin-top: ${props.$margin}px; margin-bottom: ${props.$margin}px;`}
-
-  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "SectionSeparatorstyled__SectionSeparator",
+  componentId: "sc-i4fg49-0"
+})(["height:", ";width:", ";", " ", ""], props => props.$vertical ? '100%' : '1px', props => props.$vertical ? '1px' : '100%', props => props.$vertical ? `margin-left: ${props.$margin}px; margin-right: ${props.$margin}px;` : `margin-top: ${props.$margin}px; margin-bottom: ${props.$margin}px;`, props => props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
 
 export { SectionSeparator };
 //# sourceMappingURL=SectionSeparator.styled.js.map

package/build/layout/SectionSeparator/SectionSeparator.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionSeparator.styled.js","sources":["../../../src/components/layout/SectionSeparator/SectionSeparator.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 SectionSeparator = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  height: ${props => (props.$vertical ? '100%' : '1px')};\n  width: ${props => (props.$vertical ? '1px' : '100%')};\n\n  ${props =>\n    props.$vertical\n      ? `margin-left: ${props.$margin}px; margin-right: ${props.$margin}px;`\n      : `margin-top: ${props.$margin}px; margin-bottom: ${props.$margin}px;`}\n\n  ${props =>\n    props.theme.themeProp(\n      'background-color',\n      props.theme.getColor('gray-500'),\n      props.theme.getColor('gray-200')\n    )}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","SectionSeparator","styled","div","withConfig","attrs","applyDefaultTheme","props","$vertical","$margin","theme","themeProp","getColor"],"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,gBAAgB,GAAGC,MAAM,CAACC,GAAG,CACvCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B,UAAYC,EAAAA,KAAK,IAAKA,KAAK,CAACC,SAAS,GAAG,MAAM,GAAG,KAAM,CAAA;AACvD,SAAWD,EAAAA,KAAK,IAAKA,KAAK,CAACC,SAAS,GAAG,KAAK,GAAG,MAAO,CAAA;AACtD;AACA,EAAID,EAAAA,KAAK,IACLA,KAAK,CAACC,SAAS,GACX,CAAgBD,aAAAA,EAAAA,KAAK,CAACE,OAAO,CAAqBF,kBAAAA,EAAAA,KAAK,CAACE,OAAO,CAAA,GAAA,CAAK,GACpE,CAAA,YAAA,EAAeF,KAAK,CAACE,OAAO,CAAsBF,mBAAAA,EAAAA,KAAK,CAACE,OAAO,CAAK,GAAA,CAAA,CAAA;AAC5E;AACA,EAAIF,EAAAA,KAAK,IACLA,KAAK,CAACG,KAAK,CAACC,SAAS,CACnB,kBAAkB,EAClBJ,KAAK,CAACG,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACG,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL;;;;"}
+{"version":3,"file":"SectionSeparator.styled.js","sources":["../../../src/components/layout/SectionSeparator/SectionSeparator.styled.ts"],"sourcesContent":["/**\n * ===========================================================================\n * THE `$`-TRANSIENT-PROP PATTERN — REFERENCE IMPLEMENTATION\n *\n * This is the smallest of the 36 `*.styled.ts` files that has transient props,\n * which is why the rules live here: they and the smallest instance of them fit\n * on one screen. Full derivation, measurements and the two illegal forms are in\n * `scripts/TS-MIGRATION-PLAYBOOK.md` §J. The other two worked examples are\n * `widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.styled.ts`\n * (chain shapes) and `inputs/CompactTextInput/CompactTextInput.styled.ts`\n * (`.attrs()` callbacks, nested `css` blocks, closed unions).\n *\n * 1. WHERE THE GENERIC GOES.\n *      chain has `.attrs()`  →  `.attrs<Props>(applyDefaultTheme)`\n *      chain has no `.attrs()`  →  on the tagged-template call:\n *                                  styled.img.withConfig({…})<Props>`…`\n *    NEVER `styled.div<Props>.withConfig({…})` — TS1477, an instantiation\n *    expression cannot be followed by a property access. NEVER\n *    `withConfig<Props>({…})` — TS2558, `withConfig` is not generic in v6\n *    (only `attrs` and the template call are).\n *\n *    When there IS an `.attrs()` this is not a preference: a generic on the\n *    template call does not reach the `.attrs()` CALLBACK's parameter, so a\n *    prop read in there has no fix other than a suppression. §J.2.\n *\n * 2. DECLARE ONLY WHAT THE COMPONENT ACTUALLY PASSES. Here `SectionSeparator.tsx`\n *    passes exactly `$vertical` and `$margin`. A key the template reads but the\n *    component never passes is a dead branch, not a prop — playbook §E.4.\n *\n * 3. EVERY TRANSIENT PROP IS OPTIONAL. `required` is not a stricter version of\n *    this, it is broken: `<X />`, `<X {...props} />` and `styled(X)` all become\n *    TS2769. It is also untrue — nothing supplies a default, because\n *    `applyDefaultTheme` contributes only `theme`. §J.5.\n *\n * 4. VALUE TYPES COME FROM `propTypes`, NOT FROM `any`. `vertical: PropTypes.bool`\n *    → `boolean`; `margin: PropTypes.number` → `number`. Closed unions elsewhere\n *    turn a mistyped state string into TS2367 instead of a branch that never\n *    fires. §J.6.\n *\n * 5. THIS CANNOT CHANGE RENDERED CSS. `shouldForwardProp` filters on the runtime\n *    `$` prefix and the annotations erase to nothing under Babel. `npm run verify`\n *    must stay green with `scripts/r19-harness/baseline.json` and all 592 PNGs\n *    byte-unchanged. If the render gate moves, a prop's DOM forwarding changed:\n *    investigate per §F.2, never re-record. §J.8.\n * ===========================================================================\n */\nimport styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n/**\n * Props of the styled root, i.e. `SectionSeparator.tsx`'s `vertical` / `margin`\n * carried across the `shouldForwardProp` boundary.\n */\nexport interface SectionSeparatorStyleProps {\n  /** `vertical` — swaps which axis gets the 1px hairline and which gets 100%. */\n  $vertical?: boolean;\n  /**\n   * `margin` — px, interpolated as `${props.$margin}px`, so `number` and not\n   * `number | string`: a string here would already render `margin-top: 8pxpx`.\n   */\n  $margin?: number;\n}\n\n/*\n * SINGLE-ARGUMENT, AND IT STAYS THAT WAY. `package.json#peerDependencies` allows\n * `styled-components: >=5.1.0`, and the second parameter differs between majors\n * (v6 `elementToBeCreated`, v5.1 `defaultValidatorFn`). A one-parameter function\n * is assignable to both, so this form is the only one correct on both — do not\n * annotate it as v6's `ShouldForwardProp<'web'>` and do not read a 2nd argument.\n *\n * `prop` needs the annotation because `withConfig` receives this BY REFERENCE and\n * so gives it no contextual typing; without it, `prop.startsWith` is unchecked.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const SectionSeparator = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<SectionSeparatorStyleProps>(applyDefaultTheme)`\n  height: ${props => (props.$vertical ? '100%' : '1px')};\n  width: ${props => (props.$vertical ? '1px' : '100%')};\n\n  ${props =>\n    props.$vertical\n      ? `margin-left: ${props.$margin}px; margin-right: ${props.$margin}px;`\n      : `margin-top: ${props.$margin}px; margin-bottom: ${props.$margin}px;`}\n\n  ${props =>\n    props.theme.themeProp(\n      'background-color',\n      props.theme.getColor('gray-500'),\n      props.theme.getColor('gray-200')\n    )}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","SectionSeparator","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","$vertical","$margin","theme","themeProp","getColor"],"mappings":";;;AAyEA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAEM,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,GAAG,CACvCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAA6BC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,0CAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,SAAA,EAAA,SAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAC3CC,KAAK,IAAKA,KAAK,CAACC,SAAS,GAAG,MAAM,GAAG,KAAM,EAC5CD,KAAK,IAAKA,KAAK,CAACC,SAAS,GAAG,KAAK,GAAG,MAAO,EAElDD,KAAK,IACLA,KAAK,CAACC,SAAS,GACX,CAAA,aAAA,EAAgBD,KAAK,CAACE,OAAO,CAAA,kBAAA,EAAqBF,KAAK,CAACE,OAAO,KAAK,GACpE,CAAA,YAAA,EAAeF,KAAK,CAACE,OAAO,CAAA,mBAAA,EAAsBF,KAAK,CAACE,OAAO,CAAA,GAAA,CAAK,EAExEF,KAAK,IACLA,KAAK,CAACG,KAAK,CAACC,SAAS,CACnB,kBAAkB,EAClBJ,KAAK,CAACG,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACG,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC;;;;"}

package/build/styles/utils/colors-export.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Hand-written types for colors-export.js.
+ *
+ * ============================ WHY BY HAND ================================
+ * NEVER DERIVE THIS FROM THE .js WITH `keyof typeof`.
+ *
+ * It works locally, because the library compiles with `allowJs`. It collapses
+ * silently in the consumer, which does not: with no `allowJs`, TypeScript cannot
+ * read colors-export.js at all, `keyof typeof colors` degrades to
+ * `string | number | symbol` WITH NO DIAGNOSTIC, and `colors[name]` inside a
+ * template string then emits TS2731 — an error in OUR file, appearing only in
+ * THEIR build. A hand-written .d.ts resolves under every `moduleResolution` mode
+ * with or without `allowJs`.
+ *
+ * The cost is that this is a THIRD hand-maintained copy of the palette, beside
+ * src/styles/.config.scss and colors-export.js. That is what
+ * `npm run verify:palette` (scripts/ts-migration/verify-palette.cjs) is for: it
+ * makes drift a build failure rather than a silent `undefined` at runtime. Add a
+ * colour to the .js and this union without the other and the gate names it.
+ * =========================================================================
+ *
+ * src/styles stays .js permanently (playbook §A.1) and rollup copies the whole
+ * directory verbatim into the published `styles/` and `build/styles/` trees, so
+ * this file ships NEXT TO its .js and
+ * `@ntbjs/react-components/styles/utils/colors-export` gains types where it
+ * previously resolved none. A `.d.ts` is explicitly allowed by
+ * scripts/assert-no-published-typescript.cjs for exactly this reason; a `.ts`
+ * there would be raw TypeScript in a published package.
+ */
+
+/**
+ * Every registered design-token colour name.
+ *
+ * `theme.getColor` takes this union, so `getColor('emerald-999')` is a compile
+ * error instead of a `throw` from inside a styled template at runtime.
+ */
+export type ColorName =
+  | 'orange-600'
+  | 'orange-500'
+  | 'orange-400'
+  | 'emerald-600'
+  | 'emerald-500'
+  | 'emerald-400'
+  | 'emerald-300'
+  | 'emerald-200'
+  | 'gray-900'
+  | 'gray-800'
+  | 'gray-700'
+  | 'gray-600'
+  | 'gray-500'
+  | 'gray-400'
+  | 'gray-300'
+  | 'gray-200'
+  | 'gray-100'
+  | 'gray-50'
+  | 'cercise-500'
+  | 'cercise-400'
+  | 'cercise-300'
+  | 'cercise-200'
+  | 'cercise-100'
+  | 'red-600'
+  | 'red-500'
+  | 'red-200'
+  | 'brown-500'
+  | 'signal-yellow-500'
+  | 'signal-yellow-400'
+  | 'signal-green-500'
+  | 'signal-green-400'
+  | 'black'
+  | 'white';
+
+/** The palette itself: every `ColorName` mapped to a `#rrggbb` string. */
+export declare const colors: Record<ColorName, string>;