@ntbjs/react-components 3.0.0-rc.1 → 3.0.0-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -0
- package/build/data/Alert/Alert.js.map +1 -1
- package/build/data/Alert/Alert.styled.js.map +1 -1
- package/build/data/Badge/Badge.js.map +1 -1
- package/build/data/Badge/Badge.styled.js.map +1 -1
- package/build/data/Popover/Popover.js.map +1 -1
- package/build/data/Popover/Popover.styled.js.map +1 -1
- package/build/data/SeverityBadge/SeverityBadge.js.map +1 -1
- package/build/data/Tab/Tab.js.map +1 -1
- package/build/data/Tab/Tab.styled.js.map +1 -1
- package/build/data/Tabs/Tabs.js.map +1 -1
- package/build/data/Tabs/Tabs.styled.js.map +1 -1
- package/build/data/Tooltip/Tooltip.js.map +1 -1
- package/build/data/Tooltip/Tooltip.styled.js.map +1 -1
- package/build/data/VerificationStatusIcon/VerificationStatusIcon.js.map +1 -1
- package/build/data/VerificationStatusIcon/VerificationStatusIcon.styled.js.map +1 -1
- package/build/data/_shared/FloatingArrow.styled.js.map +1 -1
- package/build/hooks/useEventListner.js.map +1 -1
- package/build/hooks/useFloatingPopover.js.map +1 -1
- package/build/hooks/useIsomorphicLayoutEffect.js.map +1 -1
- package/build/hooks/useOnClickOutside.js.map +1 -1
- package/build/hooks/useTooltipAutoShow.js.map +1 -1
- package/build/inputs/ActionButton/ActionButton.js.map +1 -1
- package/build/inputs/ActionButton/ActionButton.styled.js.map +1 -1
- package/build/inputs/Button/Button.js.map +1 -1
- package/build/inputs/Button/Button.styled.js.map +1 -1
- package/build/inputs/Checkbox/Checkbox.js.map +1 -1
- package/build/inputs/Checkbox/Checkbox.styled.js.map +1 -1
- package/build/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js.map +1 -1
- package/build/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.styled.js.map +1 -1
- package/build/inputs/CompactStarRating/CompactStarRating.js.map +1 -1
- package/build/inputs/CompactStarRating/CompactStarRating.styled.js.map +1 -1
- package/build/inputs/CompactTextInput/CompactTextInput.js.map +1 -1
- package/build/inputs/CompactTextInput/CompactTextInput.styled.js.map +1 -1
- package/build/inputs/MultiLevelCheckbox/MultiLevelCheckbox.js.map +1 -1
- package/build/inputs/MultiLevelCheckbox/MultiLevelCheckbox.styled.js.map +1 -1
- package/build/inputs/MultiLevelCheckbox/types.js.map +1 -1
- package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js.map +1 -1
- package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.styled.js.map +1 -1
- package/build/inputs/MultiSelect/MultiSelect.js.map +1 -1
- package/build/inputs/MultiSelect/MultiSelect.styled.js.map +1 -1
- package/build/inputs/Radio/Radio.js.map +1 -1
- package/build/inputs/Radio/Radio.styled.js.map +1 -1
- package/build/inputs/Switch/Switch.styled.js.map +1 -1
- package/build/inputs/TextArea/TextArea.js.map +1 -1
- package/build/inputs/TextArea/TextArea.styled.js.map +1 -1
- package/build/inputs/TextInput/TextInput.js.map +1 -1
- package/build/inputs/TextInput/TextInput.styled.js.map +1 -1
- package/build/layout/InputGroup/InputGroup.js.map +1 -1
- package/build/layout/InputGroup/InputGroup.styled.js.map +1 -1
- package/build/layout/SectionSeparator/SectionSeparator.js.map +1 -1
- package/build/layout/SectionSeparator/SectionSeparator.styled.js.map +1 -1
- package/build/styles/utils/colors-export.d.ts +6 -25
- package/build/utils/dateTime.js.map +1 -1
- package/build/utils/defaultTheme.js.map +1 -1
- package/build/utils/getElementRef.js.map +1 -1
- package/build/utils/parseTrigger.js.map +1 -1
- package/build/widgets/AssetAction/AssetAction.js.map +1 -1
- package/build/widgets/AssetAction/AssetAction.styled.js.map +1 -1
- package/build/widgets/AssetActionsBase/AssetActionsBase.js.map +1 -1
- package/build/widgets/AssetActionsBase/AssetActionsBase.styled.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGallery.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.styled.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js.map +1 -1
- package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js.map +1 -1
- package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenu.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenu.styled.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js.map +1 -1
- package/build/widgets/InfoCard/InfoCard.js.map +1 -1
- package/build/widgets/InfoCard/InfoCard.styled.js.map +1 -1
- package/build/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.js.map +1 -1
- package/build/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.styled.js.map +1 -1
- package/build/widgets/Instructions/Instructions.js.map +1 -1
- package/build/widgets/Instructions/Instructions.styled.js.map +1 -1
- package/build/widgets/ProgressBar/ProgressBar.js.map +1 -1
- package/build/widgets/ProgressBar/ProgressBar.styled.js.map +1 -1
- package/build/widgets/SummaryCard/SummaryCard.js.map +1 -1
- package/build/widgets/SummaryCard/SummaryCard.styled.js.map +1 -1
- package/package.json +8 -1
- package/styles/utils/colors-export.d.ts +6 -25
- package/types/components/data/Alert/Alert.styled.d.ts +6 -37
- package/types/components/data/Badge/Badge.d.ts +1 -9
- package/types/components/data/Badge/Badge.styled.d.ts +0 -99
- package/types/components/data/Popover/Popover.d.ts +11 -100
- package/types/components/data/Tab/Tab.d.ts +1 -14
- package/types/components/data/Tabs/Tabs.styled.d.ts +1 -17
- package/types/components/data/Tooltip/Tooltip.d.ts +4 -50
- package/types/components/data/VerificationStatusIcon/VerificationStatusIcon.styled.d.ts +3 -22
- package/types/components/data/_shared/FloatingArrow.styled.d.ts +1 -101
- package/types/components/inputs/ActionButton/ActionButton.styled.d.ts +2 -20
- package/types/components/inputs/Button/Button.styled.d.ts +0 -42
- package/types/components/inputs/Checkbox/Checkbox.d.ts +0 -9
- package/types/components/inputs/Checkbox/Checkbox.styled.d.ts +6 -10
- package/types/components/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.styled.d.ts +4 -57
- package/types/components/inputs/CompactStarRating/CompactStarRating.styled.d.ts +3 -55
- package/types/components/inputs/CompactTextInput/CompactTextInput.styled.d.ts +4 -32
- package/types/components/inputs/MultiLevelCheckbox/MultiLevelCheckbox.styled.d.ts +2 -10
- package/types/components/inputs/MultiLevelCheckbox/types.d.ts +3 -46
- package/types/components/inputs/MultiSelect/MultiSelect.d.ts +0 -57
- package/types/components/inputs/MultiSelect/MultiSelect.styled.d.ts +0 -65
- package/types/components/inputs/Radio/Radio.styled.d.ts +3 -3
- package/types/components/inputs/Switch/Switch.styled.d.ts +3 -7
- package/types/components/inputs/TextArea/TextArea.d.ts +0 -4
- package/types/components/inputs/TextArea/TextArea.styled.d.ts +5 -7
- package/types/components/inputs/TextInput/TextInput.styled.d.ts +1 -1
- package/types/components/layout/SectionSeparator/SectionSeparator.styled.d.ts +2 -9
- package/types/components/widgets/AssetAction/AssetAction.styled.d.ts +2 -7
- package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.d.ts +0 -12
- package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.d.ts +7 -55
- package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.d.ts +7 -43
- package/types/components/widgets/AssetGallery/asset.types.d.ts +31 -148
- package/types/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.d.ts +6 -20
- package/types/components/widgets/ContextMenu/ContextMenu.d.ts +1 -17
- package/types/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.d.ts +5 -13
- package/types/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.d.ts +0 -18
- package/types/components/widgets/InfoCard/InfoCard.styled.d.ts +2 -19
- package/types/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.styled.d.ts +9 -19
- package/types/components/widgets/Instructions/Instructions.styled.d.ts +2 -14
- package/types/components/widgets/ProgressBar/ProgressBar.styled.d.ts +6 -43
- package/types/components/widgets/SummaryCard/SummaryCard.styled.d.ts +7 -46
- package/types/hooks/useElementSize.d.ts +3 -14
- package/types/hooks/useEventListner.d.ts +6 -38
- package/types/hooks/useFloatingPopover.d.ts +9 -90
- package/types/hooks/useIsomorphicLayoutEffect.d.ts +0 -23
- package/types/hooks/useOnClickOutside.d.ts +5 -23
- package/types/hooks/useTooltipAutoShow.d.ts +8 -57
- package/types/styles/utils/colors-export.d.ts +6 -25
- package/types/utils/dateTime.d.ts +2 -7
- package/types/utils/defaultTheme.d.ts +13 -92
- package/types/utils/getElementRef.d.ts +0 -19
- package/types/utils/parseTrigger.d.ts +8 -78
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.styled.js","sources":["../../../src/components/inputs/Radio/Radio.styled.ts"],"sourcesContent":["import { math } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n
|
|
1
|
+
{"version":3,"file":"Radio.styled.js","sources":["../../../src/components/inputs/Radio/Radio.styled.ts"],"sourcesContent":["import { math } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n// Single-argument only — styled-components v5.1+ and v6 disagree on the second parameter.\nconst shouldForwardProp = (prop: string): boolean => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nconst radioSize = '18px';\n\nexport const RadioLabel = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n padding-left: ${math(`${radioSize} + 10px`)};\n font-weight: 400;\n font-size: 0.875rem;\n pointer-events: none;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-600')\n )};\n`;\n\n/*\n * Defect: disabled/readOnly leak to <label> DOM and are TS2339 errors; $isChecked is live in pseudo blocks.\n */\ninterface RadioStyleProps {\n /** `checked` — passed through as the checked-state affordance. */\n $isChecked?: boolean;\n /** `disabled` — leaks to DOM. */\n disabled?: boolean;\n /** `readOnly` — leaks to DOM. */\n readOnly?: boolean;\n}\n\nexport const Radio = styled.label\n .withConfig({\n shouldForwardProp\n })\n .attrs<RadioStyleProps>(applyDefaultTheme)`\n display: block;\n position: relative;\n cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\n line-height: ${radioSize};\n user-select: none;\n\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n width: ${radioSize};\n height: ${radioSize};\n margin: 0;\n cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\n z-index: 1;\n }\n\n &::before {\n content: '';\n position: absolute;\n border: 2px solid ${props => props.theme.getColor('gray-300')};\n width: ${radioSize};\n height: ${radioSize};\n top: 0;\n left: 0;\n border-radius: 50%;\n transition: all 200ms;\n box-sizing: border-box;\n pointer-events: none;\n\n /* Apply checked styling based on $isChecked prop */\n ${props =>\n props.$isChecked &&\n css`\n border-color: ${props.theme.getColor('emerald-500')};\n `}\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 8px;\n height: 8px;\n top: 5px;\n left: 5px;\n border-radius: 50%;\n background: transparent;\n transform: scale(0);\n transition: all 200ms;\n pointer-events: none;\n\n /* Apply checked styling based on $isChecked prop */\n ${props =>\n props.$isChecked &&\n css`\n background: ${props.theme.getColor('emerald-500')};\n transform: scale(1);\n `}\n }\n\n /* Fallback: :has() selector for browsers that support it */\n &:has(input[type='radio']:checked) {\n &::before {\n border-color: ${props => props.theme.getColor('emerald-500')};\n }\n\n &::after {\n background: ${props => props.theme.getColor('emerald-500')};\n transform: scale(1);\n }\n }\n\n input[type='radio']:checked + ${RadioLabel} {\n opacity: 1;\n }\n\n ${props =>\n props.readOnly &&\n css`\n opacity: 0.5;\n pointer-events: none;\n user-select: text;\n `}\n\n ${props =>\n props.disabled &&\n css`\n opacity: 0.5;\n cursor: not-allowed;\n user-select: text;\n\n input[type='radio'] {\n cursor: not-allowed;\n }\n `}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","radioSize","RadioLabel","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","math","props","theme","themeProp","getColor","Radio","label","disabled","$isChecked","css","readOnly"],"mappings":";;;;AAKA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAED,MAAMC,SAAS,GAAG,MAAM;AAEjB,MAAMC,UAAU,GAAGC,MAAM,CAACC,GAAG,CACjCC,UAAU,CAAC;AACVP,EAAAA;AACF,CAAC,CAAC,CACDQ,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,eAAA,EAAA,0DAAA,EAAA,GAAA,CAAA,EACTC,IAAI,CAAC,CAAA,EAAGT,SAAS,SAAS,CAAC,EAKzCU,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;AAeE,MAAMC,KAAK,GAAGZ,MAAM,CAACa,KAAK,CAC9BX,UAAU,CAAC;AACVP,EAAAA;AACF,CAAC,CAAC,CACDQ,KAAK,CAAkBC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,oBAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,yCAAA,EAAA,eAAA,EAAA,0EAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,sEAAA,EAAA,SAAA,EAAA,UAAA,EAAA,iGAAA,EAAA,oLAAA,EAAA,6DAAA,EAAA,wBAAA,EAAA,sDAAA,EAAA,cAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAGhCE,KAAK,IAAKA,KAAK,CAACM,QAAQ,GAAG,aAAa,GAAG,SAAU,EAChDhB,SAAS,EAMbA,SAAS,EACRA,SAAS,EAETU,KAAK,IAAKA,KAAK,CAACM,QAAQ,GAAG,aAAa,GAAG,SAAU,EAO3CN,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EACpDb,SAAS,EACRA,SAAS,EASjBU,KAAK,IACLA,KAAK,CAACO,UAAU,IAChBC,GAAG,CAAA,CAAA,eAAA,EAAA,GAAA,CAAA,EACeR,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CACpD,EAiBDH,KAAK,IACLA,KAAK,CAACO,UAAU,IAChBC,GAAG,CAAA,CAAA,aAAA,EAAA,sBAAA,CAAA,EACaR,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAElD,EAMeH,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,EAI9CH,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,EAK9BZ,UAAU,EAIxCS,KAAK,IACLA,KAAK,CAACS,QAAQ,IACdD,GAAG,CAAA,CAAA,mDAAA,CAAA,CAIF,EAEDR,KAAK,IACLA,KAAK,CAACM,QAAQ,IACdE,GAAG,CAAA,CAAA,0FAAA,CAAA,CAQF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.styled.js","sources":["../../../src/components/inputs/Switch/Switch.styled.ts"],"sourcesContent":["import { math, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst switchButtonSize = '16px';\n\n
|
|
1
|
+
{"version":3,"file":"Switch.styled.js","sources":["../../../src/components/inputs/Switch/Switch.styled.ts"],"sourcesContent":["import { math, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst switchButtonSize = '16px';\n\n// Single-argument only — styled-components v5.1+ and v6 disagree on the second parameter.\nconst shouldForwardProp = (prop: string): boolean => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\n// Defect: disabled/readOnly leak to <div> DOM as non-standard attributes and are TS2339 errors.\ninterface SwitchStyleProps {\n /** `disabled` — dims and blocks pointer events. Leaks to DOM. */\n disabled?: boolean;\n /** `readOnly` — dims and blocks pointer events. Leaks to DOM. */\n readOnly?: boolean;\n}\n\nexport const Switch = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<SwitchStyleProps>(applyDefaultTheme)`\n * {\n box-sizing: border-box;\n }\n\n display: flex;\n flex-direction: column;\n\n ${props =>\n props.readOnly &&\n css`\n opacity: 0.5;\n > * {\n pointer-events: none;\n user-select: text;\n }\n `}\n\n ${props =>\n props.disabled &&\n css`\n opacity: 0.5;\n cursor: not-allowed;\n * {\n pointer-events: none;\n user-select: text;\n }\n `}\n`;\n\nexport const SwitchIndicator = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: inline-block;\n position: relative;\n ${props =>\n props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-900'),\n props.theme.getColor('gray-200')\n )}\n height: ${math(`${switchButtonSize} + 2px`)};\n width: 32px;\n border-radius: 20px;\n border: 1px solid;\n ${props =>\n props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-500'),\n props.theme.getColor('gray-300')\n )}\n transition: background 200ms;\n`;\n\nexport const SwitchIndicatorButton = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n position: absolute;\n ${props =>\n props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-200'),\n props.theme.getColor('white')\n )}\n height: ${switchButtonSize};\n width: ${switchButtonSize};\n border-radius: 50%;\n box-shadow: ${props => props.theme.getColor('gray-500')} 0 0px 2px 0px;\n transition: left 200ms;\n`;\n\nexport const SwitchIndicatorLabelText = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n padding-left: 10px;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 18px;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-600')\n )};\n`;\n\nexport const SwitchLabel = styled.label\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: inline-flex;\n margin-right: auto;\n cursor: pointer;\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n }\n\n &:has(input[type='checkbox']:not(:checked)) {\n ${SwitchIndicatorButton} {\n left: 0;\n }\n }\n\n &:has(input[type='checkbox']:checked) {\n ${SwitchIndicatorButton} {\n left: calc(100% - ${switchButtonSize});\n }\n\n ${SwitchIndicator} {\n background: ${props => props.theme.getColor('emerald-500')};\n\n ${props =>\n props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-400'),\n props.theme.getColor('gray-300'),\n 1\n )}\n }\n }\n\n &:has(input[type='checkbox']:focus-visible) {\n ${SwitchIndicatorButton} {\n ${props =>\n props.theme.themeProp(\n 'outline',\n `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.5)}`,\n `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.3)}`,\n 1\n )}\n }\n }\n`;\n\nexport const Description = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<{\n /** `spaciousDescription` — lower-case by convention; renaming would require two-file change. */\n $spaciousdescription?: boolean;\n }>(applyDefaultTheme)`\n margin: ${props => (props.$spaciousdescription ? '16px' : '6px')} 0 0 0;\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"],"names":["switchButtonSize","shouldForwardProp","prop","startsWith","Switch","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","readOnly","css","disabled","SwitchIndicator","theme","themeProp","getColor","math","SwitchIndicatorButton","SwitchIndicatorLabelText","SwitchLabel","label","rgba","Description","$spaciousdescription"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sources":["../../../src/components/inputs/TextArea/TextArea.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport useTooltipAutoShow from '../../../hooks/useTooltipAutoShow';\n\nimport { isEmpty } from 'lodash';\nimport useMergedRefs from '@restart/hooks/useMergedRefs';\nimport { nanoid } from 'nanoid';\nimport { Tooltip } from '../../data';\n\nimport { ReactComponent as EditNoteIcon } from '../../../icons/edit-note.svg';\nimport * as S from './TextArea.styled';\n\nconst NOOP = () => {};\n\ntype TextAreaOwnProps = {\n /**\n * Value to be sent. Typically the content of the text area.\n */\n value?: string;\n /**\n * Default value/text to be displayed in the text area by default.\n */\n defaultValue?: string;\n /**\n * Name of the text area (used when sending form data)\n */\n name?: string;\n /**\n * Label text for the text area. If the text area is empty (no input and no placeholder)\n * and isn't in focus, the label text will be displayed grayed out in the text area itself.\n * Otherwise, the label text will be displayed in the top left corner.\n */\n label?: string;\n /**\n * Field Label text for the text area field. I\n */\n fieldLabel?: string;\n /**\n * Placeholder text to be displayed if the text area is empty (no input)\n */\n placeholder?: string;\n /**\n * Whether the user is required to fill in the text area\n */\n required?: boolean;\n /**\n * Whether the text area is disabled\n */\n disabled?: boolean;\n /**\n * Whether the component is hidden or visible.\n */\n hidden?: boolean;\n /**\n * Whether the text area is read-only\n */\n readOnly?: boolean;\n /**\n * Displays a grey background to show that value is editable\n */\n edit?: boolean;\n /**\n * ?\n */\n autoComplete?: string;\n /**\n * Descriptive text displayed below the text area\n */\n description?: string;\n /**\n * Optional icon to be displayed left of the text inside the text area\n */\n icon?: React.ReactElement<any>;\n /**\n * How many rows/lines of text to be displayed by default\n */\n rows?: number | string;\n /**\n * Add custom class names to the HTML element\n */\n className?: string;\n /**\n * Add custom CSS styling\n */\n style?: any;\n /**\n * Add padding (small-medium-large)\n *\n * `''` is not from this component's propTypes; `Instructions` forwards its own\n * `'' | 'small' | 'medium' | 'large'` straight in at `Instructions.tsx:354`. Kept in\n * sync with `TextAreaPadding` in `TextArea.styled.ts`, which has the full rationale.\n */\n padding?: '' | 'small' | 'medium' | 'large';\n /**\n * Optional callback function for the `onChange` event\n */\n onChange?: (...args: any[]) => any;\n /**\n * Optional callback function for the `onBlur` event\n */\n onBlur?: (...args: any[]) => any;\n noBorder?: boolean;\n /**\n * Define the type based on error,error-border , warning, loading and success.\n */\n type?:\n | ''\n | 'error'\n | 'error-border'\n | 'warning-border'\n | 'warning'\n | 'loading'\n | 'success'\n /*\n * Not from this component's propTypes. `Instructions.tsx:329` forwards its own\n * `type`, whose union carries `'instructions-warning'` and whose stories set it six\n * times. Kept in sync with `TextAreaType` in `TextArea.styled.ts`, which has the\n * full rationale and the reason mapping it to `''` instead would move the baseline.\n */\n | 'instructions-warning';\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 * Description ToolTip text.\n */\n descriptionToolTip?: string;\n /**\n * Border Radius for rounded borders.\n */\n borderRadius?: number;\n};\n\n/*\n * NMB-3998 §C.2: `rest` is spread onto `S.TextInputField`, 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 TextAreaOwnProps`);\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 TextAreaProps = Omit<\n React.ComponentPropsWithoutRef<typeof S.TextInputField>,\n keyof TextAreaOwnProps\n> &\n TextAreaOwnProps;\n\n/**\n * Text areas let users enter and edit text in the UI. They typically appear in forms and dialogs.\n *\n * ### Import\n *\n * ``` js\n * import { TextArea } from '@ntbjs/react-components/inputs'\n * // or\n * import TextArea from '@ntbjs/react-components/inputs/TextArea'\n * ```\n */\nconst TextArea = React.forwardRef<any, TextAreaProps>(function TextArea(\n {\n value,\n defaultValue,\n name,\n label,\n placeholder,\n required,\n disabled,\n hidden = false,\n readOnly = false,\n edit = false,\n autoComplete,\n description,\n type = '',\n icon,\n rows = 4,\n className,\n style,\n onChange = NOOP,\n onBlur,\n noBorder = false,\n loadingIcon,\n successIcon,\n padding = 'medium',\n descriptionToolTip = '',\n borderRadius = 0,\n fieldLabel,\n ...rest\n },\n forwardedRef\n) {\n const textInputDomNode = useRef(null);\n const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);\n\n const [inputIsEmpty, setInputIsEmpty] = useState(!(value || defaultValue));\n const [autoFocus, setAutoFocus] = useState(false);\n\n const [uniqueId] = useState(nanoid());\n\n const { toolTipDisabled, toolTipVisible, toolTipOnMouseLeave, toolTipContent } =\n useTooltipAutoShow(descriptionToolTip);\n\n useEffect(() => {\n setAutoFocus(false);\n }, [value, defaultValue]);\n\n const onKeyDown = useCallback(event => {\n if (event.key === 'Enter') {\n event.stopPropagation();\n }\n }, []);\n\n const input = () => {\n return (\n <S.TextAreaContainter>\n {fieldLabel && (\n <S.Label htmlFor={uniqueId} disabled={disabled}>\n {fieldLabel}\n <S.SuccessContainerLabel>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainerLabel>\n </S.Label>\n )}\n <S.TextInput\n $fieldLabel={!isEmpty(fieldLabel)}\n disabled={disabled}\n readOnly={readOnly}\n $type={type}\n className={className}\n style={style}\n >\n <S.TextInputFieldIconAlert $type={type}>{icon}</S.TextInputFieldIconAlert>\n <S.TextInputField\n autoFocus={autoFocus}\n $borderRadius={borderRadius}\n ref={textInputRef}\n rows={rows}\n value={value}\n defaultValue={defaultValue}\n name={name}\n placeholder={placeholder || ' '}\n required={required}\n readOnly={readOnly}\n disabled={disabled}\n $edit={edit}\n $type={type}\n autoComplete={autoComplete}\n $hasIcon={Boolean(icon)}\n id={`text-input-${uniqueId}`}\n key={uniqueId}\n $padding={padding}\n onChange={e => {\n if (e.target.value) {\n setInputIsEmpty(false);\n if (!autoFocus) {\n setAutoFocus(true);\n }\n } else {\n setInputIsEmpty(true);\n if (!autoFocus) {\n setAutoFocus(true);\n }\n }\n onChange(e);\n }}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n $noBorder={noBorder}\n {...rest}\n />\n {!fieldLabel && (type === 'loading' || type === 'success') && (\n <S.SuccessContainer>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainer>\n )}\n {!readOnly && (edit || noBorder) && (\n <S.InputIconContainer disabled={disabled}>\n <EditNoteIcon className={padding === 'small' ? 'smallPadingIcon' : undefined} />\n </S.InputIconContainer>\n )}\n {label && (\n <S.TextInputLabel\n htmlFor={`text-input-${uniqueId}`}\n $hasPlaceholder={Boolean(placeholder)}\n $hasIcon={Boolean(icon)}\n $inputIsEmpty={inputIsEmpty}\n >\n {label}\n {required && ' *'}\n </S.TextInputLabel>\n )}\n {typeof description === 'string' && description.length > 0 && (\n <S.Description $type={type}>{description}</S.Description>\n )}\n </S.TextInput>\n </S.TextAreaContainter>\n );\n };\n\n if (hidden) return null;\n\n return (\n <>\n <div onMouseLeave={toolTipOnMouseLeave}>\n <Tooltip\n content={toolTipContent}\n key=\"tooltipTextArea1\"\n placement=\"bottom-end\"\n trigger={'mouseenter'}\n disabled={toolTipDisabled}\n zIndex={999999}\n visible={toolTipVisible}\n >\n {input()}\n </Tooltip>\n </div>\n </>\n );\n});\n\nexport default TextArea;\n"],"names":["NOOP","TextArea","React","forwardRef","value","defaultValue","name","label","placeholder","required","disabled","hidden","readOnly","edit","autoComplete","description","type","icon","rows","className","style","onChange","onBlur","noBorder","loadingIcon","successIcon","padding","descriptionToolTip","borderRadius","fieldLabel","rest","forwardedRef","textInputDomNode","useRef","textInputRef","useMergedRefs","inputIsEmpty","setInputIsEmpty","useState","autoFocus","setAutoFocus","uniqueId","nanoid","toolTipDisabled","toolTipVisible","toolTipOnMouseLeave","toolTipContent","useTooltipAutoShow","useEffect","onKeyDown","useCallback","event","key","stopPropagation","input","_jsxs","S","children","htmlFor","$fieldLabel","isEmpty","$type","_jsx","$borderRadius","ref","$edit","$hasIcon","Boolean","id","$padding","e","target","$noBorder","EditNoteIcon","undefined","$hasPlaceholder","$inputIsEmpty","length","_Fragment","onMouseLeave","Tooltip","content","placement","trigger","zIndex","visible"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextArea.js","sources":["../../../src/components/inputs/TextArea/TextArea.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport useTooltipAutoShow from '../../../hooks/useTooltipAutoShow';\n\nimport { isEmpty } from 'lodash';\nimport useMergedRefs from '@restart/hooks/useMergedRefs';\nimport { nanoid } from 'nanoid';\nimport { Tooltip } from '../../data';\n\nimport { ReactComponent as EditNoteIcon } from '../../../icons/edit-note.svg';\nimport * as S from './TextArea.styled';\n\nconst NOOP = () => {};\n\ntype TextAreaOwnProps = {\n /**\n * Value to be sent. Typically the content of the text area.\n */\n value?: string;\n /**\n * Default value/text to be displayed in the text area by default.\n */\n defaultValue?: string;\n /**\n * Name of the text area (used when sending form data)\n */\n name?: string;\n /**\n * Label text for the text area. If the text area is empty (no input and no placeholder)\n * and isn't in focus, the label text will be displayed grayed out in the text area itself.\n * Otherwise, the label text will be displayed in the top left corner.\n */\n label?: string;\n /**\n * Field Label text for the text area field. I\n */\n fieldLabel?: string;\n /**\n * Placeholder text to be displayed if the text area is empty (no input)\n */\n placeholder?: string;\n /**\n * Whether the user is required to fill in the text area\n */\n required?: boolean;\n /**\n * Whether the text area is disabled\n */\n disabled?: boolean;\n /**\n * Whether the component is hidden or visible.\n */\n hidden?: boolean;\n /**\n * Whether the text area is read-only\n */\n readOnly?: boolean;\n /**\n * Displays a grey background to show that value is editable\n */\n edit?: boolean;\n /**\n * ?\n */\n autoComplete?: string;\n /**\n * Descriptive text displayed below the text area\n */\n description?: string;\n /**\n * Optional icon to be displayed left of the text inside the text area\n */\n icon?: React.ReactElement<any>;\n /**\n * How many rows/lines of text to be displayed by default\n */\n rows?: number | string;\n /**\n * Add custom class names to the HTML element\n */\n className?: string;\n /**\n * Add custom CSS styling\n */\n style?: any;\n /**\n * Add padding (small-medium-large)\n */\n padding?: '' | 'small' | 'medium' | 'large';\n /**\n * Optional callback function for the `onChange` event\n */\n onChange?: (...args: any[]) => any;\n /**\n * Optional callback function for the `onBlur` event\n */\n onBlur?: (...args: any[]) => any;\n noBorder?: boolean;\n /**\n * Define the type based on error,error-border , warning, loading and success.\n */\n type?:\n | ''\n | 'error'\n | 'error-border'\n | 'warning-border'\n | 'warning'\n | 'loading'\n | 'success'\n | 'instructions-warning';\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 * Description ToolTip text.\n */\n descriptionToolTip?: string;\n /**\n * Border Radius for rounded borders.\n */\n borderRadius?: number;\n};\n\n// Omit before & — a bare intersection narrows colliding props instead of overriding them.\ntype TextAreaProps = Omit<\n React.ComponentPropsWithoutRef<typeof S.TextInputField>,\n keyof TextAreaOwnProps\n> &\n TextAreaOwnProps;\n\n/**\n * Text areas let users enter and edit text in the UI. They typically appear in forms and dialogs.\n *\n * ### Import\n *\n * ``` js\n * import { TextArea } from '@ntbjs/react-components/inputs'\n * // or\n * import TextArea from '@ntbjs/react-components/inputs/TextArea'\n * ```\n */\nconst TextArea = React.forwardRef<any, TextAreaProps>(function TextArea(\n {\n value,\n defaultValue,\n name,\n label,\n placeholder,\n required,\n disabled,\n hidden = false,\n readOnly = false,\n edit = false,\n autoComplete,\n description,\n type = '',\n icon,\n rows = 4,\n className,\n style,\n onChange = NOOP,\n onBlur,\n noBorder = false,\n loadingIcon,\n successIcon,\n padding = 'medium',\n descriptionToolTip = '',\n borderRadius = 0,\n fieldLabel,\n ...rest\n },\n forwardedRef\n) {\n const textInputDomNode = useRef(null);\n const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);\n\n const [inputIsEmpty, setInputIsEmpty] = useState(!(value || defaultValue));\n const [autoFocus, setAutoFocus] = useState(false);\n\n const [uniqueId] = useState(nanoid());\n\n const { toolTipDisabled, toolTipVisible, toolTipOnMouseLeave, toolTipContent } =\n useTooltipAutoShow(descriptionToolTip);\n\n useEffect(() => {\n setAutoFocus(false);\n }, [value, defaultValue]);\n\n const onKeyDown = useCallback(event => {\n if (event.key === 'Enter') {\n event.stopPropagation();\n }\n }, []);\n\n const input = () => {\n return (\n <S.TextAreaContainter>\n {fieldLabel && (\n <S.Label htmlFor={uniqueId} disabled={disabled}>\n {fieldLabel}\n <S.SuccessContainerLabel>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainerLabel>\n </S.Label>\n )}\n <S.TextInput\n $fieldLabel={!isEmpty(fieldLabel)}\n disabled={disabled}\n readOnly={readOnly}\n $type={type}\n className={className}\n style={style}\n >\n <S.TextInputFieldIconAlert $type={type}>{icon}</S.TextInputFieldIconAlert>\n <S.TextInputField\n autoFocus={autoFocus}\n $borderRadius={borderRadius}\n ref={textInputRef}\n rows={rows}\n value={value}\n defaultValue={defaultValue}\n name={name}\n placeholder={placeholder || ' '}\n required={required}\n readOnly={readOnly}\n disabled={disabled}\n $edit={edit}\n $type={type}\n autoComplete={autoComplete}\n $hasIcon={Boolean(icon)}\n id={`text-input-${uniqueId}`}\n key={uniqueId}\n $padding={padding}\n onChange={e => {\n if (e.target.value) {\n setInputIsEmpty(false);\n if (!autoFocus) {\n setAutoFocus(true);\n }\n } else {\n setInputIsEmpty(true);\n if (!autoFocus) {\n setAutoFocus(true);\n }\n }\n onChange(e);\n }}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n $noBorder={noBorder}\n {...rest}\n />\n {!fieldLabel && (type === 'loading' || type === 'success') && (\n <S.SuccessContainer>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainer>\n )}\n {!readOnly && (edit || noBorder) && (\n <S.InputIconContainer disabled={disabled}>\n <EditNoteIcon className={padding === 'small' ? 'smallPadingIcon' : undefined} />\n </S.InputIconContainer>\n )}\n {label && (\n <S.TextInputLabel\n htmlFor={`text-input-${uniqueId}`}\n $hasPlaceholder={Boolean(placeholder)}\n $hasIcon={Boolean(icon)}\n $inputIsEmpty={inputIsEmpty}\n >\n {label}\n {required && ' *'}\n </S.TextInputLabel>\n )}\n {typeof description === 'string' && description.length > 0 && (\n <S.Description $type={type}>{description}</S.Description>\n )}\n </S.TextInput>\n </S.TextAreaContainter>\n );\n };\n\n if (hidden) return null;\n\n return (\n <>\n <div onMouseLeave={toolTipOnMouseLeave}>\n <Tooltip\n content={toolTipContent}\n key=\"tooltipTextArea1\"\n placement=\"bottom-end\"\n trigger={'mouseenter'}\n disabled={toolTipDisabled}\n zIndex={999999}\n visible={toolTipVisible}\n >\n {input()}\n </Tooltip>\n </div>\n </>\n );\n});\n\nexport default TextArea;\n"],"names":["NOOP","TextArea","React","forwardRef","value","defaultValue","name","label","placeholder","required","disabled","hidden","readOnly","edit","autoComplete","description","type","icon","rows","className","style","onChange","onBlur","noBorder","loadingIcon","successIcon","padding","descriptionToolTip","borderRadius","fieldLabel","rest","forwardedRef","textInputDomNode","useRef","textInputRef","useMergedRefs","inputIsEmpty","setInputIsEmpty","useState","autoFocus","setAutoFocus","uniqueId","nanoid","toolTipDisabled","toolTipVisible","toolTipOnMouseLeave","toolTipContent","useTooltipAutoShow","useEffect","onKeyDown","useCallback","event","key","stopPropagation","input","_jsxs","S","children","htmlFor","$fieldLabel","isEmpty","$type","_jsx","$borderRadius","ref","$edit","$hasIcon","Boolean","id","$padding","e","target","$noBorder","EditNoteIcon","undefined","$hasPlaceholder","$inputIsEmpty","length","_Fragment","onMouseLeave","Tooltip","content","placement","trigger","zIndex","visible"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.styled.js","sources":["../../../src/components/inputs/TextArea/TextArea.styled.ts"],"sourcesContent":["/*\n * $-transient-prop pattern: rules in\n * `src/components/layout/SectionSeparator/SectionSeparator.styled.ts`, derivation and\n * measurements in `scripts/TS-MIGRATION-PLAYBOOK.md` §J.\n *\n * The largest styled file in the library: 11 components, 57 errors -> 1. It is mostly the\n * plain pattern applied at volume — 10 distinct `$` props, 9 of the 11 components carrying\n * a generic, no `styled()` of a third-party component, and no nested `css` block that needs\n * its own generic (the four nested ones here read only `props.theme`, §J.7's last line).\n * It is also where the audit found the most defects: FIVE. FOUR are still only commented at\n * their sites, because every available fix for them changes rendered CSS (§J.8):\n *\n * 1. THE PUBLIC `padding` PROP HAS NEVER WORKED. `TextArea.tsx:118` passes `$padding`,\n * `TextInputField` reads `padding`. Three dead rules. Same class as §E.3's\n * `$elevatedverticalPadding`.\n * 2. `themeProp(…, '!important')` at line 206 passes a STRING for `specificity`, which is\n * `number`. That is this file's ONE REMAINING ERROR and it is deliberate — see the\n * note there.\n * 3. `disabled` with no `$` on three components, leaking to the DOM.\n * 4. `readOnly` passed to a `<div>` that never reads it, also leaking.\n *\n * The fifth — `$fadeIn`, four reads and no writer anywhere in the repo's history — IS fixed\n * now that the sweep permits moving the baseline. See the note above `SuccessContainer`.\n */\nimport styled, { css, keyframes } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n/**\n * `TextArea.tsx`'s `type` prop, verbatim from its\n * `PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success'])`,\n * carried as `$type` by `TextInputField`, `TextInputFieldIconAlert`, `TextInput` and\n * `Description`.\n *\n * Closed on purpose (§J.6): the templates below branch on this value 26 times, and with a\n * closed union a mistyped state name is TS2367 instead of a rule that silently never\n * fires — which is exactly the failure this file already contains three of. `''` is a\n * member because the component defaults `type = ''` (tsx line 40).\n */\ntype TextAreaType =\n | ''\n | 'error'\n | 'error-border'\n | 'warning-border'\n | 'warning'\n | 'loading'\n | 'success'\n /*\n * NOT IN TextArea's OWN propTypes, AND STILL CORRECT. `Instructions.tsx:329` does\n * `<TextArea type={type} …>` and its own `type` union — verbatim from its propTypes —\n * carries `'instructions-warning'`, which six of `Instructions.stories.tsx`'s stories\n * set. So this value reaches `$type` today; the old propTypes just never said so, and\n * `oneOf` logged nothing because the two components' propTypes were never compared.\n *\n * RECORDING IT CHANGES NO CSS. No rule below matches on it, and crucially the\n * `!props.$type` guard at ~line 392 already distinguishes it from `''` — which is why\n * the alternative \"map it to `''` at the forward site\" was rejected: that WOULD change\n * the emitted border-color and move the baseline. Adding the member documents an\n * existing state; it does not create one.\n */\n | 'instructions-warning';\n\n/**\n * `TextArea.tsx`'s `padding` prop, from `PropTypes.oneOf(['small', 'medium', 'large'])`.\n * See `TextInputFieldStyleProps` for why this type has two members in that interface.\n *\n * `''` IS HERE FOR THE SAME REASON AS `TextAreaType`'s `'instructions-warning'`:\n * `Instructions`' `padding` union is `'' | 'small' | 'medium' | 'large'` and it forwards\n * the value straight through at `Instructions.tsx:354`. Every read of this value below is\n * an `===` against one of the three real sizes, so an extra member changes no comparison\n * result — and all three of those reads are dead anyway (the DEFERRED DEFECT below: the\n * component passes `$padding`, the template reads `padding`).\n */\ntype TextAreaPadding = '' | 'small' | 'medium' | 'large';\n\n/*\n * ====================== DEFERRED DEFECT (DOM leak, §E.4 third case) ====================\n * `disabled` HAS NO `$` ON `Label`, `InputIconContainer` OR `TextInput`, AND THAT IS A\n * DEFECT — declared here, not fixed here.\n *\n * `TextArea.tsx` passes `<S.Label htmlFor={uniqueId} disabled={disabled}>` (tsx:83),\n * `<S.TextInput … disabled={disabled} …>` (tsx:93) and\n * `<S.InputIconContainer disabled={disabled}>` (tsx:145). `disabled` is a member of\n * neither `LabelHTMLAttributes` nor `HTMLAttributes<HTMLDivElement>`, and\n * `shouldForwardProp` forwards every non-`$` prop, so `disabled=\"\"` is on all three\n * rendered elements today and is in the recorded render baseline.\n *\n * Note the contrast with `TextInputField`, which reads `props.disabled` and\n * `props.readOnly` and needs NO declaration for either: on a `<textarea>` both are real\n * `TextareaHTMLAttributes` members, so the reads typecheck with no generic at all. §J.9's\n * first case. That is the same prop name being correct in one place and a leak in another,\n * which is why §E.4 is a triage and not a rename.\n *\n * The fix is `$disabled` at both ends, which REMOVES three DOM attributes and so belongs\n * to C10 with its baseline re-record. `CompactTextInput.styled.ts` and\n * `CompactAutocompleteSelect.styled.ts` carry the identical defect.\n * ======================================================================================\n */\ninterface DisabledStyleProps {\n /** `disabled` — dims and blocks the pointer. Also reaches the DOM; see above. */\n disabled?: boolean;\n}\n\nconst fadeInCheck = keyframes`\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n`;\n\n/*\n * A module-scope `css` helper with NO interpolations at all, so it has no props and needs\n * no generic — unlike `CompactAutocompleteSelect`'s `sharedStyle`, and therefore not\n * subject to §J.7's weak-type rule either. Hosts: `TextInputLabel` (twice) and `TextInput`\n * (twice).\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`, and\n * the two majors disagree on the second parameter. §J.4. `prop` needs the annotation\n * because `withConfig` takes this by reference, so it gets no contextual typing.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const TextAreaContainter = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n`;\n\nexport const Label = styled.label\n .withConfig({\n shouldForwardProp\n })\n .attrs<DisabledStyleProps>(applyDefaultTheme)`\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n height: 19px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 13px;\n ${props =>\n props.disabled &&\n css`\n cursor: not-allowed;\n `}\n`;\n\nexport const InputIconContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<DisabledStyleProps>(applyDefaultTheme)`\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n align-items: flex-start;\n\n position: absolute;\n right: 15px;\n top: 10px;\n bottom: 0;\n > .smallPadingIcon {\n padding: 4px;\n width: 15px;\n height: 15px;\n border-radius: 5px;\n opacity: 1;\n margin-top: -5px;\n ${props =>\n /*\n * ================== DEFERRED DEFECT — THIS FILE'S ONE REMAINING ERROR ==============\n * THE 4TH ARGUMENT IS `specificity`, WHICH IS A `number`, AND `'!important'` IS A\n * STRING. TS2345 \"Argument of type 'string' is not assignable to parameter of type\n * 'number'\", and it is the ONLY error left in this file.\n *\n * `utils/defaultTheme.ts`'s `ThemeProp` JSDoc names this exact call site and says the\n * `number` typing is deliberate: the implementation does `Array(specificity).fill('&')`,\n * so a string produces a ONE-element array and specificity 1 instead of the default 2.\n * The intent here was clearly to append `!important` to the declaration, which\n * `themeProp` cannot do at all — there is no parameter for it.\n *\n * So the type is right, the call is wrong, and §E.1 rule 3 says fix the code. Every\n * available fix — drop the argument (specificity 1 -> 2, so the generated selector\n * gains a `&`), pass `1` explicitly (keeps today's CSS but silently endorses a\n * one-`&` selector nobody chose), or write the `!important` into the two colour\n * arguments — is a change to the emitted CSS or to what the file claims. That makes\n * it C9 work with C10's re-record, and NOT a type-only commit's. A suppression is\n * refused for the same reason as §E.3's `themeProp` arity defects.\n * ===================================================================================\n */\n props.theme.themeProp(\n 'background-color',\n props.theme.getColor('gray-900'),\n props.theme.getColor('gray-300'),\n '!important'\n )}\n }\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n\n ${props =>\n props.disabled &&\n css`\n display: none;\n `}\n }\n`;\n\n/**\n * Props of `TextInputField`, the `<textarea>` itself. Six transient props plus the two\n * halves of a defect.\n *\n * `readOnly` and `disabled` are read by the template (7 times between them) and are\n * deliberately ABSENT from this interface: both are real `TextareaHTMLAttributes` members,\n * so those reads already typecheck and declaring them would add nothing. §J.9's first case.\n */\nexport interface TextInputFieldStyleProps {\n /**\n * `borderRadius` (`PropTypes.number`, default `0`) — interpolated as\n * `${props.$borderRadius}px`, so `number` and not `number | string`: a string here would\n * render `border-radius: 4pxpx`. Same reasoning as `SectionSeparator`'s `$margin`.\n */\n $borderRadius?: number;\n /** `type` — see `TextAreaType`. The template branches on it 26 times. */\n $type?: TextAreaType;\n /** `edit` — shows the editable-affordance background and border. */\n $edit?: boolean;\n /** `noBorder` — suppresses the border by matching it to the background. */\n $noBorder?: boolean;\n /** `Boolean(icon)` — makes room on the left for the icon. */\n $hasIcon?: boolean;\n /*\n * ================== DEFERRED DEFECT — THE PUBLIC `padding` PROP IS DEAD ==============\n * BOTH MEMBERS BELOW EXIST BECAUSE THE COMPONENT AND THE TEMPLATE DISAGREE ON THE NAME.\n *\n * `TextArea.tsx:118` passes `$padding={padding}`. This template reads `props.padding`\n * (three rules: `small` -> `5px 10px`, `medium` -> `13px 15px`, `large` -> `15px 55px`).\n * `padding` is never passed, so ALL THREE ARE DEAD, and `$padding` is never read, so it\n * does nothing. The `<textarea>` therefore always keeps the base `padding: 5px 10px` from\n * the top of the template — which happens to equal the `small` value, so THE DOCUMENTED\n * DEFAULT `padding = 'medium'` HAS NEVER BEEN APPLIED and neither has `large`.\n *\n * This is exactly §E.3's `$elevatedverticalPadding` class: a public, documented prop that\n * has never worked. The fix is to repoint the reads to `$padding`, which ACTIVATES three\n * rules and changes the padding of every `TextArea` that does not pass `padding=\"small\"`.\n * That is a visual change — C9 for the fix, C10 for the re-record, not this commit. §J.8.\n *\n * Both halves are declared so the type records the whole defect rather than half of it:\n * `padding` is what the template reads, `$padding` is what the component passes.\n * ====================================================================================\n */\n /** READ by the template, NEVER passed. The dead half — see above. */\n padding?: TextAreaPadding;\n /** PASSED by `TextArea.tsx:118`, never read. The inert half — see above. */\n $padding?: TextAreaPadding;\n}\n\nexport const TextInputField = styled.textarea\n .withConfig({\n shouldForwardProp\n })\n .attrs<TextInputFieldStyleProps>(applyDefaultTheme)`\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 3px;\n padding: 5px 10px;\n resize: vertical;\n z-index: 0;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n transition:\n height 550ms ease-in-out,\n border-color 350ms,\n background 350ms;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )}\n\n ${props =>\n props.$borderRadius &&\n css`\n border-radius: ${props.$borderRadius}px;\n `}\n\n ${props => {\n if (props.$type === 'error') {\n return css`\n ${props.theme.themeProp('color', 'white', 'black')}\n ${props.theme.themeProp('background', '#7f1b1b', '#FBEAE6')}\n ${props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')}\n `;\n } else if (props.$type === 'warning') {\n return css`\n ${props.theme.themeProp('color', 'white', 'black')}\n ${props.theme.themeProp('background', '#634E01', '#FFFDE8')}\n ${props.theme.themeProp('border-color', '#634E01', '#FFFDE8')}\n `;\n } else if (props.$type === 'error-border') {\n return css`\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )}\n ${props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-900'),\n props.theme.getColor('white')\n )}\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('red-200'),\n props.theme.getColor('red-500')\n )}\n `;\n } else if (props.$type === 'warning-border') {\n return css`\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )}\n ${props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-900'),\n props.theme.getColor('white')\n )}\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('red-200'),\n props.theme.getColor('orange-500')\n )}\n `;\n } else {\n return css`\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )}\n ${props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-900'),\n props.theme.getColor('white')\n )}\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-500'),\n props.theme.getColor('gray-400')\n )}\n `;\n }\n }}\n\n\n ${props =>\n props.readOnly &&\n css`\n cursor: default;\n border-color: transparent !important;\n padding: 12px 10px;\n `}\n\n ${props =>\n props.disabled &&\n css`\n cursor: not-allowed;\n `}\n\n\n ${props =>\n props.$noBorder &&\n !props.$type &&\n css`\n ${props =>\n props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-900'),\n props.theme.getColor('white')\n )}\n `} \n\n ${props =>\n props.$noBorder &&\n props.$type === 'warning' &&\n css`\n ${props => props.theme.themeProp('border-color', '#634E01', '#FFFDE8')}\n `}\n\n ${props =>\n props.$noBorder &&\n props.$type === 'error' &&\n css`\n ${props => props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')}\n `}\n\n\n ${props =>\n props.padding === 'small' &&\n css`\n padding: 5px 10px;\n `}\n\n ${props =>\n props.padding === 'medium' &&\n css`\n padding: 13px 15px;\n `}\n\n ${props =>\n props.padding === 'large' &&\n css`\n padding: 15px 55px;\n `}\n\n ${props =>\n props.$hasIcon &&\n css`\n padding-left: 55px;\n padding-right: 35px;\n padding-top: 13.5px;\n `}\n\n\n &&:hover:not(:focus) {\n ${props => {\n if (props.disabled) {\n return '';\n }\n if (props.readOnly) {\n if (props.$type === 'error') {\n return props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');\n } else if (props.$type === 'warning') {\n return props.theme.themeProp('background', '#634E01', '#FFFDE8');\n }\n return '';\n }\n\n if (props.$type === 'error') {\n return props.theme.themeProp('background', '#901d1d', '#F7D5D0');\n } else if (props.$type === 'warning') {\n return props.theme.themeProp('background', '#806403', '#FFFEBF');\n } else if (!props.disabled) {\n return props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-100')\n );\n }\n return '';\n }}\n\n ${props =>\n props.$edit &&\n props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-100')\n )}\n\n ${props =>\n props.$noBorder && !props.readOnly && props.$type !== 'warning' && props.$type !== 'error'\n ? props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-100')\n )\n : ''}\n\n & + ${InputIconContainer} {\n opacity: 1;\n ${props =>\n props.$type === 'success' &&\n css`\n opacity: 0;\n `}\n }\n }\n\n&::placeholder {\n ${props => {\n if (props.$type === 'error' || props.$type === 'warning') {\n return css`\n color: ${props.theme.getColor('gray-400')};\n opacity: 0.9;\n `;\n } else {\n return css`\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-400'),\n props.theme.getColor('gray-500')\n )}\n opacity: 0.6;\n `;\n }\n }}\n}\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-600')\n )};\n\n\n\n &:focus::placeholder {\n ${props => {\n if (props.$type === 'warning' || props.$type === 'error') {\n return css`\n color: ${props.theme.getColor('gray-500')} !important;\n opacity: 0.8 !important;\n `;\n } else {\n return css`\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-600')\n )}\n `;\n }\n }}\n }\n\n &&:focus {\n outline: none;\n\n ${props => {\n if (props.readOnly) {\n if (props.$type === 'error') {\n return props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');\n } else if (props.$type === 'warning') {\n return props.theme.themeProp('background', '#634E01', '#FFFDE8');\n }\n return '';\n }\n\n if (props.$type === 'error') {\n return css`\n ${props.theme.themeProp('border-color', '#D83018', '#D83018')}\n ${props.theme.themeProp('background', 'white', 'white')}\n ${props.theme.themeProp('color', 'black', 'black')}\n `;\n } else if (props.$type === 'warning') {\n return css`\n ${props.theme.themeProp('border-color', '#F4E21E', '#F4E21E')}\n ${props.theme.themeProp('background', 'white', 'white')}\n ${props.theme.themeProp('color', 'black', 'black')}\n `;\n } else {\n return css`\n border-color: ${props.theme.getColor('gray-600')};\n ${props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-100')\n )}\n `;\n }\n }}\n }\n\n &&:not(:hover):not(:focus) {\n ${props => {\n if (props.$edit) {\n if (props.$type === 'error') {\n return props.theme.themeProp('background', '#7f1b1b', '#FEE2E2');\n } else if (props.$type === 'warning') {\n return props.theme.themeProp('background', '#634E01', '#FFFDE8');\n } else {\n return props.theme.themeProp(\n 'background',\n 'rgba(39,39,42, 0.7)',\n 'rgba(244,244,245, 0.3)'\n );\n }\n }\n }}\n\n ${props =>\n props.$edit &&\n props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)')}\n\n ${props =>\n props.$noBorder &&\n props.$edit &&\n css`\n ${props => props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)')}\n `}\n }\n`;\n\n/**\n * Props of `TextInputLabel`, the floating label. All three come from `TextArea.tsx:150-155`.\n */\ninterface TextInputLabelStyleProps {\n /** `inputIsEmpty` state — the label only floats up when the field is NOT empty. */\n $inputIsEmpty?: boolean;\n /** `Boolean(placeholder)` — a placeholder also forces the label up. */\n $hasPlaceholder?: boolean;\n /** `Boolean(icon)` — shifts the label right to clear the icon. */\n $hasIcon?: boolean;\n}\n\nexport const TextInputLabel = styled.label\n .withConfig({\n shouldForwardProp\n })\n .attrs<TextInputLabelStyleProps>(applyDefaultTheme)`\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n margin-botton: 50px;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n\n ${props => props.theme.themeProp('opacity', 0.6, 0.5)}\n\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.$inputIsEmpty &&\n css`\n ${activeLabel}\n `}\n\n ${props =>\n props.$hasPlaceholder &&\n css`\n ${activeLabel};\n `}\n content: \"\";\n\n ${props =>\n props.$hasIcon &&\n css`\n left: 55px;\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 TextInputFieldIconAlert = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<{ $type?: TextAreaType }>(applyDefaultTheme)`\n position: absolute;\n top: 2.8px;\n display: flex;\n padding: 0 10px 0 30px;\n opacity: 0.6;\n transition: opacity 250ms;\n ${props => props.$type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402')}\n svg {\n margin-top: 12px;\n width: 15px;\n }\n`;\n\n/**\n * Props of `TextInput`, the positioning wrapper. `TextArea.tsx:91-98` renders\n * `<S.TextInput $fieldLabel={…} disabled={disabled} readOnly={readOnly} $type={type} …>`.\n */\ninterface TextInputStyleProps extends DisabledStyleProps {\n /** `!isEmpty(fieldLabel)` — narrows the wrapper to 66.66% so the field label gets a third. */\n $fieldLabel?: boolean;\n /** `type` — only the `error` arm is used here, to recolour the floated label. */\n $type?: TextAreaType;\n /*\n * ============== DEFERRED DEFECT (DOM leak, and nothing even reads it) ================\n * `readOnly` IS PASSED TO THIS `<div>` (tsx:94) AND THIS TEMPLATE NEVER READS IT.\n *\n * So it is not a dead branch — there is no branch — it is a pure DOM leak:\n * `readOnly` is not a member of `HTMLAttributes<HTMLDivElement>`, `shouldForwardProp`\n * forwards every non-`$` prop, and `readonly=\"\"` is therefore on the rendered `<div>` and\n * in the recorded baseline. The `<textarea>` inside it receives its own `readOnly`\n * separately (tsx:110), where the attribute is real and does something.\n *\n * Declared because the component genuinely passes it — §E.4's \"declaring it is accurate\"\n * — and reported rather than fixed: DELETING the prop removes a DOM attribute and moves\n * the baseline, so it is C10 work.\n * ====================================================================================\n */\n /** Passed by `TextArea.tsx:94`, read by nothing. Leaks as `readonly=\"\"`; see above. */\n readOnly?: boolean;\n}\n\nexport const TextInput = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<TextInputStyleProps>(applyDefaultTheme)`\n position: relative;\n flex-basis: ${props => (props.$fieldLabel ? '66.66%' : '100%')};\n\n ${props =>\n props.disabled &&\n css`\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\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.$type === 'error' &&\n props.theme.themeProp(\n 'color',\n props.theme.getColor('red-200'),\n props.theme.getColor('red-500')\n )}\n }\n`;\n\nexport const Description = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<{ $type?: TextAreaType }>(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.$type === 'warning-border' || props.$type === '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 ${props =>\n (props.$type === 'error-border' || props.$type === '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\n/*\n * ================== `$fadeIn` IS GONE — DEAD BRANCH REMOVED (§E.4 first case) =============\n * The previous revision of both components below read `props.$fadeIn` twice each:\n *\n * opacity: ${props => (props.$fadeIn ? 0 : 1)};\n * animation: ${props => (props.$fadeIn ? fadeOutCheck : fadeInCheck)} 0.5s ease-in-out;\n *\n * NOTHING HAS EVER PASSED IT. `git log --all -S'fadeIn='` returns no commit that writes the\n * prop anywhere in `src`; `TextArea.tsx` renders `<S.SuccessContainer>` (tsx:275) and\n * `<S.SuccessContainerLabel>` (tsx:221) with no props at all. So `props.$fadeIn` was always\n * `undefined`, `opacity` was always the `1` the line above it already sets, and\n * `fadeOutCheck` was unreachable.\n *\n * IT WAS NOT AN UNIMPLEMENTED FEATURE, IT WAS A MISTYPED IDENTIFIER. `fadeIn` entered the\n * repo in `4ed910a` (\"Fix success and Show More\") in `CompactTextInput.styled.js`, in a\n * `CheckIconContainer` whose sibling line reads `props.success` and whose twin in\n * `CompactStarRating.styled.js` reads `props.success` in BOTH lines. It is a slip of\n * `success`, copy-propagated into `InputSuccessContainer` (`f793c6c`) and from there into\n * this file and two others.\n *\n * WIRING IT UP WAS REJECTED, on the state machines rather than on the history: no component\n * here has a \"success is going away\" transition to hang a fade-out on. `SuccessContainer` is\n * mounted only while `type` is `'loading'`/`'success'` and UNMOUNTS the moment it is not, so\n * there is no element left to fade; `SuccessContainerLabel` is mounted whenever `fieldLabel`\n * is set and merely swaps its children, so fading it would fade an empty 15x15 box. Making\n * either fade out needs a delayed-unmount state machine — a new feature, not a bug fix.\n *\n * `NMB-3183` already settled this exact code: `7e46b9d` deleted the same two lines from\n * `CompactTextInput.styled.js`'s `SuccessContainer` and `InputSuccessContainer`, and\n * `59b0041` deleted the keyframes they orphaned. These three files were the sites that\n * refactor missed.\n *\n * WHAT WAS KEPT AND WHY: the `animation` declaration, now static, because the branch it\n * always took is live and visible — `SuccessContainer` mounts when `type` becomes\n * `'loading'`/`'success'` and the icon genuinely fades in over 0.5s. Deleting that would be\n * a regression dressed as a cleanup. Only the unreachable half is gone, so the emitted\n * `animation` text is byte-identical and the one removed declaration is a duplicate\n * `opacity: 1`.\n * =========================================================================================\n */\nexport const SuccessContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n opacity: 1;\n pointer-events: none;\n animation: ${fadeInCheck} 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-500')\n )}\n\n > svg {\n width: 15px;\n }\n`;\n\nexport const SuccessContainerLabel = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n opacity: 1;\n pointer-events: none;\n animation: ${fadeInCheck} 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n margin-right: 5px;\n margin-top: -7px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-500')\n )}\n\n > svg {\n width: 13px;\n }\n`;\n"],"names":["fadeInCheck","keyframes","activeLabel","css","shouldForwardProp","prop","startsWith","TextAreaContainter","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","Label","label","props","theme","themeProp","getColor","disabled","InputIconContainer","TextInputField","textarea","$borderRadius","$type","readOnly","$noBorder","padding","$hasIcon","$edit","TextInputLabel","$inputIsEmpty","$hasPlaceholder","TextInputFieldIcon","TextInputFieldIconAlert","TextInput","$fieldLabel","Description","SuccessContainer","SuccessContainerLabel"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextArea.styled.js","sources":["../../../src/components/inputs/TextArea/TextArea.styled.ts"],"sourcesContent":["/*\n * `$`-prefixed props are transient and never reach the DOM.\n *\n * Four known defects are commented at their sites rather than fixed, because every available\n * fix changes rendered CSS: the public `padding` prop has never worked (`TextArea.tsx` passes\n * `$padding` while `TextInputField` reads `padding`); `themeProp(…, '!important')` passes a\n * string where `specificity` is `number`; and `disabled` and `readOnly` leak to the DOM.\n */\nimport styled, { css, keyframes } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n/**\n * `TextArea.tsx`'s `type` prop, verbatim from its\n * `PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success'])`,\n * carried as `$type` by `TextInputField`, `TextInputFieldIconAlert`, `TextInput` and\n * `Description`.\n *\n * Closed on purpose: the templates branch on this value 26 times, so a mistyped state name\n * becomes a type error instead of a rule that silently never fires. `''` is a member because\n * the component defaults `type = ''`.\n */\ntype TextAreaType =\n | ''\n | 'error'\n | 'error-border'\n | 'warning-border'\n | 'warning'\n | 'loading'\n | 'success'\n /*\n * NOT IN TextArea's OWN propTypes, AND STILL CORRECT. `Instructions.tsx:329` does\n * `<TextArea type={type} …>` and its own `type` union — verbatim from its propTypes —\n * carries `'instructions-warning'`, which six of `Instructions.stories.tsx`'s stories\n * set. So this value reaches `$type` today; the old propTypes just never said so, and\n * `oneOf` logged nothing because the two components' propTypes were never compared.\n *\n * RECORDING IT CHANGES NO CSS. No rule below matches on it, and crucially the\n * `!props.$type` guard at ~line 392 already distinguishes it from `''` — which is why\n * the alternative \"map it to `''` at the forward site\" was rejected: that WOULD change\n * the emitted border-color and move the baseline. Adding the member documents an\n * existing state; it does not create one.\n */\n | 'instructions-warning';\n\n/**\n * `TextArea.tsx`'s `padding` prop, from `PropTypes.oneOf(['small', 'medium', 'large'])`.\n * See `TextInputFieldStyleProps` for why this type has two members in that interface.\n *\n * `''` IS HERE FOR THE SAME REASON AS `TextAreaType`'s `'instructions-warning'`:\n * `Instructions`' `padding` union is `'' | 'small' | 'medium' | 'large'` and it forwards\n * the value straight through at `Instructions.tsx:354`. Every read of this value below is\n * an `===` against one of the three real sizes, so an extra member changes no comparison\n * result — and all three of those reads are dead anyway (the DEFERRED DEFECT below: the\n * component passes `$padding`, the template reads `padding`).\n */\ntype TextAreaPadding = '' | 'small' | 'medium' | 'large';\n\n/*\n * DOM leak, declared rather than fixed: `disabled` has no `$` on `Label`,\n * `InputIconContainer` or `TextInput`, so it renders as an attribute on all three. The fix\n * (`$disabled` at both ends) removes three DOM attributes and needs a baseline re-record.\n * `CompactTextInput.styled.ts` and `CompactAutocompleteSelect.styled.ts` share the defect.\n */\ninterface DisabledStyleProps {\n /** `disabled` — dims and blocks the pointer. Also reaches the DOM; see above. */\n disabled?: boolean;\n}\n\nconst fadeInCheck = keyframes`\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n`;\n\n/* No interpolations, so this needs no generic. */\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 * Stays single-argument: the two supported styled-components majors disagree on the second\n * parameter. `prop` needs the annotation because `withConfig` takes this by reference.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const TextAreaContainter = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n`;\n\nexport const Label = styled.label\n .withConfig({\n shouldForwardProp\n })\n .attrs<DisabledStyleProps>(applyDefaultTheme)`\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n height: 19px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 13px;\n ${props =>\n props.disabled &&\n css`\n cursor: not-allowed;\n `}\n`;\n\nexport const InputIconContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<DisabledStyleProps>(applyDefaultTheme)`\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n align-items: flex-start;\n\n position: absolute;\n right: 15px;\n top: 10px;\n bottom: 0;\n > .smallPadingIcon {\n padding: 4px;\n width: 15px;\n height: 15px;\n border-radius: 5px;\n opacity: 1;\n margin-top: -5px;\n ${props =>\n /*\n * Deferred defect, and this file's one remaining type error: the 4th argument is\n * `specificity` (a `number`), so `'!important'` makes `Array(specificity).fill('&')`\n * produce a one-element array — specificity 1 instead of the default 2. `themeProp`\n * has no parameter for `!important` at all, so every fix changes the emitted CSS and\n * needs a baseline re-record.\n */\n props.theme.themeProp(\n 'background-color',\n props.theme.getColor('gray-900'),\n props.theme.getColor('gray-300'),\n '!important'\n )}\n }\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n\n ${props =>\n props.disabled &&\n css`\n display: none;\n `}\n }\n`;\n\n/**\n * Props of `TextInputField`, the `<textarea>` itself. Six transient props plus the two\n * halves of a defect.\n *\n * `readOnly` and `disabled` are deliberately absent: both are real `TextareaHTMLAttributes`\n * members, so the template's reads already typecheck.\n */\nexport interface TextInputFieldStyleProps {\n /**\n * `borderRadius` (`PropTypes.number`, default `0`) — interpolated as\n * `${props.$borderRadius}px`, so `number` and not `number | string`: a string here would\n * render `border-radius: 4pxpx`. Same reasoning as `SectionSeparator`'s `$margin`.\n */\n $borderRadius?: number;\n /** `type` — see `TextAreaType`. The template branches on it 26 times. */\n $type?: TextAreaType;\n /** `edit` — shows the editable-affordance background and border. */\n $edit?: boolean;\n /** `noBorder` — suppresses the border by matching it to the background. */\n $noBorder?: boolean;\n /** `Boolean(icon)` — makes room on the left for the icon. */\n $hasIcon?: boolean;\n /*\n * Deferred defect: the component passes `$padding` but the template reads `padding`, so all\n * three padding rules are dead and the documented `medium` default has never applied.\n * Repointing the reads changes the padding of every TextArea, so it needs a re-record.\n * Both halves are declared so the type records the whole defect rather than half of it.\n */\n /** READ by the template, NEVER passed. The dead half — see above. */\n padding?: TextAreaPadding;\n /** PASSED by `TextArea.tsx:118`, never read. The inert half — see above. */\n $padding?: TextAreaPadding;\n}\n\nexport const TextInputField = styled.textarea\n .withConfig({\n shouldForwardProp\n })\n .attrs<TextInputFieldStyleProps>(applyDefaultTheme)`\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 3px;\n padding: 5px 10px;\n resize: vertical;\n z-index: 0;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n transition:\n height 550ms ease-in-out,\n border-color 350ms,\n background 350ms;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )}\n\n ${props =>\n props.$borderRadius &&\n css`\n border-radius: ${props.$borderRadius}px;\n `}\n\n ${props => {\n if (props.$type === 'error') {\n return css`\n ${props.theme.themeProp('color', 'white', 'black')}\n ${props.theme.themeProp('background', '#7f1b1b', '#FBEAE6')}\n ${props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')}\n `;\n } else if (props.$type === 'warning') {\n return css`\n ${props.theme.themeProp('color', 'white', 'black')}\n ${props.theme.themeProp('background', '#634E01', '#FFFDE8')}\n ${props.theme.themeProp('border-color', '#634E01', '#FFFDE8')}\n `;\n } else if (props.$type === 'error-border') {\n return css`\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )}\n ${props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-900'),\n props.theme.getColor('white')\n )}\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('red-200'),\n props.theme.getColor('red-500')\n )}\n `;\n } else if (props.$type === 'warning-border') {\n return css`\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )}\n ${props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-900'),\n props.theme.getColor('white')\n )}\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('red-200'),\n props.theme.getColor('orange-500')\n )}\n `;\n } else {\n return css`\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )}\n ${props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-900'),\n props.theme.getColor('white')\n )}\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-500'),\n props.theme.getColor('gray-400')\n )}\n `;\n }\n }}\n\n\n ${props =>\n props.readOnly &&\n css`\n cursor: default;\n border-color: transparent !important;\n padding: 12px 10px;\n `}\n\n ${props =>\n props.disabled &&\n css`\n cursor: not-allowed;\n `}\n\n\n ${props =>\n props.$noBorder &&\n !props.$type &&\n css`\n ${props =>\n props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-900'),\n props.theme.getColor('white')\n )}\n `} \n\n ${props =>\n props.$noBorder &&\n props.$type === 'warning' &&\n css`\n ${props => props.theme.themeProp('border-color', '#634E01', '#FFFDE8')}\n `}\n\n ${props =>\n props.$noBorder &&\n props.$type === 'error' &&\n css`\n ${props => props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')}\n `}\n\n\n ${props =>\n props.padding === 'small' &&\n css`\n padding: 5px 10px;\n `}\n\n ${props =>\n props.padding === 'medium' &&\n css`\n padding: 13px 15px;\n `}\n\n ${props =>\n props.padding === 'large' &&\n css`\n padding: 15px 55px;\n `}\n\n ${props =>\n props.$hasIcon &&\n css`\n padding-left: 55px;\n padding-right: 35px;\n padding-top: 13.5px;\n `}\n\n\n &&:hover:not(:focus) {\n ${props => {\n if (props.disabled) {\n return '';\n }\n if (props.readOnly) {\n if (props.$type === 'error') {\n return props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');\n } else if (props.$type === 'warning') {\n return props.theme.themeProp('background', '#634E01', '#FFFDE8');\n }\n return '';\n }\n\n if (props.$type === 'error') {\n return props.theme.themeProp('background', '#901d1d', '#F7D5D0');\n } else if (props.$type === 'warning') {\n return props.theme.themeProp('background', '#806403', '#FFFEBF');\n } else if (!props.disabled) {\n return props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-100')\n );\n }\n return '';\n }}\n\n ${props =>\n props.$edit &&\n props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-100')\n )}\n\n ${props =>\n props.$noBorder && !props.readOnly && props.$type !== 'warning' && props.$type !== 'error'\n ? props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-100')\n )\n : ''}\n\n & + ${InputIconContainer} {\n opacity: 1;\n ${props =>\n props.$type === 'success' &&\n css`\n opacity: 0;\n `}\n }\n }\n\n&::placeholder {\n ${props => {\n if (props.$type === 'error' || props.$type === 'warning') {\n return css`\n color: ${props.theme.getColor('gray-400')};\n opacity: 0.9;\n `;\n } else {\n return css`\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-400'),\n props.theme.getColor('gray-500')\n )}\n opacity: 0.6;\n `;\n }\n }}\n}\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-600')\n )};\n\n\n\n &:focus::placeholder {\n ${props => {\n if (props.$type === 'warning' || props.$type === 'error') {\n return css`\n color: ${props.theme.getColor('gray-500')} !important;\n opacity: 0.8 !important;\n `;\n } else {\n return css`\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-600')\n )}\n `;\n }\n }}\n }\n\n &&:focus {\n outline: none;\n\n ${props => {\n if (props.readOnly) {\n if (props.$type === 'error') {\n return props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');\n } else if (props.$type === 'warning') {\n return props.theme.themeProp('background', '#634E01', '#FFFDE8');\n }\n return '';\n }\n\n if (props.$type === 'error') {\n return css`\n ${props.theme.themeProp('border-color', '#D83018', '#D83018')}\n ${props.theme.themeProp('background', 'white', 'white')}\n ${props.theme.themeProp('color', 'black', 'black')}\n `;\n } else if (props.$type === 'warning') {\n return css`\n ${props.theme.themeProp('border-color', '#F4E21E', '#F4E21E')}\n ${props.theme.themeProp('background', 'white', 'white')}\n ${props.theme.themeProp('color', 'black', 'black')}\n `;\n } else {\n return css`\n border-color: ${props.theme.getColor('gray-600')};\n ${props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-100')\n )}\n `;\n }\n }}\n }\n\n &&:not(:hover):not(:focus) {\n ${props => {\n if (props.$edit) {\n if (props.$type === 'error') {\n return props.theme.themeProp('background', '#7f1b1b', '#FEE2E2');\n } else if (props.$type === 'warning') {\n return props.theme.themeProp('background', '#634E01', '#FFFDE8');\n } else {\n return props.theme.themeProp(\n 'background',\n 'rgba(39,39,42, 0.7)',\n 'rgba(244,244,245, 0.3)'\n );\n }\n }\n }}\n\n ${props =>\n props.$edit &&\n props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)')}\n\n ${props =>\n props.$noBorder &&\n props.$edit &&\n css`\n ${props => props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)')}\n `}\n }\n`;\n\n/**\n * Props of `TextInputLabel`, the floating label. All three come from `TextArea.tsx:150-155`.\n */\ninterface TextInputLabelStyleProps {\n /** `inputIsEmpty` state — the label only floats up when the field is NOT empty. */\n $inputIsEmpty?: boolean;\n /** `Boolean(placeholder)` — a placeholder also forces the label up. */\n $hasPlaceholder?: boolean;\n /** `Boolean(icon)` — shifts the label right to clear the icon. */\n $hasIcon?: boolean;\n}\n\nexport const TextInputLabel = styled.label\n .withConfig({\n shouldForwardProp\n })\n .attrs<TextInputLabelStyleProps>(applyDefaultTheme)`\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n margin-botton: 50px;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n\n ${props => props.theme.themeProp('opacity', 0.6, 0.5)}\n\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.$inputIsEmpty &&\n css`\n ${activeLabel}\n `}\n\n ${props =>\n props.$hasPlaceholder &&\n css`\n ${activeLabel};\n `}\n content: \"\";\n\n ${props =>\n props.$hasIcon &&\n css`\n left: 55px;\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 TextInputFieldIconAlert = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<{ $type?: TextAreaType }>(applyDefaultTheme)`\n position: absolute;\n top: 2.8px;\n display: flex;\n padding: 0 10px 0 30px;\n opacity: 0.6;\n transition: opacity 250ms;\n ${props => props.$type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402')}\n svg {\n margin-top: 12px;\n width: 15px;\n }\n`;\n\n/**\n * Props of `TextInput`, the positioning wrapper. `TextArea.tsx:91-98` renders\n * `<S.TextInput $fieldLabel={…} disabled={disabled} readOnly={readOnly} $type={type} …>`.\n */\ninterface TextInputStyleProps extends DisabledStyleProps {\n /** `!isEmpty(fieldLabel)` — narrows the wrapper to 66.66% so the field label gets a third. */\n $fieldLabel?: boolean;\n /** `type` — only the `error` arm is used here, to recolour the floated label. */\n $type?: TextAreaType;\n /*\n * DOM leak: `readOnly` is passed to this `<div>` and never read, so it renders as\n * `readonly=\"\"`. Declared because the component genuinely passes it; deleting it would move\n * the baseline. The inner `<textarea>` gets its own `readOnly`, where the attribute is real.\n */\n /** Passed by `TextArea.tsx:94`, read by nothing. Leaks as `readonly=\"\"`; see above. */\n readOnly?: boolean;\n}\n\nexport const TextInput = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<TextInputStyleProps>(applyDefaultTheme)`\n position: relative;\n flex-basis: ${props => (props.$fieldLabel ? '66.66%' : '100%')};\n\n ${props =>\n props.disabled &&\n css`\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\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.$type === 'error' &&\n props.theme.themeProp(\n 'color',\n props.theme.getColor('red-200'),\n props.theme.getColor('red-500')\n )}\n }\n`;\n\nexport const Description = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<{ $type?: TextAreaType }>(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.$type === 'warning-border' || props.$type === '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 ${props =>\n (props.$type === 'error-border' || props.$type === '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\n/*\n * `$fadeIn` was a dead branch and is gone: it was a slip of `success` that nothing ever\n * passed, so `fadeOutCheck` was unreachable. Wiring it up would need a delayed-unmount state\n * machine, since these containers unmount rather than transition out. The static `animation`\n * stays because the branch it always took is the visible fade-in.\n */\nexport const SuccessContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n opacity: 1;\n pointer-events: none;\n animation: ${fadeInCheck} 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-500')\n )}\n\n > svg {\n width: 15px;\n }\n`;\n\nexport const SuccessContainerLabel = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n opacity: 1;\n pointer-events: none;\n animation: ${fadeInCheck} 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n margin-right: 5px;\n margin-top: -7px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-500')\n )}\n\n > svg {\n width: 13px;\n }\n`;\n"],"names":["fadeInCheck","keyframes","activeLabel","css","shouldForwardProp","prop","startsWith","TextAreaContainter","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","Label","label","props","theme","themeProp","getColor","disabled","InputIconContainer","TextInputField","textarea","$borderRadius","$type","readOnly","$noBorder","padding","$hasIcon","$edit","TextInputLabel","$inputIsEmpty","$hasPlaceholder","TextInputFieldIcon","TextInputFieldIconAlert","TextInput","$fieldLabel","Description","SuccessContainer","SuccessContainerLabel"],"mappings":";;;AAoEA,MAAMA,WAAW,GAAGC,SAAS,CAAA,CAAA,8BAAA,CAAA,CAO5B;AAGD,MAAMC,WAAW,GAAGC,GAAG,CAAA,CAAA,0GAAA,CAAA,CAOtB;AAMD,MAAMC,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAEM,MAAMC,kBAAkB,GAAGC,MAAM,CAACC,GAAG,CACzCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,eAAA,CAAA;AAIpB,MAAMC,KAAK,GAAGP,MAAM,CAACQ,KAAK,CAC9BN,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAAqBC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,uBAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,oJAAA,EAAA,EAAA,CAAA,EAC3CG,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,OAAO,CAAC,EAC7BH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,EASDH,KAAK,IACLA,KAAK,CAACI,QAAQ,IACdlB,GAAG,yBAEF;AAGE,MAAMmB,kBAAkB,GAAGd,MAAM,CAACC,GAAG,CACzCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAAqBC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,gRAAA,EAAA,uDAAA,EAAA,GAAA,CAAA,EAmBzCG,KAAK,IAQLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,kBAAkB,EAClBF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChC,YACF,CAAC,EAODH,KAAK,IACLA,KAAK,CAACI,QAAQ,IACdlB,GAAG,mBAEF;AAsCA,MAAMoB,cAAc,GAAGf,MAAM,CAACgB,QAAQ,CAC1Cd,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAA2BC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,gCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,gPAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,IAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,wBAAA,EAAA,GAAA,EAAA,GAAA,EAAA,OAAA,EAAA,aAAA,EAAA,mBAAA,EAAA,GAAA,EAAA,wBAAA,EAAA,yBAAA,EAAA,8BAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EAgBjDG,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,CAACQ,aAAa,IACnBtB,GAAG,4BACgBc,KAAK,CAACQ,aAAa,CACrC,EAEDR,KAAK,IAAI;AACT,EAAA,IAAIA,KAAK,CAACS,KAAK,KAAK,OAAO,EAAE;AAC3B,IAAA,OAAOvB,GAAG,CAAA,CAAA,EAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EACNc,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAChDF,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC,EACzDF,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AAEjE,EAAA,CAAC,MAAM,IAAIF,KAAK,CAACS,KAAK,KAAK,SAAS,EAAE;AACpC,IAAA,OAAOvB,GAAG,CAAA,CAAA,EAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EACNc,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAChDF,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC,EACzDF,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AAEjE,EAAA,CAAC,MAAM,IAAIF,KAAK,CAACS,KAAK,KAAK,cAAc,EAAE;AACzC,IAAA,OAAOvB,GAAG,CAAA,CAAA,EAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EACNc,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,EACCH,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,YAAY,EACZF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,OAAO,CAC9B,CAAC,EACCH,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,cAAc,EACdF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,EAC/BH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAChC,CAAC,CAAA;AAEL,EAAA,CAAC,MAAM,IAAIH,KAAK,CAACS,KAAK,KAAK,gBAAgB,EAAE;AAC3C,IAAA,OAAOvB,GAAG,CAAA,CAAA,EAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EACNc,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,EACCH,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,YAAY,EACZF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,OAAO,CAC9B,CAAC,EACCH,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,cAAc,EACdF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,EAC/BH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,YAAY,CACnC,CAAC,CAAA;AAEL,EAAA,CAAC,MAAM;AACL,IAAA,OAAOjB,GAAG,CAAA,CAAA,EAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EACNc,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,EACCH,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,YAAY,EACZF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,OAAO,CAC9B,CAAC,EACCH,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,cAAc,EACdF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AAEL,EAAA;AACF,CAAC,EAGCH,KAAK,IACLA,KAAK,CAACU,QAAQ,IACdxB,GAAG,CAAA,CAAA,uEAAA,CAAA,CAIF,EAEDc,KAAK,IACLA,KAAK,CAACI,QAAQ,IACdlB,GAAG,CAAA,CAAA,qBAAA,CAAA,CAEF,EAGDc,KAAK,IACLA,KAAK,CAACW,SAAS,IACf,CAACX,KAAK,CAACS,KAAK,IACZvB,GAAG,WACCc,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,OAAO,CAC9B,CAAC,CACJ,EAEDH,KAAK,IACLA,KAAK,CAACW,SAAS,IACfX,KAAK,CAACS,KAAK,KAAK,SAAS,IACzBvB,GAAG,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA,EACCc,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,CACvE,EAEDF,KAAK,IACLA,KAAK,CAACW,SAAS,IACfX,KAAK,CAACS,KAAK,KAAK,OAAO,IACvBvB,GAAG,WACCc,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,CACvE,EAGDF,KAAK,IACLA,KAAK,CAACY,OAAO,KAAK,OAAO,IACzB1B,GAAG,uBAEF,EAEDc,KAAK,IACLA,KAAK,CAACY,OAAO,KAAK,QAAQ,IAC1B1B,GAAG,wBAEF,EAEDc,KAAK,IACLA,KAAK,CAACY,OAAO,KAAK,OAAO,IACzB1B,GAAG,wBAEF,EAEDc,KAAK,IACLA,KAAK,CAACa,QAAQ,IACd3B,GAAG,CAAA,CAAA,0DAAA,CAAA,CAIF,EAICc,KAAK,IAAI;EACT,IAAIA,KAAK,CAACI,QAAQ,EAAE;AAClB,IAAA,OAAO,EAAE;AACX,EAAA;EACA,IAAIJ,KAAK,CAACU,QAAQ,EAAE;AAClB,IAAA,IAAIV,KAAK,CAACS,KAAK,KAAK,OAAO,EAAE;MAC3B,OAAOT,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC;AAClE,IAAA,CAAC,MAAM,IAAIF,KAAK,CAACS,KAAK,KAAK,SAAS,EAAE;MACpC,OAAOT,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC;AAClE,IAAA;AACA,IAAA,OAAO,EAAE;AACX,EAAA;AAEA,EAAA,IAAIF,KAAK,CAACS,KAAK,KAAK,OAAO,EAAE;IAC3B,OAAOT,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC;AAClE,EAAA,CAAC,MAAM,IAAIF,KAAK,CAACS,KAAK,KAAK,SAAS,EAAE;IACpC,OAAOT,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC;AAClE,EAAA,CAAC,MAAM,IAAI,CAACF,KAAK,CAACI,QAAQ,EAAE;IAC1B,OAAOJ,KAAK,CAACC,KAAK,CAACC,SAAS,CAC1B,YAAY,EACZF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC;AACH,EAAA;AACA,EAAA,OAAO,EAAE;AACX,CAAC,EAECH,KAAK,IACLA,KAAK,CAACc,KAAK,IACXd,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,CAACW,SAAS,IAAI,CAACX,KAAK,CAACU,QAAQ,IAAIV,KAAK,CAACS,KAAK,KAAK,SAAS,IAAIT,KAAK,CAACS,KAAK,KAAK,OAAO,GACtFT,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,GACD,EAAE,EAEFE,kBAAkB,EAEpBL,KAAK,IACLA,KAAK,CAACS,KAAK,KAAK,SAAS,IACzBvB,GAAG,CAAA,CAAA,YAAA,CAAA,CAEF,EAKLc,KAAK,IAAI;EACT,IAAIA,KAAK,CAACS,KAAK,KAAK,OAAO,IAAIT,KAAK,CAACS,KAAK,KAAK,SAAS,EAAE;IACxD,OAAOvB,GAAG,8BACCc,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA;AAG7C,EAAA,CAAC,MAAM;IACL,OAAOjB,GAAG,CAAA,CAAA,EAAA,EAAA,eAAA,CAAA,EACNc,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AAGL,EAAA;AACF,CAAC,EAGCH,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,EAKCH,KAAK,IAAI;EACT,IAAIA,KAAK,CAACS,KAAK,KAAK,SAAS,IAAIT,KAAK,CAACS,KAAK,KAAK,OAAO,EAAE;IACxD,OAAOvB,GAAG,oDACCc,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA;AAG7C,EAAA,CAAC,MAAM;IACL,OAAOjB,GAAG,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA,EACNc,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AAEL,EAAA;AACF,CAAC,EAMCH,KAAK,IAAI;EACT,IAAIA,KAAK,CAACU,QAAQ,EAAE;AAClB,IAAA,IAAIV,KAAK,CAACS,KAAK,KAAK,OAAO,EAAE;MAC3B,OAAOT,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC;AAClE,IAAA,CAAC,MAAM,IAAIF,KAAK,CAACS,KAAK,KAAK,SAAS,EAAE;MACpC,OAAOT,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC;AAClE,IAAA;AACA,IAAA,OAAO,EAAE;AACX,EAAA;AAEA,EAAA,IAAIF,KAAK,CAACS,KAAK,KAAK,OAAO,EAAE;AAC3B,IAAA,OAAOvB,GAAG,CAAA,CAAA,EAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EACNc,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,EAC3DF,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,OAAO,EAAE,OAAO,CAAC,EACvDF,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;AAEpD,EAAA,CAAC,MAAM,IAAIF,KAAK,CAACS,KAAK,KAAK,SAAS,EAAE;AACpC,IAAA,OAAOvB,GAAG,CAAA,CAAA,EAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EACNc,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,EAC3DF,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,OAAO,EAAE,OAAO,CAAC,EACvDF,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;AAEpD,EAAA,CAAC,MAAM;AACL,IAAA,OAAOhB,GAAG,CAAA,CAAA,eAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EACQc,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAC9CH,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,YAAY,EACZF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AAEL,EAAA;AACF,CAAC,EAICH,KAAK,IAAI;EACT,IAAIA,KAAK,CAACc,KAAK,EAAE;AACf,IAAA,IAAId,KAAK,CAACS,KAAK,KAAK,OAAO,EAAE;MAC3B,OAAOT,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC;AAClE,IAAA,CAAC,MAAM,IAAIF,KAAK,CAACS,KAAK,KAAK,SAAS,EAAE;MACpC,OAAOT,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC;AAClE,IAAA,CAAC,MAAM;MACL,OAAOF,KAAK,CAACC,KAAK,CAACC,SAAS,CAC1B,YAAY,EACZ,qBAAqB,EACrB,wBACF,CAAC;AACH,IAAA;AACF,EAAA;AACF,CAAC,EAECF,KAAK,IACLA,KAAK,CAACc,KAAK,IACXd,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,cAAc,EAAE,qBAAqB,EAAE,wBAAwB,CAAC,EAEtFF,KAAK,IACLA,KAAK,CAACW,SAAS,IACfX,KAAK,CAACc,KAAK,IACX5B,GAAG,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA,EACCc,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,cAAc,EAAE,SAAS,EAAE,wBAAwB,CAAC,CACtF;AAgBA,MAAMa,cAAc,GAAGxB,MAAM,CAACQ,KAAK,CACvCN,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAA2BC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,gCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,kHAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,gBAAA,EAAA,EAAA,CAAA,EASjDG,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,OAAO,CAAC,EAC7BH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,EAEGH,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,EAGvDF,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,YAAY,EACZ,yBAAyBF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA,kCAAA,CAAoC,EAC7F,CAAA,sBAAA,EAAyBH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,OAAO,CAAC,CAAA,kCAAA,CACxD,CAAC,EAEDH,KAAK,IACL,CAACA,KAAK,CAACgB,aAAa,IACpB9B,GAAG,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA,EACCD,WAAW,CACd,EAEDe,KAAK,IACLA,KAAK,CAACiB,eAAe,IACrB/B,GAAG,YACCD,WAAW,CACd,EAGDe,KAAK,IACLA,KAAK,CAACa,QAAQ,IACd3B,GAAG,CAAA,CAAA,YAAA,CAAA,CAEF;AAGE,MAAMgC,kBAAkB,GAAG3B,MAAM,CAACC,GAAG,CACzCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,kIAAA,CAAA;AAepB,MAAMsB,uBAAuB,GAAG5B,MAAM,CAACC,GAAG,CAC9CC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAA2BC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,yCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,sGAAA,EAAA,mCAAA,CAAA,EAOjDG,KAAK,IAAIA,KAAK,CAACS,KAAK,KAAK,SAAS,IAAIT,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;AAyBvF,MAAMkB,SAAS,GAAG7B,MAAM,CAACC,GAAG,CAChCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAAsBC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,+BAAA,EAAA,GAAA,EAAA,kBAAA,EAAA,GAAA,EAAA,IAAA,EAAA,oBAAA,EAAA,6BAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EAEhCG,KAAK,IAAKA,KAAK,CAACqB,WAAW,GAAG,QAAQ,GAAG,MAAO,EAE5DrB,KAAK,IACLA,KAAK,CAACI,QAAQ,IACdlB,GAAG,CAAA,CAAA,sCAAA,CAAA,CAMF,EAGC6B,cAAc,EACZ9B,WAAW,EAGbiC,kBAAkB,EAOpBZ,cAAc,EAA8BS,cAAc,EACxD9B,WAAW,EACXe,KAAK,IACLA,KAAK,CAACS,KAAK,KAAK,OAAO,IACvBT,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;AAIA,MAAMmB,WAAW,GAAG/B,MAAM,CAACC,GAAG,CAClCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAA2BC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,6BAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,2EAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAMjDG,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,IACL,CAACA,KAAK,CAACS,KAAK,KAAK,gBAAgB,IAAIT,KAAK,CAACS,KAAK,KAAK,SAAS,KAC9DvB,GAAG,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA,EACCc,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,EAEDH,KAAK,IACL,CAACA,KAAK,CAACS,KAAK,KAAK,cAAc,IAAIT,KAAK,CAACS,KAAK,KAAK,OAAO,KAC1DvB,GAAG,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA,EACCc,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;AASE,MAAMoB,gBAAgB,GAAGhC,MAAM,CAACC,GAAG,CACvCC,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,0CAAA,EAAA,8IAAA,EAAA,qBAAA,CAAA,EAGZd,WAAW,EAQtBiB,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;AAOE,MAAMqB,qBAAqB,GAAGjC,MAAM,CAACC,GAAG,CAC5CC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,uCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0CAAA,EAAA,4HAAA,EAAA,qBAAA,CAAA,EAGZd,WAAW,EAOtBiB,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;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.js","sources":["../../../src/components/inputs/TextInput/TextInput.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\n\nimport { nanoid } from 'nanoid';\n\nimport useMergedRefs from '@restart/hooks/useMergedRefs';\nimport { isEmpty } from 'lodash';\nimport { ReactComponent as EditNoteIcon } from '../../../icons/edit-note.svg';\nimport * as S from './TextInput.styled';\n\ntype TextInputOwnProps = {\n /**\n * Content of the text input field\n */\n value?: string;\n /**\n * Default content of the text input field\n */\n defaultValue?: string;\n /**\n * Name of the text input field (used when sending form data)\n */\n name?: string;\n /**\n * Label text for the text input field. If the text input field is empty (no input and no placeholder)\n * and isn't in focus, the label text will be displayed grayed out in the field itself.\n * Otherwise, the label text will be displayed in the top left corner.\n */\n label?: string;\n /**\n * Placeholder text to be displayed if the text area is empty (no input)\n */\n placeholder?: string;\n /**\n * Type of input – e.g. `text`, `email`, `password`, etc.\n */\n type?: string;\n /**\n * Whether the field is required\n */\n required?: boolean;\n /**\n * Whether the field is disabled\n */\n disabled?: boolean;\n /**\n * Whether the field is read-only\n */\n readOnly?: boolean;\n /**\n * ?\n */\n autoComplete?: string;\n /**\n * Descriptive text displayed below the text input field\n */\n description?: string;\n /**\n * Set to `true` to display the text input field with a red border. Set to a string to\n * aslo display the given string as an error message below the field.\n */\n error?: boolean | string;\n /**\n * Set to `true` to display the text input field with a yellow/orange border. Set to a string to\n * aslo display the given string as a warning message below the field.\n */\n warning?: boolean | string;\n /**\n * Optional icon to be displayed left of the text inside the text area\n */\n icon?: React.ReactElement<any>;\n /**\n * Text to be displayed before/after the user input. Takes an object with two values:\n * `prefix` and `suffix`, where prefix will be displayed before and suffix will be\n * displayed after the user input.\n */\n adornments?: {\n prefix?: string;\n suffix?: string;\n };\n /**\n * Add custom class names to the HTML element\n */\n className?: string;\n /**\n * Add custom CSS styling\n */\n style?: any;\n /**\n * Optional callback function for the `onChange` event\n */\n onChange?: (...args: any[]) => any;\n /**\n * Optional callback function for the `onBlur` event\n */\n onBlur?: (...args: any[]) => any;\n /**\n * Whether to display the text input field without borders when it's not in focus\n */\n noBorder?: boolean;\n};\n\n/*\n * NMB-3998 §C.2: `rest` is spread onto `S.TextInputField`, 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 TextInputOwnProps`);\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.TextInputField>,\n keyof TextInputOwnProps\n> &\n TextInputOwnProps;\n\n/**\n * Text inputs let users enter and edit text in the UI. They typically appear in forms and dialogs.\n *\n * ### Import\n *\n * ``` js\n * import { TextInput } from '@ntbjs/react-components/inputs'\n * // or\n * import TextInput from '@ntbjs/react-components/inputs/TextInput'\n * ```\n */\nconst TextInput = React.forwardRef<any, Props>(function TextInput(\n {\n value,\n defaultValue,\n name,\n label,\n placeholder,\n type = 'text',\n required,\n disabled,\n readOnly,\n autoComplete,\n description,\n error,\n warning,\n icon,\n adornments,\n className,\n style,\n onChange,\n onBlur,\n noBorder = false,\n ...rest\n },\n forwardedRef\n) {\n const textInputDomNode = useRef(null);\n const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);\n const [uniqueId] = useState(nanoid());\n\n /*\n * NMB-3998: `typeof x === 'boolean'` here, not lodash `isBoolean(x)`, and the reason is\n * measurable rather than stylistic. `@types/lodash` IS NOT INSTALLED in this repo and\n * lodash 4 ships no types of its own, so `isBoolean` resolves to `any` — and an `any`\n * test narrows nothing. `error` therefore stayed `boolean | string` inside the branch,\n * `return error` widened these hooks to `string | boolean`, and every styled component\n * they feed rejected `$error` / `$warning` against its declared `boolean`. That was 6 of\n * the 7 TS2769 errors in this file, all from one failed narrowing.\n *\n * Both values are ALREADY `boolean` at runtime for every input this API accepts: the\n * branch returns a boolean, and the fallback `!isEmpty(...)` is a negation. So this\n * records existing behaviour instead of widening the styled generics to a `string` they\n * can never receive — playbook §E.3's rule, \"when a type would have to be widened to\n * accommodate existing behaviour, check whether the behaviour is a bug first\".\n *\n * The one input where native `typeof` and lodash differ is a boxed `new Boolean(...)`,\n * which `typeof` calls 'object'. `error` is declared `boolean | string`, so a boxed\n * Boolean is not a legal value and this cannot regress any supported call.\n */\n const hasError = useMemo(() => {\n if (typeof error === 'boolean') {\n return error;\n }\n\n return !isEmpty(error);\n }, [error]);\n\n const hasWarning = useMemo(() => {\n if (typeof warning === 'boolean') {\n return warning;\n }\n\n return !isEmpty(warning);\n }, [warning]);\n\n const descriptionText = useMemo(() => {\n if (!isEmpty(error)) {\n return error;\n }\n\n if (!isEmpty(warning)) {\n return warning;\n }\n\n if (!isEmpty(description)) {\n return description;\n }\n\n return null;\n }, [description, error, warning]);\n\n return (\n <S.TextInput\n $error={hasError}\n disabled={disabled}\n $warning={hasWarning}\n className={className}\n style={style}\n >\n {typeof icon !== 'undefined' && <S.TextInputFieldIcon>{icon}</S.TextInputFieldIcon>}\n <S.TextInputWrapper>\n {typeof adornments?.prefix === 'string' && adornments.prefix.length > 0 && (\n <S.Adornment\n htmlFor={`text-input-${uniqueId}`}\n $error={hasError}\n $warning={hasWarning}\n $isPrefix={true}\n onClick={() => textInputDomNode.current.focus()}\n >\n {adornments.prefix}\n </S.Adornment>\n )}\n <S.TextInputField\n ref={textInputRef}\n value={value}\n defaultValue={defaultValue}\n name={name}\n placeholder={placeholder || ' '}\n type={type}\n required={required}\n autoComplete={autoComplete}\n $hasIcon={Boolean(icon)}\n $error={hasError}\n $warning={hasWarning}\n id={`text-input-${uniqueId}`}\n onChange={onChange}\n onBlur={onBlur}\n readOnly={readOnly}\n $noBorder={noBorder}\n {...rest}\n />\n {!readOnly && noBorder && (\n <S.InputIconContainer $error={hasError} $warning={hasWarning}>\n <EditNoteIcon />\n </S.InputIconContainer>\n )}\n {label && (\n <S.TextInputLabel\n htmlFor={`text-input-${uniqueId}`}\n $hasPlaceholder={Boolean(placeholder)}\n $hasAdornments={Boolean(\n (typeof adornments?.prefix === 'string' && adornments.prefix.length > 0) ||\n (typeof adornments?.suffix === 'string' && adornments.suffix.length > 0)\n )}\n $hasIcon={Boolean(icon)}\n >\n {/*\n * NMB-3998: `$error={hasError}` removed. TextInput.styled.ts:306-313 already\n * documents this pass as dead and prescribes exactly this fix (\"Fix (type-only,\n * but out of this bucket's scope): stop passing it\"): TextInputLabel's template\n * never reads `$error`, and the error colouring of this label is done by the\n * parent's `${TextInputField}:not(:placeholder-shown) + ${TextInputLabel}` rule\n * instead. Provably output-neutral in both directions — the template does not\n * read it, so the generated class is unchanged, and the `$` prefix means\n * shouldForwardProp already kept it out of the DOM.\n */}\n {label}\n {required && ' *'}\n </S.TextInputLabel>\n )}\n {typeof adornments?.suffix === 'string' && adornments.suffix.length > 0 && (\n <S.Adornment\n $error={hasError}\n $warning={hasWarning}\n $isPrefix={false}\n onClick={() => textInputDomNode.current.focus()}\n >\n {adornments.suffix}\n </S.Adornment>\n )}\n </S.TextInputWrapper>\n {typeof descriptionText === 'string' && descriptionText.length > 0 && (\n <S.Description $error={hasError} $warning={hasWarning}>\n {descriptionText}\n </S.Description>\n )}\n </S.TextInput>\n );\n});\n\nexport default TextInput;\n"],"names":["TextInput","React","forwardRef","value","defaultValue","name","label","placeholder","type","required","disabled","readOnly","autoComplete","description","error","warning","icon","adornments","className","style","onChange","onBlur","noBorder","rest","forwardedRef","textInputDomNode","useRef","textInputRef","useMergedRefs","uniqueId","useState","nanoid","hasError","useMemo","isEmpty","hasWarning","descriptionText","_jsxs","S","$error","$warning","children","_jsx","prefix","length","htmlFor","$isPrefix","onClick","current","focus","ref","$hasIcon","Boolean","id","$noBorder","EditNoteIcon","$hasPlaceholder","$hasAdornments","suffix"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextInput.js","sources":["../../../src/components/inputs/TextInput/TextInput.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\n\nimport { nanoid } from 'nanoid';\n\nimport useMergedRefs from '@restart/hooks/useMergedRefs';\nimport { isEmpty } from 'lodash';\nimport { ReactComponent as EditNoteIcon } from '../../../icons/edit-note.svg';\nimport * as S from './TextInput.styled';\n\ntype TextInputOwnProps = {\n /**\n * Content of the text input field\n */\n value?: string;\n /**\n * Default content of the text input field\n */\n defaultValue?: string;\n /**\n * Name of the text input field (used when sending form data)\n */\n name?: string;\n /**\n * Label text for the text input field. If the text input field is empty (no input and no placeholder)\n * and isn't in focus, the label text will be displayed grayed out in the field itself.\n * Otherwise, the label text will be displayed in the top left corner.\n */\n label?: string;\n /**\n * Placeholder text to be displayed if the text area is empty (no input)\n */\n placeholder?: string;\n /**\n * Type of input – e.g. `text`, `email`, `password`, etc.\n */\n type?: string;\n /**\n * Whether the field is required\n */\n required?: boolean;\n /**\n * Whether the field is disabled\n */\n disabled?: boolean;\n /**\n * Whether the field is read-only\n */\n readOnly?: boolean;\n /**\n * ?\n */\n autoComplete?: string;\n /**\n * Descriptive text displayed below the text input field\n */\n description?: string;\n /**\n * Set to `true` to display the text input field with a red border. Set to a string to\n * aslo display the given string as an error message below the field.\n */\n error?: boolean | string;\n /**\n * Set to `true` to display the text input field with a yellow/orange border. Set to a string to\n * aslo display the given string as a warning message below the field.\n */\n warning?: boolean | string;\n /**\n * Optional icon to be displayed left of the text inside the text area\n */\n icon?: React.ReactElement<any>;\n /**\n * Text to be displayed before/after the user input. Takes an object with two values:\n * `prefix` and `suffix`, where prefix will be displayed before and suffix will be\n * displayed after the user input.\n */\n adornments?: {\n prefix?: string;\n suffix?: string;\n };\n /**\n * Add custom class names to the HTML element\n */\n className?: string;\n /**\n * Add custom CSS styling\n */\n style?: any;\n /**\n * Optional callback function for the `onChange` event\n */\n onChange?: (...args: any[]) => any;\n /**\n * Optional callback function for the `onBlur` event\n */\n onBlur?: (...args: any[]) => any;\n /**\n * Whether to display the text input field without borders when it's not in focus\n */\n noBorder?: boolean;\n};\n\n// Omit before & — a bare intersection narrows colliding props instead of overriding them.\ntype Props = Omit<\n React.ComponentPropsWithoutRef<typeof S.TextInputField>,\n keyof TextInputOwnProps\n> &\n TextInputOwnProps;\n\n/**\n * Text inputs let users enter and edit text in the UI. They typically appear in forms and dialogs.\n *\n * ### Import\n *\n * ``` js\n * import { TextInput } from '@ntbjs/react-components/inputs'\n * // or\n * import TextInput from '@ntbjs/react-components/inputs/TextInput'\n * ```\n */\nconst TextInput = React.forwardRef<any, Props>(function TextInput(\n {\n value,\n defaultValue,\n name,\n label,\n placeholder,\n type = 'text',\n required,\n disabled,\n readOnly,\n autoComplete,\n description,\n error,\n warning,\n icon,\n adornments,\n className,\n style,\n onChange,\n onBlur,\n noBorder = false,\n ...rest\n },\n forwardedRef\n) {\n const textInputDomNode = useRef(null);\n const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);\n const [uniqueId] = useState(nanoid());\n\n // Use typeof for type narrowing since @types/lodash is not installed.\n const hasError = useMemo(() => {\n if (typeof error === 'boolean') {\n return error;\n }\n\n return !isEmpty(error);\n }, [error]);\n\n const hasWarning = useMemo(() => {\n if (typeof warning === 'boolean') {\n return warning;\n }\n\n return !isEmpty(warning);\n }, [warning]);\n\n const descriptionText = useMemo(() => {\n if (!isEmpty(error)) {\n return error;\n }\n\n if (!isEmpty(warning)) {\n return warning;\n }\n\n if (!isEmpty(description)) {\n return description;\n }\n\n return null;\n }, [description, error, warning]);\n\n return (\n <S.TextInput\n $error={hasError}\n disabled={disabled}\n $warning={hasWarning}\n className={className}\n style={style}\n >\n {typeof icon !== 'undefined' && <S.TextInputFieldIcon>{icon}</S.TextInputFieldIcon>}\n <S.TextInputWrapper>\n {typeof adornments?.prefix === 'string' && adornments.prefix.length > 0 && (\n <S.Adornment\n htmlFor={`text-input-${uniqueId}`}\n $error={hasError}\n $warning={hasWarning}\n $isPrefix={true}\n onClick={() => textInputDomNode.current.focus()}\n >\n {adornments.prefix}\n </S.Adornment>\n )}\n <S.TextInputField\n ref={textInputRef}\n value={value}\n defaultValue={defaultValue}\n name={name}\n placeholder={placeholder || ' '}\n type={type}\n required={required}\n autoComplete={autoComplete}\n $hasIcon={Boolean(icon)}\n $error={hasError}\n $warning={hasWarning}\n id={`text-input-${uniqueId}`}\n onChange={onChange}\n onBlur={onBlur}\n readOnly={readOnly}\n $noBorder={noBorder}\n {...rest}\n />\n {!readOnly && noBorder && (\n <S.InputIconContainer $error={hasError} $warning={hasWarning}>\n <EditNoteIcon />\n </S.InputIconContainer>\n )}\n {label && (\n <S.TextInputLabel\n htmlFor={`text-input-${uniqueId}`}\n $hasPlaceholder={Boolean(placeholder)}\n $hasAdornments={Boolean(\n (typeof adornments?.prefix === 'string' && adornments.prefix.length > 0) ||\n (typeof adornments?.suffix === 'string' && adornments.suffix.length > 0)\n )}\n $hasIcon={Boolean(icon)}\n >\n {label}\n {required && ' *'}\n </S.TextInputLabel>\n )}\n {typeof adornments?.suffix === 'string' && adornments.suffix.length > 0 && (\n <S.Adornment\n $error={hasError}\n $warning={hasWarning}\n $isPrefix={false}\n onClick={() => textInputDomNode.current.focus()}\n >\n {adornments.suffix}\n </S.Adornment>\n )}\n </S.TextInputWrapper>\n {typeof descriptionText === 'string' && descriptionText.length > 0 && (\n <S.Description $error={hasError} $warning={hasWarning}>\n {descriptionText}\n </S.Description>\n )}\n </S.TextInput>\n );\n});\n\nexport default TextInput;\n"],"names":["TextInput","React","forwardRef","value","defaultValue","name","label","placeholder","type","required","disabled","readOnly","autoComplete","description","error","warning","icon","adornments","className","style","onChange","onBlur","noBorder","rest","forwardedRef","textInputDomNode","useRef","textInputRef","useMergedRefs","uniqueId","useState","nanoid","hasError","useMemo","isEmpty","hasWarning","descriptionText","_jsxs","S","$error","$warning","children","_jsx","prefix","length","htmlFor","$isPrefix","onClick","current","focus","ref","$hasIcon","Boolean","id","$noBorder","EditNoteIcon","$hasPlaceholder","$hasAdornments","suffix"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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":"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"}
|
|
1
|
+
{"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/* css helper with no interpolations—no generic needed. */\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/* Single-argument for styled-components >=5.1.0; prop needs annotation for withConfig. */\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. 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/* Defect: htmlFor leaks as `for=\"\"` on a <div>; fix deferred (changes rendered DOM). */\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/* readOnly: real InputHTMLAttributes member, no declaration needed. */\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/* $error passes but never reads; error styling via sibling selector instead. */\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/* Defect: disabled leaks as attribute on <div>; fix deferred (changes rendered DOM). */\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":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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
|
|
1
|
+
{"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// Omit before & — a bare intersection would narrow colliding props instead of overriding them.\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":";;;;AAoCA,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;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.styled.js","sources":["../../../src/components/layout/InputGroup/InputGroup.styled.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"InputGroup.styled.js","sources":["../../../src/components/layout/InputGroup/InputGroup.styled.ts"],"sourcesContent":["// No generic needed: no transient props from InputGroup.tsx.\nimport styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n// Single-argument only — v5.1 and v6 differ on second parameter.\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":";;;AAKA,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;;;;"}
|