@laerdal/life-react-components 6.0.0 → 6.0.1
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/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs +0 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.js +0 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/InputFields/TextField.cjs +2 -5
- package/dist/InputFields/TextField.cjs.map +1 -1
- package/dist/InputFields/TextField.d.ts +0 -8
- package/dist/InputFields/TextField.js +2 -5
- package/dist/InputFields/TextField.js.map +1 -1
- package/dist/InputFields/styling.cjs +1 -4
- package/dist/InputFields/styling.cjs.map +1 -1
- package/dist/InputFields/styling.d.ts +0 -1
- package/dist/InputFields/styling.js +1 -4
- package/dist/InputFields/styling.js.map +1 -1
- package/package.json +1 -1
|
@@ -167,7 +167,6 @@ const FooterNewsletterAndSocialSection = _ref => {
|
|
|
167
167
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(NewsletterEmail, {
|
|
168
168
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.TextField, {
|
|
169
169
|
id: "NewsletterEmail",
|
|
170
|
-
withoutBorder: true,
|
|
171
170
|
placeholder: placeholderEmail,
|
|
172
171
|
value: emailInput,
|
|
173
172
|
onChange: value => setEmailInput(value)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FooterNewsletterAndSocialSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styles","_InputFields","_icons","_Button","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","props","ComponentXXSStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","NewsletterEmail","InputFieldStyling","invertedFocusStyles","NewsletterButton","button","ComponentLStyling","Bold","SocialMedia","ComponentXSStyling","SocialMediaButtons","generateToken","componentType","defaultVariant","FooterNewsletterAndSocialSection","_ref","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","emailInput","setEmailInput","useState","jsxs","children","jsx","TextField","id","withoutBorder","placeholder","value","onChange","onClick","target","href","rel","IconButton","variant","action","tabIndex","SystemIcons","Facebook","Twitter","Youtube","propTypes","_propTypes","func","string","isRequired","_default","exports"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\r\nimport {TextField} from '../../InputFields';\r\nimport {SystemIcons} from '../../icons';\r\nimport {IconButton} from '../../Button';\r\nimport {\r\n ComponentLStyling,\r\n ComponentTextStyle,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../../styles';\r\nimport {InputFieldStyling} from '../../InputFields';\r\n\r\nconst NewsletterAndSocial = styled.section`\r\n display: flex;\r\n flex-direction: column;\r\n margin-bottom: 16px;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n flex-direction: row;\r\n }\r\n`;\r\n\r\nconst NewsletterEmailSection = styled.div`\r\n width: 100%;\r\n margin: 16px auto 0 auto;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: 60%;\r\n margin: 16px 0 0 0;\r\n }\r\n\r\n label {\r\n ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme))}\r\n margin-bottom: 2px;\r\n }\r\n div div {\r\n width: 100%;\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: calc(100% - 82px);\r\n width: 288px;\r\n }\r\n }\r\n input {\r\n height: 48px;\r\n }\r\n`;\r\n\r\nconst NewsletterEmail = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n margin: 2px auto 0;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n margin: 2px 0 0 0;\r\n flex-direction: row;\r\n }\r\n\r\n ${InputFieldStyling} {\r\n &.focus-visible {\r\n ${invertedFocusStyles}\r\n }\r\n }\r\n`;\r\n\r\nconst NewsletterButton = styled.button`\r\n background: transparent;\r\n width: 100%;\r\n height: 40px;\r\n border: 2px solid ${props => COLORS.getColor('white', props.theme)};\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n margin: 8px 0 4px 0;\r\n\r\n ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('white', props.theme))}\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: 94px;\r\n margin: auto 0 4px 8px;\r\n }\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n \r\n &:focus {\r\n ${invertedFocusStyles}\r\n }\r\n`;\r\n\r\nconst SocialMedia = styled.div`\r\n color: ${props => COLORS.getColor('white', props.theme)};\r\n margin: 0 auto;\r\n\r\n button div {\r\n box-sizing: border-box;\r\n border-radius: 4px;\r\n }\r\n\r\n h4 {\r\n margin-top: 16px;\r\n margin-bottom: 8px;\r\n \r\n ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n margin: 0 0 0 auto;\r\n button {\r\n margin: 0 0 0 12px;\r\n }\r\n }\r\n`;\r\n\r\nconst SocialMediaButtons = styled.div`\r\n display: flex;\r\n justify-content: center;\r\n\r\n button div {\r\n display: flex;\r\n background-color: transparent;\r\n color: ${props => COLORS.getColor('white', props.theme)};\r\n margin: 0 0 0 20px;\r\n\r\n svg {\r\n fill: ${props => COLORS.getColor('white', props.theme)};\r\n path {\r\n fill: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n }\r\n\r\n &:first-child {\r\n margin: 0;\r\n }\r\n &:hover {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, props.theme)};\r\n }\r\n &:active {\r\n background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n }\r\n a {\r\n &:focus {\r\n ${invertedFocusStyles}\r\n }\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n justify-content: flex-end;\r\n }\r\n`;\r\n\r\ninterface FooterNewsletterAndSocialSection {\r\n actionOnNewsletterSignup?: (email: string) => void;\r\n newsletterLabel: string;\r\n placeholderEmail?: string;\r\n}\r\n\r\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\r\n const [emailInput, setEmailInput] = React.useState<string>('');\r\n return (\r\n <NewsletterAndSocial>\r\n <NewsletterEmailSection>\r\n <label>{newsletterLabel}</label>\r\n <NewsletterEmail>\r\n <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\r\n <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\r\n </NewsletterEmail>\r\n </NewsletterEmailSection>\r\n <SocialMedia>\r\n <h4>Follow us on social media</h4>\r\n <SocialMediaButtons>\r\n <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n <SystemIcons.Facebook />\r\n </IconButton>\r\n </a>\r\n <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n <SystemIcons.Twitter />\r\n </IconButton>\r\n </a>\r\n <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n <SystemIcons.Youtube />\r\n </IconButton>\r\n </a>\r\n </SocialMediaButtons>\r\n </SocialMedia>\r\n </NewsletterAndSocial>\r\n );\r\n};\r\n\r\nexport default FooterNewsletterAndSocialSection;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FooterNewsletterAndSocialSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styles","_InputFields","_icons","_Button","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","props","ComponentXXSStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","NewsletterEmail","InputFieldStyling","invertedFocusStyles","NewsletterButton","button","ComponentLStyling","Bold","SocialMedia","ComponentXSStyling","SocialMediaButtons","generateToken","componentType","defaultVariant","FooterNewsletterAndSocialSection","_ref","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","emailInput","setEmailInput","useState","jsxs","children","jsx","TextField","id","placeholder","value","onChange","onClick","target","href","rel","IconButton","variant","action","tabIndex","SystemIcons","Facebook","Twitter","Youtube","propTypes","_propTypes","func","string","isRequired","_default","exports"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\r\nimport {TextField} from '../../InputFields';\r\nimport {SystemIcons} from '../../icons';\r\nimport {IconButton} from '../../Button';\r\nimport {\r\n ComponentLStyling,\r\n ComponentTextStyle,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../../styles';\r\nimport {InputFieldStyling} from '../../InputFields';\r\n\r\nconst NewsletterAndSocial = styled.section`\r\n display: flex;\r\n flex-direction: column;\r\n margin-bottom: 16px;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n flex-direction: row;\r\n }\r\n`;\r\n\r\nconst NewsletterEmailSection = styled.div`\r\n width: 100%;\r\n margin: 16px auto 0 auto;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: 60%;\r\n margin: 16px 0 0 0;\r\n }\r\n\r\n label {\r\n ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme))}\r\n margin-bottom: 2px;\r\n }\r\n div div {\r\n width: 100%;\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: calc(100% - 82px);\r\n width: 288px;\r\n }\r\n }\r\n input {\r\n height: 48px;\r\n }\r\n`;\r\n\r\nconst NewsletterEmail = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n margin: 2px auto 0;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n margin: 2px 0 0 0;\r\n flex-direction: row;\r\n }\r\n\r\n ${InputFieldStyling} {\r\n &.focus-visible {\r\n ${invertedFocusStyles}\r\n }\r\n }\r\n`;\r\n\r\nconst NewsletterButton = styled.button`\r\n background: transparent;\r\n width: 100%;\r\n height: 40px;\r\n border: 2px solid ${props => COLORS.getColor('white', props.theme)};\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n margin: 8px 0 4px 0;\r\n\r\n ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('white', props.theme))}\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: 94px;\r\n margin: auto 0 4px 8px;\r\n }\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n \r\n &:focus {\r\n ${invertedFocusStyles}\r\n }\r\n`;\r\n\r\nconst SocialMedia = styled.div`\r\n color: ${props => COLORS.getColor('white', props.theme)};\r\n margin: 0 auto;\r\n\r\n button div {\r\n box-sizing: border-box;\r\n border-radius: 4px;\r\n }\r\n\r\n h4 {\r\n margin-top: 16px;\r\n margin-bottom: 8px;\r\n \r\n ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n margin: 0 0 0 auto;\r\n button {\r\n margin: 0 0 0 12px;\r\n }\r\n }\r\n`;\r\n\r\nconst SocialMediaButtons = styled.div`\r\n display: flex;\r\n justify-content: center;\r\n\r\n button div {\r\n display: flex;\r\n background-color: transparent;\r\n color: ${props => COLORS.getColor('white', props.theme)};\r\n margin: 0 0 0 20px;\r\n\r\n svg {\r\n fill: ${props => COLORS.getColor('white', props.theme)};\r\n path {\r\n fill: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n }\r\n\r\n &:first-child {\r\n margin: 0;\r\n }\r\n &:hover {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, props.theme)};\r\n }\r\n &:active {\r\n background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n }\r\n a {\r\n &:focus {\r\n ${invertedFocusStyles}\r\n }\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n justify-content: flex-end;\r\n }\r\n`;\r\n\r\ninterface FooterNewsletterAndSocialSection {\r\n actionOnNewsletterSignup?: (email: string) => void;\r\n newsletterLabel: string;\r\n placeholderEmail?: string;\r\n}\r\n\r\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\r\n const [emailInput, setEmailInput] = React.useState<string>('');\r\n return (\r\n <NewsletterAndSocial>\r\n <NewsletterEmailSection>\r\n <label>{newsletterLabel}</label>\r\n <NewsletterEmail>\r\n <TextField id=\"NewsletterEmail\" placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\r\n <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\r\n </NewsletterEmail>\r\n </NewsletterEmailSection>\r\n <SocialMedia>\r\n <h4>Follow us on social media</h4>\r\n <SocialMediaButtons>\r\n <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n <SystemIcons.Facebook />\r\n </IconButton>\r\n </a>\r\n <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n <SystemIcons.Twitter />\r\n </IconButton>\r\n </a>\r\n <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n <SystemIcons.Youtube />\r\n </IconButton>\r\n </a>\r\n </SocialMediaButtons>\r\n </SocialMedia>\r\n </NewsletterAndSocial>\r\n );\r\n};\r\n\r\nexport default FooterNewsletterAndSocialSection;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -160,7 +160,6 @@ const FooterNewsletterAndSocialSection = _ref => {
|
|
|
160
160
|
}), /*#__PURE__*/_jsxs(NewsletterEmail, {
|
|
161
161
|
children: [/*#__PURE__*/_jsx(TextField, {
|
|
162
162
|
id: "NewsletterEmail",
|
|
163
|
-
withoutBorder: true,
|
|
164
163
|
placeholder: placeholderEmail,
|
|
165
164
|
value: emailInput,
|
|
166
165
|
onChange: value => setEmailInput(value)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FooterNewsletterAndSocialSection.js","names":["React","styled","BREAKPOINTS","COLORS","invertedFocusStyles","TextField","SystemIcons","IconButton","ComponentLStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","InputFieldStyling","jsx","_jsx","jsxs","_jsxs","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","props","Regular","getColor","theme","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","generateToken","componentType","defaultVariant","FooterNewsletterAndSocialSection","_ref","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","emailInput","setEmailInput","useState","children","id","withoutBorder","placeholder","value","onChange","onClick","e","target","href","rel","variant","action","tabIndex","Facebook","Twitter","Youtube","propTypes","_pt","func","string","isRequired"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\r\nimport {TextField} from '../../InputFields';\r\nimport {SystemIcons} from '../../icons';\r\nimport {IconButton} from '../../Button';\r\nimport {\r\n ComponentLStyling,\r\n ComponentTextStyle,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../../styles';\r\nimport {InputFieldStyling} from '../../InputFields';\r\n\r\nconst NewsletterAndSocial = styled.section`\r\n display: flex;\r\n flex-direction: column;\r\n margin-bottom: 16px;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n flex-direction: row;\r\n }\r\n`;\r\n\r\nconst NewsletterEmailSection = styled.div`\r\n width: 100%;\r\n margin: 16px auto 0 auto;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: 60%;\r\n margin: 16px 0 0 0;\r\n }\r\n\r\n label {\r\n ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme))}\r\n margin-bottom: 2px;\r\n }\r\n div div {\r\n width: 100%;\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: calc(100% - 82px);\r\n width: 288px;\r\n }\r\n }\r\n input {\r\n height: 48px;\r\n }\r\n`;\r\n\r\nconst NewsletterEmail = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n margin: 2px auto 0;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n margin: 2px 0 0 0;\r\n flex-direction: row;\r\n }\r\n\r\n ${InputFieldStyling} {\r\n &.focus-visible {\r\n ${invertedFocusStyles}\r\n }\r\n }\r\n`;\r\n\r\nconst NewsletterButton = styled.button`\r\n background: transparent;\r\n width: 100%;\r\n height: 40px;\r\n border: 2px solid ${props => COLORS.getColor('white', props.theme)};\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n margin: 8px 0 4px 0;\r\n\r\n ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('white', props.theme))}\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: 94px;\r\n margin: auto 0 4px 8px;\r\n }\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n \r\n &:focus {\r\n ${invertedFocusStyles}\r\n }\r\n`;\r\n\r\nconst SocialMedia = styled.div`\r\n color: ${props => COLORS.getColor('white', props.theme)};\r\n margin: 0 auto;\r\n\r\n button div {\r\n box-sizing: border-box;\r\n border-radius: 4px;\r\n }\r\n\r\n h4 {\r\n margin-top: 16px;\r\n margin-bottom: 8px;\r\n \r\n ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n margin: 0 0 0 auto;\r\n button {\r\n margin: 0 0 0 12px;\r\n }\r\n }\r\n`;\r\n\r\nconst SocialMediaButtons = styled.div`\r\n display: flex;\r\n justify-content: center;\r\n\r\n button div {\r\n display: flex;\r\n background-color: transparent;\r\n color: ${props => COLORS.getColor('white', props.theme)};\r\n margin: 0 0 0 20px;\r\n\r\n svg {\r\n fill: ${props => COLORS.getColor('white', props.theme)};\r\n path {\r\n fill: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n }\r\n\r\n &:first-child {\r\n margin: 0;\r\n }\r\n &:hover {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, props.theme)};\r\n }\r\n &:active {\r\n background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n }\r\n a {\r\n &:focus {\r\n ${invertedFocusStyles}\r\n }\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n justify-content: flex-end;\r\n }\r\n`;\r\n\r\ninterface FooterNewsletterAndSocialSection {\r\n actionOnNewsletterSignup?: (email: string) => void;\r\n newsletterLabel: string;\r\n placeholderEmail?: string;\r\n}\r\n\r\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\r\n const [emailInput, setEmailInput] = React.useState<string>('');\r\n return (\r\n <NewsletterAndSocial>\r\n <NewsletterEmailSection>\r\n <label>{newsletterLabel}</label>\r\n <NewsletterEmail>\r\n <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\r\n <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\r\n </NewsletterEmail>\r\n </NewsletterEmailSection>\r\n <SocialMedia>\r\n <h4>Follow us on social media</h4>\r\n <SocialMediaButtons>\r\n <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n <SystemIcons.Facebook />\r\n </IconButton>\r\n </a>\r\n <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n <SystemIcons.Twitter />\r\n </IconButton>\r\n </a>\r\n <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n <SystemIcons.Youtube />\r\n </IconButton>\r\n </a>\r\n </SocialMediaButtons>\r\n </SocialMedia>\r\n </NewsletterAndSocial>\r\n );\r\n};\r\n\r\nexport default FooterNewsletterAndSocialSection;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FooterNewsletterAndSocialSection.js","names":["React","styled","BREAKPOINTS","COLORS","invertedFocusStyles","TextField","SystemIcons","IconButton","ComponentLStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","InputFieldStyling","jsx","_jsx","jsxs","_jsxs","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","props","Regular","getColor","theme","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","generateToken","componentType","defaultVariant","FooterNewsletterAndSocialSection","_ref","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","emailInput","setEmailInput","useState","children","id","placeholder","value","onChange","onClick","e","target","href","rel","variant","action","tabIndex","Facebook","Twitter","Youtube","propTypes","_pt","func","string","isRequired"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\r\nimport {TextField} from '../../InputFields';\r\nimport {SystemIcons} from '../../icons';\r\nimport {IconButton} from '../../Button';\r\nimport {\r\n ComponentLStyling,\r\n ComponentTextStyle,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../../styles';\r\nimport {InputFieldStyling} from '../../InputFields';\r\n\r\nconst NewsletterAndSocial = styled.section`\r\n display: flex;\r\n flex-direction: column;\r\n margin-bottom: 16px;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n flex-direction: row;\r\n }\r\n`;\r\n\r\nconst NewsletterEmailSection = styled.div`\r\n width: 100%;\r\n margin: 16px auto 0 auto;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: 60%;\r\n margin: 16px 0 0 0;\r\n }\r\n\r\n label {\r\n ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme))}\r\n margin-bottom: 2px;\r\n }\r\n div div {\r\n width: 100%;\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: calc(100% - 82px);\r\n width: 288px;\r\n }\r\n }\r\n input {\r\n height: 48px;\r\n }\r\n`;\r\n\r\nconst NewsletterEmail = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n margin: 2px auto 0;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n margin: 2px 0 0 0;\r\n flex-direction: row;\r\n }\r\n\r\n ${InputFieldStyling} {\r\n &.focus-visible {\r\n ${invertedFocusStyles}\r\n }\r\n }\r\n`;\r\n\r\nconst NewsletterButton = styled.button`\r\n background: transparent;\r\n width: 100%;\r\n height: 40px;\r\n border: 2px solid ${props => COLORS.getColor('white', props.theme)};\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n margin: 8px 0 4px 0;\r\n\r\n ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('white', props.theme))}\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: 94px;\r\n margin: auto 0 4px 8px;\r\n }\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n \r\n &:focus {\r\n ${invertedFocusStyles}\r\n }\r\n`;\r\n\r\nconst SocialMedia = styled.div`\r\n color: ${props => COLORS.getColor('white', props.theme)};\r\n margin: 0 auto;\r\n\r\n button div {\r\n box-sizing: border-box;\r\n border-radius: 4px;\r\n }\r\n\r\n h4 {\r\n margin-top: 16px;\r\n margin-bottom: 8px;\r\n \r\n ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n margin: 0 0 0 auto;\r\n button {\r\n margin: 0 0 0 12px;\r\n }\r\n }\r\n`;\r\n\r\nconst SocialMediaButtons = styled.div`\r\n display: flex;\r\n justify-content: center;\r\n\r\n button div {\r\n display: flex;\r\n background-color: transparent;\r\n color: ${props => COLORS.getColor('white', props.theme)};\r\n margin: 0 0 0 20px;\r\n\r\n svg {\r\n fill: ${props => COLORS.getColor('white', props.theme)};\r\n path {\r\n fill: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n }\r\n\r\n &:first-child {\r\n margin: 0;\r\n }\r\n &:hover {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, props.theme)};\r\n }\r\n &:active {\r\n background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n }\r\n a {\r\n &:focus {\r\n ${invertedFocusStyles}\r\n }\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n justify-content: flex-end;\r\n }\r\n`;\r\n\r\ninterface FooterNewsletterAndSocialSection {\r\n actionOnNewsletterSignup?: (email: string) => void;\r\n newsletterLabel: string;\r\n placeholderEmail?: string;\r\n}\r\n\r\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\r\n const [emailInput, setEmailInput] = React.useState<string>('');\r\n return (\r\n <NewsletterAndSocial>\r\n <NewsletterEmailSection>\r\n <label>{newsletterLabel}</label>\r\n <NewsletterEmail>\r\n <TextField id=\"NewsletterEmail\" placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\r\n <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\r\n </NewsletterEmail>\r\n </NewsletterEmailSection>\r\n <SocialMedia>\r\n <h4>Follow us on social media</h4>\r\n <SocialMediaButtons>\r\n <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n <SystemIcons.Facebook />\r\n </IconButton>\r\n </a>\r\n <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n <SystemIcons.Twitter />\r\n </IconButton>\r\n </a>\r\n <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n <SystemIcons.Youtube />\r\n </IconButton>\r\n </a>\r\n </SocialMediaButtons>\r\n </SocialMedia>\r\n </NewsletterAndSocial>\r\n );\r\n};\r\n\r\nexport default FooterNewsletterAndSocialSection;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -17,7 +17,7 @@ var _common = require("../common");
|
|
|
17
17
|
var _TooltipOverflow = _interopRequireDefault(require("../Tooltips/TooltipOverflow"));
|
|
18
18
|
var _styledComponents = require("styled-components");
|
|
19
19
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
20
|
-
const _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "
|
|
20
|
+
const _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "state", "size", "margin", "overflowTooltipPosition", "note", "className", "dataTestId"];
|
|
21
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
22
22
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
23
23
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -36,7 +36,6 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
36
36
|
required,
|
|
37
37
|
pattern,
|
|
38
38
|
maxLength,
|
|
39
|
-
withoutBorder,
|
|
40
39
|
state,
|
|
41
40
|
size,
|
|
42
41
|
margin,
|
|
@@ -76,8 +75,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
76
75
|
$activeErrorMessage: !!validationMessage && state !== _types.States.Valid,
|
|
77
76
|
required: required,
|
|
78
77
|
pattern: pattern,
|
|
79
|
-
maxLength: maxLength
|
|
80
|
-
$withoutBorder: withoutBorder
|
|
78
|
+
maxLength: maxLength
|
|
81
79
|
}, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
|
|
82
80
|
value: value,
|
|
83
81
|
position: overflowTooltipPosition,
|
|
@@ -125,7 +123,6 @@ TextField.propTypes = {
|
|
|
125
123
|
required: _propTypes.default.bool,
|
|
126
124
|
pattern: _propTypes.default.string,
|
|
127
125
|
maxLength: _propTypes.default.number,
|
|
128
|
-
withoutBorder: _propTypes.default.bool,
|
|
129
126
|
overflowTooltipPosition: _propTypes.default.oneOf(['top', 'bottom']),
|
|
130
127
|
margin: _propTypes.default.string
|
|
131
128
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.cjs","names":["React","_interopRequireWildcard","require","_icons","_styles","_types","_styling","_common","_TooltipOverflow","_interopRequireDefault","_styledComponents","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties2","elementRef","useFocusVisibleRef","theme","useTheme","useImperativeHandle","current","cls","States","Invalid","jsx","Fragment","children","jsxs","InputWrapper","$readOnly","$disabled","$margin","onClick","preventDefault","InputFieldStyling","tabIndex","undefined","target","$activeErrorMessage","Valid","$withoutBorder","position","input","withArrow","maxWidth","align","ValidationMessage","SystemIcons","CheckMark","color","COLORS","generateToken","componentType","defaultVariant","TechnicalWarning","NoteMessage","icon","message","propTypes","_propTypes","string","bool","func","number","oneOf","_default","exports"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n & {\r\n /**\r\n * Optional. The ID of the text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A function to be called when the text in the text field changes.\r\n * It should take a string representing the new text.\r\n */\r\n onChange?: (text: string) => void;\r\n\r\n /**\r\n * Optional. The current value of the text field.\r\n */\r\n value?: string;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. The type of the text field. Can be any valid HTML input type.\r\n */\r\n type?: string;\r\n\r\n /**\r\n * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n\r\n /**\r\n * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n */\r\n autoComplete?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is required.\r\n */\r\n required?: boolean;\r\n\r\n /**\r\n * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n */\r\n pattern?: string;\r\n\r\n /**\r\n * Optional. The maximum length of the text that can be entered in the text field.\r\n */\r\n maxLength?: number;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field should be displayed without a border.\r\n */\r\n withoutBorder?: boolean;\r\n\r\n /**\r\n * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n */\r\n overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n /**\r\n * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n */\r\n margin?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the text field.\r\n */\r\n note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n id,\r\n disabled,\r\n readOnly,\r\n onChange,\r\n value,\r\n validationMessage,\r\n type,\r\n autoComplete,\r\n placeholder,\r\n required,\r\n pattern,\r\n maxLength,\r\n withoutBorder,\r\n state,\r\n size,\r\n margin,\r\n overflowTooltipPosition,\r\n note,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: TextFieldProps, ref) => {\r\n const elementRef = useFocusVisibleRef();\r\n const theme = useTheme();\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n $readOnly={readOnly}\r\n $disabled={disabled}\r\n $margin={margin}\r\n onClick={(e: any) => {\r\n if (disabled || readOnly) {\r\n e.preventDefault();\r\n }\r\n }}>\r\n <InputFieldStyling\r\n id={id}\r\n data-testid={dataTestId}\r\n ref={elementRef}\r\n type={type || 'text'}\r\n value={value ?? ''}\r\n className={cls}\r\n tabIndex={readOnly || disabled ? -1 : 0}\r\n autoComplete={autoComplete}\r\n placeholder={disabled ? undefined : placeholder}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n required={required}\r\n pattern={pattern}\r\n maxLength={maxLength}\r\n $withoutBorder={withoutBorder}\r\n {...rest}\r\n />\r\n <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n {value}\r\n </TooltipOverflow>\r\n\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/> :\r\n <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>}\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </InputWrapper>\r\n </>\r\n );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"TextField.cjs","names":["React","_interopRequireWildcard","require","_icons","_styles","_types","_styling","_common","_TooltipOverflow","_interopRequireDefault","_styledComponents","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties2","elementRef","useFocusVisibleRef","theme","useTheme","useImperativeHandle","current","cls","States","Invalid","jsx","Fragment","children","jsxs","InputWrapper","$readOnly","$disabled","$margin","onClick","preventDefault","InputFieldStyling","tabIndex","undefined","target","$activeErrorMessage","Valid","position","input","withArrow","maxWidth","align","ValidationMessage","SystemIcons","CheckMark","color","COLORS","generateToken","componentType","defaultVariant","TechnicalWarning","NoteMessage","icon","message","propTypes","_propTypes","string","bool","func","number","oneOf","_default","exports"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n & {\r\n /**\r\n * Optional. The ID of the text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A function to be called when the text in the text field changes.\r\n * It should take a string representing the new text.\r\n */\r\n onChange?: (text: string) => void;\r\n\r\n /**\r\n * Optional. The current value of the text field.\r\n */\r\n value?: string;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. The type of the text field. Can be any valid HTML input type.\r\n */\r\n type?: string;\r\n\r\n /**\r\n * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n\r\n /**\r\n * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n */\r\n autoComplete?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is required.\r\n */\r\n required?: boolean;\r\n\r\n /**\r\n * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n */\r\n pattern?: string;\r\n\r\n /**\r\n * Optional. The maximum length of the text that can be entered in the text field.\r\n */\r\n maxLength?: number;\r\n\r\n /**\r\n * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n */\r\n overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n /**\r\n * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n */\r\n margin?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the text field.\r\n */\r\n note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n id,\r\n disabled,\r\n readOnly,\r\n onChange,\r\n value,\r\n validationMessage,\r\n type,\r\n autoComplete,\r\n placeholder,\r\n required,\r\n pattern,\r\n maxLength,\r\n state,\r\n size,\r\n margin,\r\n overflowTooltipPosition,\r\n note,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: TextFieldProps, ref) => {\r\n const elementRef = useFocusVisibleRef();\r\n const theme = useTheme();\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n $readOnly={readOnly}\r\n $disabled={disabled}\r\n $margin={margin}\r\n onClick={(e: any) => {\r\n if (disabled || readOnly) {\r\n e.preventDefault();\r\n }\r\n }}>\r\n <InputFieldStyling\r\n id={id}\r\n data-testid={dataTestId}\r\n ref={elementRef}\r\n type={type || 'text'}\r\n value={value ?? ''}\r\n className={cls}\r\n tabIndex={readOnly || disabled ? -1 : 0}\r\n autoComplete={autoComplete}\r\n placeholder={disabled ? undefined : placeholder}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n required={required}\r\n pattern={pattern}\r\n maxLength={maxLength}\r\n {...rest}\r\n />\r\n <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n {value}\r\n </TooltipOverflow>\r\n\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/> :\r\n <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>}\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </InputWrapper>\r\n </>\r\n );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -55,10 +55,6 @@ export type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInput
|
|
|
55
55
|
* Optional. The maximum length of the text that can be entered in the text field.
|
|
56
56
|
*/
|
|
57
57
|
maxLength?: number;
|
|
58
|
-
/**
|
|
59
|
-
* Optional. A boolean indicating whether the text field should be displayed without a border.
|
|
60
|
-
*/
|
|
61
|
-
withoutBorder?: boolean;
|
|
62
58
|
/**
|
|
63
59
|
* Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.
|
|
64
60
|
*/
|
|
@@ -130,10 +126,6 @@ declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.I
|
|
|
130
126
|
* Optional. The maximum length of the text that can be entered in the text field.
|
|
131
127
|
*/
|
|
132
128
|
maxLength?: number;
|
|
133
|
-
/**
|
|
134
|
-
* Optional. A boolean indicating whether the text field should be displayed without a border.
|
|
135
|
-
*/
|
|
136
|
-
withoutBorder?: boolean;
|
|
137
129
|
/**
|
|
138
130
|
* Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.
|
|
139
131
|
*/
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _pt from "prop-types";
|
|
4
|
-
const _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "
|
|
4
|
+
const _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "state", "size", "margin", "overflowTooltipPosition", "note", "className", "dataTestId"];
|
|
5
5
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
7
|
import * as React from 'react';
|
|
@@ -27,7 +27,6 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
27
27
|
required,
|
|
28
28
|
pattern,
|
|
29
29
|
maxLength,
|
|
30
|
-
withoutBorder,
|
|
31
30
|
state,
|
|
32
31
|
size,
|
|
33
32
|
margin,
|
|
@@ -67,8 +66,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
67
66
|
$activeErrorMessage: !!validationMessage && state !== States.Valid,
|
|
68
67
|
required: required,
|
|
69
68
|
pattern: pattern,
|
|
70
|
-
maxLength: maxLength
|
|
71
|
-
$withoutBorder: withoutBorder
|
|
69
|
+
maxLength: maxLength
|
|
72
70
|
}, rest)), /*#__PURE__*/_jsx(TooltipOverflow, {
|
|
73
71
|
value: value,
|
|
74
72
|
position: overflowTooltipPosition,
|
|
@@ -116,7 +114,6 @@ TextField.propTypes = {
|
|
|
116
114
|
required: _pt.bool,
|
|
117
115
|
pattern: _pt.string,
|
|
118
116
|
maxLength: _pt.number,
|
|
119
|
-
withoutBorder: _pt.bool,
|
|
120
117
|
overflowTooltipPosition: _pt.oneOf(['top', 'bottom']),
|
|
121
118
|
margin: _pt.string
|
|
122
119
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","useTheme","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","theme","useImperativeHandle","current","cls","Invalid","children","$readOnly","$disabled","$margin","onClick","e","preventDefault","_objectSpread","tabIndex","undefined","target","$activeErrorMessage","Valid","$withoutBorder","position","input","withArrow","maxWidth","align","CheckMark","color","generateToken","componentType","defaultVariant","TechnicalWarning","icon","message","propTypes","_pt","string","bool","func","number","oneOf"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n & {\r\n /**\r\n * Optional. The ID of the text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A function to be called when the text in the text field changes.\r\n * It should take a string representing the new text.\r\n */\r\n onChange?: (text: string) => void;\r\n\r\n /**\r\n * Optional. The current value of the text field.\r\n */\r\n value?: string;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. The type of the text field. Can be any valid HTML input type.\r\n */\r\n type?: string;\r\n\r\n /**\r\n * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n\r\n /**\r\n * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n */\r\n autoComplete?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is required.\r\n */\r\n required?: boolean;\r\n\r\n /**\r\n * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n */\r\n pattern?: string;\r\n\r\n /**\r\n * Optional. The maximum length of the text that can be entered in the text field.\r\n */\r\n maxLength?: number;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field should be displayed without a border.\r\n */\r\n withoutBorder?: boolean;\r\n\r\n /**\r\n * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n */\r\n overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n /**\r\n * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n */\r\n margin?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the text field.\r\n */\r\n note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n id,\r\n disabled,\r\n readOnly,\r\n onChange,\r\n value,\r\n validationMessage,\r\n type,\r\n autoComplete,\r\n placeholder,\r\n required,\r\n pattern,\r\n maxLength,\r\n withoutBorder,\r\n state,\r\n size,\r\n margin,\r\n overflowTooltipPosition,\r\n note,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: TextFieldProps, ref) => {\r\n const elementRef = useFocusVisibleRef();\r\n const theme = useTheme();\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n $readOnly={readOnly}\r\n $disabled={disabled}\r\n $margin={margin}\r\n onClick={(e: any) => {\r\n if (disabled || readOnly) {\r\n e.preventDefault();\r\n }\r\n }}>\r\n <InputFieldStyling\r\n id={id}\r\n data-testid={dataTestId}\r\n ref={elementRef}\r\n type={type || 'text'}\r\n value={value ?? ''}\r\n className={cls}\r\n tabIndex={readOnly || disabled ? -1 : 0}\r\n autoComplete={autoComplete}\r\n placeholder={disabled ? undefined : placeholder}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n required={required}\r\n pattern={pattern}\r\n maxLength={maxLength}\r\n $withoutBorder={withoutBorder}\r\n {...rest}\r\n />\r\n <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n {value}\r\n </TooltipOverflow>\r\n\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/> :\r\n <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>}\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </InputWrapper>\r\n </>\r\n );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","useTheme","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","theme","useImperativeHandle","current","cls","Invalid","children","$readOnly","$disabled","$margin","onClick","e","preventDefault","_objectSpread","tabIndex","undefined","target","$activeErrorMessage","Valid","position","input","withArrow","maxWidth","align","CheckMark","color","generateToken","componentType","defaultVariant","TechnicalWarning","icon","message","propTypes","_pt","string","bool","func","number","oneOf"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n & {\r\n /**\r\n * Optional. The ID of the text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A function to be called when the text in the text field changes.\r\n * It should take a string representing the new text.\r\n */\r\n onChange?: (text: string) => void;\r\n\r\n /**\r\n * Optional. The current value of the text field.\r\n */\r\n value?: string;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. The type of the text field. Can be any valid HTML input type.\r\n */\r\n type?: string;\r\n\r\n /**\r\n * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n\r\n /**\r\n * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n */\r\n autoComplete?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the text field is required.\r\n */\r\n required?: boolean;\r\n\r\n /**\r\n * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n */\r\n pattern?: string;\r\n\r\n /**\r\n * Optional. The maximum length of the text that can be entered in the text field.\r\n */\r\n maxLength?: number;\r\n\r\n /**\r\n * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n */\r\n overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n /**\r\n * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n */\r\n margin?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the text field.\r\n */\r\n note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n id,\r\n disabled,\r\n readOnly,\r\n onChange,\r\n value,\r\n validationMessage,\r\n type,\r\n autoComplete,\r\n placeholder,\r\n required,\r\n pattern,\r\n maxLength,\r\n state,\r\n size,\r\n margin,\r\n overflowTooltipPosition,\r\n note,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: TextFieldProps, ref) => {\r\n const elementRef = useFocusVisibleRef();\r\n const theme = useTheme();\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n $readOnly={readOnly}\r\n $disabled={disabled}\r\n $margin={margin}\r\n onClick={(e: any) => {\r\n if (disabled || readOnly) {\r\n e.preventDefault();\r\n }\r\n }}>\r\n <InputFieldStyling\r\n id={id}\r\n data-testid={dataTestId}\r\n ref={elementRef}\r\n type={type || 'text'}\r\n value={value ?? ''}\r\n className={cls}\r\n tabIndex={readOnly || disabled ? -1 : 0}\r\n autoComplete={autoComplete}\r\n placeholder={disabled ? undefined : placeholder}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n required={required}\r\n pattern={pattern}\r\n maxLength={maxLength}\r\n {...rest}\r\n />\r\n <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n {value}\r\n </TooltipOverflow>\r\n\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/> :\r\n <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>}\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </InputWrapper>\r\n </>\r\n );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -51,10 +51,7 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
|
|
|
51
51
|
|
|
52
52
|
border: 0;
|
|
53
53
|
-webkit-appearance: none;
|
|
54
|
-
${props =>
|
|
55
|
-
-moz-box-shadow: none;
|
|
56
|
-
box-shadow: none;
|
|
57
|
-
` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.generateToken({
|
|
54
|
+
${props => `-webkit-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.generateToken({
|
|
58
55
|
componentType: 'border',
|
|
59
56
|
defaultVariant: 'default'
|
|
60
57
|
}, props.theme)};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styling.cjs","names":["_TooltipStyles","require","_styledComponents","_interopRequireWildcard","_styles","_typography","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputWrapper","exports","styled","div","props","$readOnly","$disabled","$margin","TooltipTrigger","readOnlyState","css","COLORS","generateToken","componentType","state","theme","defaultVariant","activeErrorMessageState","InputFieldStyling","input","$withoutBorder","$extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","ComponentMStyling","$activeErrorMessage","$suppressReadOnlyStyles","focusStyles","Warning","ComponentXXSStyling","Regular","ComponentXSStyling","ErrorMessage","getStateColor","type","States","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n outline: none;\r\n ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n position: relative;\r\n \r\n ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'disabled'}, props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)} !important;\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant:'subtle'}, props.theme)} !important;\r\n pointer-events: none;\r\n outline: none;\r\n cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n $activeErrorMessage?: boolean;\r\n $active?: boolean;\r\n $withoutBorder?: boolean;\r\n $size?: string;\r\n $suppressReadOnlyStyles?: boolean;\r\n $extraRightPadding?: number;\r\n}>`\r\n height: 48px;\r\n width: 100%;\r\n border-radius: 4px;\r\n margin-bottom: 4px;\r\n\r\n border: 0;\r\n -webkit-appearance: none;\r\n ${(props) =>\r\n props.$withoutBorder\r\n ? `-webkit-box-shadow: none;\r\n -moz-box-shadow: none;\r\n box-shadow: none;\r\n `\r\n : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};`}\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n box-sizing: border-box;\r\n padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n text-overflow: ellipsis;\r\n\r\n outline: none;\r\n overflow: hidden;\r\n position: relative;\r\n\r\n font-size: 16px;\r\n\r\n &::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n font-size: 18px;\r\n line-height: 18px;\r\n height: 56px;\r\n padding: 0 16px !important;\r\n\r\n &::placeholder {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n font-size: 16px;\r\n height: 48px;\r\n &::placeholder {\r\n font-size: 16px;\r\n }\r\n }\r\n &.medium {\r\n font-size: 18px;\r\n height: 56px;\r\n &::placeholder {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n color: ${props => COLORS.generateToken({componentType: 'text'}, props.theme)} !important;\r\n\r\n ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n &:read-only:not(:disabled) {\r\n ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n }\r\n\r\n &:disabled {\r\n border: 1px solid ${props => COLORS.generateToken({componentType: 'border', state: 'disabled'}, props.theme)};\r\n pointer-events: none;\r\n box-shadow: none !important;\r\n outline: none;\r\n cursor: not-allowed;\r\n color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)} !important;\r\n }\r\n\r\n &:focus:not(.focus-visible) {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n }\r\n\r\n &.focus-visible {\r\n ${focusStyles}\r\n }\r\n\r\n &.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n }\r\n &.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'positive'}, props.theme)};\r\n }\r\n\r\n &:not(.placeholder) {\r\n line-height: 40px;\r\n }\r\n\r\n &:hover {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'hover'}, props.theme)};\r\n }\r\n\r\n &.active {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'active'}, props.theme)};\r\n }\r\n\r\n &.show-checkmark.valid {\r\n background-image: none;\r\n }\r\n\r\n &.show-checkmark.pending {\r\n background-image: none;\r\n }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n }\r\n\r\n &.small {\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n }\r\n &.medium {\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n }\r\n\r\n & * {\r\n vertical-align: middle;\r\n display: inline-block;\r\n }\r\n\r\n svg {\r\n margin-right: 4px;\r\n }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType:'text', defaultVariant: 'critical'}, props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n if(type === States.Valid) \r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'positive'}, theme);\r\n else if (type === States.Default)\r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, theme);\r\n else \r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'critical'}, theme);\r\n};\r\n \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n`;\r\n\r\nexport { InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n position: absolute;\r\n border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"styling.cjs","names":["_TooltipStyles","require","_styledComponents","_interopRequireWildcard","_styles","_typography","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputWrapper","exports","styled","div","props","$readOnly","$disabled","$margin","TooltipTrigger","readOnlyState","css","COLORS","generateToken","componentType","state","theme","defaultVariant","activeErrorMessageState","InputFieldStyling","input","$extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","ComponentMStyling","$activeErrorMessage","$suppressReadOnlyStyles","focusStyles","Warning","ComponentXXSStyling","Regular","ComponentXSStyling","ErrorMessage","getStateColor","type","States","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n outline: none;\r\n ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n position: relative;\r\n \r\n ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'disabled'}, props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)} !important;\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant:'subtle'}, props.theme)} !important;\r\n pointer-events: none;\r\n outline: none;\r\n cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n $activeErrorMessage?: boolean;\r\n $active?: boolean;\r\n $size?: string;\r\n $suppressReadOnlyStyles?: boolean;\r\n $extraRightPadding?: number;\r\n}>`\r\n height: 48px;\r\n width: 100%;\r\n border-radius: 4px;\r\n margin-bottom: 4px;\r\n\r\n border: 0;\r\n -webkit-appearance: none;\r\n ${(props) =>\r\n `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};`}\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n box-sizing: border-box;\r\n padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n text-overflow: ellipsis;\r\n\r\n outline: none;\r\n overflow: hidden;\r\n position: relative;\r\n\r\n font-size: 16px;\r\n\r\n &::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n font-size: 18px;\r\n line-height: 18px;\r\n height: 56px;\r\n padding: 0 16px !important;\r\n\r\n &::placeholder {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n font-size: 16px;\r\n height: 48px;\r\n &::placeholder {\r\n font-size: 16px;\r\n }\r\n }\r\n &.medium {\r\n font-size: 18px;\r\n height: 56px;\r\n &::placeholder {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n color: ${props => COLORS.generateToken({componentType: 'text'}, props.theme)} !important;\r\n\r\n ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n &:read-only:not(:disabled) {\r\n ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n }\r\n\r\n &:disabled {\r\n border: 1px solid ${props => COLORS.generateToken({componentType: 'border', state: 'disabled'}, props.theme)};\r\n pointer-events: none;\r\n box-shadow: none !important;\r\n outline: none;\r\n cursor: not-allowed;\r\n color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)} !important;\r\n }\r\n\r\n &:focus:not(.focus-visible) {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n }\r\n\r\n &.focus-visible {\r\n ${focusStyles}\r\n }\r\n\r\n &.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n }\r\n &.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'positive'}, props.theme)};\r\n }\r\n\r\n &:not(.placeholder) {\r\n line-height: 40px;\r\n }\r\n\r\n &:hover {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'hover'}, props.theme)};\r\n }\r\n\r\n &.active {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'active'}, props.theme)};\r\n }\r\n\r\n &.show-checkmark.valid {\r\n background-image: none;\r\n }\r\n\r\n &.show-checkmark.pending {\r\n background-image: none;\r\n }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n }\r\n\r\n &.small {\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n }\r\n &.medium {\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n }\r\n\r\n & * {\r\n vertical-align: middle;\r\n display: inline-block;\r\n }\r\n\r\n svg {\r\n margin-right: 4px;\r\n }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType:'text', defaultVariant: 'critical'}, props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n if(type === States.Valid) \r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'positive'}, theme);\r\n else if (type === States.Default)\r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, theme);\r\n else \r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'critical'}, theme);\r\n};\r\n \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n`;\r\n\r\nexport { InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n position: absolute;\r\n border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -9,7 +9,6 @@ export declare const activeErrorMessageState: import("styled-components").RuleSe
|
|
|
9
9
|
declare const InputFieldStyling: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
|
|
10
10
|
$activeErrorMessage?: boolean;
|
|
11
11
|
$active?: boolean;
|
|
12
|
-
$withoutBorder?: boolean;
|
|
13
12
|
$size?: string;
|
|
14
13
|
$suppressReadOnlyStyles?: boolean;
|
|
15
14
|
$extraRightPadding?: number;
|
|
@@ -43,10 +43,7 @@ const InputFieldStyling = styled.input`
|
|
|
43
43
|
|
|
44
44
|
border: 0;
|
|
45
45
|
-webkit-appearance: none;
|
|
46
|
-
${props =>
|
|
47
|
-
-moz-box-shadow: none;
|
|
48
|
-
box-shadow: none;
|
|
49
|
-
` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({
|
|
46
|
+
${props => `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({
|
|
50
47
|
componentType: 'border',
|
|
51
48
|
defaultVariant: 'default'
|
|
52
49
|
}, props.theme)};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","props","$readOnly","$disabled","$margin","readOnlyState","generateToken","componentType","state","theme","defaultVariant","activeErrorMessageState","InputFieldStyling","input","$withoutBorder","$extraRightPadding","Italic","MEDIUM","$activeErrorMessage","$suppressReadOnlyStyles","Warning","Regular","ErrorMessage","getStateColor","type","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n outline: none;\r\n ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n position: relative;\r\n \r\n ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'disabled'}, props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)} !important;\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant:'subtle'}, props.theme)} !important;\r\n pointer-events: none;\r\n outline: none;\r\n cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n $activeErrorMessage?: boolean;\r\n $active?: boolean;\r\n $withoutBorder?: boolean;\r\n $size?: string;\r\n $suppressReadOnlyStyles?: boolean;\r\n $extraRightPadding?: number;\r\n}>`\r\n height: 48px;\r\n width: 100%;\r\n border-radius: 4px;\r\n margin-bottom: 4px;\r\n\r\n border: 0;\r\n -webkit-appearance: none;\r\n ${(props) =>\r\n props.$withoutBorder\r\n ? `-webkit-box-shadow: none;\r\n -moz-box-shadow: none;\r\n box-shadow: none;\r\n `\r\n : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};`}\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n box-sizing: border-box;\r\n padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n text-overflow: ellipsis;\r\n\r\n outline: none;\r\n overflow: hidden;\r\n position: relative;\r\n\r\n font-size: 16px;\r\n\r\n &::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n font-size: 18px;\r\n line-height: 18px;\r\n height: 56px;\r\n padding: 0 16px !important;\r\n\r\n &::placeholder {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n font-size: 16px;\r\n height: 48px;\r\n &::placeholder {\r\n font-size: 16px;\r\n }\r\n }\r\n &.medium {\r\n font-size: 18px;\r\n height: 56px;\r\n &::placeholder {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n color: ${props => COLORS.generateToken({componentType: 'text'}, props.theme)} !important;\r\n\r\n ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n &:read-only:not(:disabled) {\r\n ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n }\r\n\r\n &:disabled {\r\n border: 1px solid ${props => COLORS.generateToken({componentType: 'border', state: 'disabled'}, props.theme)};\r\n pointer-events: none;\r\n box-shadow: none !important;\r\n outline: none;\r\n cursor: not-allowed;\r\n color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)} !important;\r\n }\r\n\r\n &:focus:not(.focus-visible) {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n }\r\n\r\n &.focus-visible {\r\n ${focusStyles}\r\n }\r\n\r\n &.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n }\r\n &.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'positive'}, props.theme)};\r\n }\r\n\r\n &:not(.placeholder) {\r\n line-height: 40px;\r\n }\r\n\r\n &:hover {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'hover'}, props.theme)};\r\n }\r\n\r\n &.active {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'active'}, props.theme)};\r\n }\r\n\r\n &.show-checkmark.valid {\r\n background-image: none;\r\n }\r\n\r\n &.show-checkmark.pending {\r\n background-image: none;\r\n }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n }\r\n\r\n &.small {\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n }\r\n &.medium {\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n }\r\n\r\n & * {\r\n vertical-align: middle;\r\n display: inline-block;\r\n }\r\n\r\n svg {\r\n margin-right: 4px;\r\n }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType:'text', defaultVariant: 'critical'}, props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n if(type === States.Valid) \r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'positive'}, theme);\r\n else if (type === States.Default)\r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, theme);\r\n else \r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'critical'}, theme);\r\n};\r\n \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n`;\r\n\r\nexport { InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n position: absolute;\r\n border-radius: 50%;\r\n`;\r\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,2BAA2B;AAC1D,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,WAAW,EAAEC,MAAM,EAAEC,WAAW,QAAQ,WAAW;AAC5D,SAASC,mBAAmB,EAAEC,kBAAkB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AACxI,SAAcC,MAAM,QAAO,UAAU;AAErC,OAAO,MAAMC,YAAY,GAAGX,MAAM,CAACY,GAAmE;AACtG;AACA,IAAKC,KAAK,IAAMA,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,SAAS,GAAG,sBAAsB,GAAG,EAAG;AACjF,IAAKF,KAAK,IAAMA,KAAK,CAACG,OAAO,GAAG,WAAWH,KAAK,CAACG,OAAO,GAAG,GAAG,EAAG;AACjE;AACA;AACA,IAAIjB,cAAc,CAAC,OAAO,CAAC;AAC3B;AACA,CAAC;AAED,OAAO,MAAMkB,aAAa,GAAGhB,GAAG;AAChC,sBAAsBY,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAC,YAAY;EAAEC,KAAK,EAAC;AAAU,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC;AAChH,gCAAgCR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEG,cAAc,EAAC;AAAS,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AAC9H,WAAWR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,MAAM;EAAEG,cAAc,EAAC;AAAQ,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACvG;AACA;AACA;AACA,CAAC;AACD,OAAO,MAAME,uBAAuB,GAAGtB,GAAG;AAC1C,gCAAgCY,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAAEC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAW,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACnI,CAAC;AAED,MAAMG,iBAAiB,GAAGxB,MAAM,CAACyB,KAO/B;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKZ,KAAK,IACNA,KAAK,CAACa,cAAc,GAChB;AACR;AACA;AACA,OAAO,GACC,6CAA6CvB,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAS,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AAC5I,+CAA+ClB,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAS,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACtI,0CAA0ClB,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAS,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC,GAAG;AACpI,sBAAsBR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAAEC,aAAa,EAAE,YAAY;EAAEG,cAAc,EAAE;AAAU,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AAC5H;AACA,eAAeR,KAAK,IAAI,EAAE,IAAIA,KAAK,CAACc,kBAAkB,IAAI,CAAC,CAAC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMd,KAAK,IAAIN,iBAAiB,CAACD,kBAAkB,CAACsB,MAAM,EAAEzB,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEG,cAAc,EAAE;AAAQ,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC,CAAC;AAChJ;AACA;AACA,IAAInB,WAAW,CAAC2B,MAAM;AACtB;AACA;AACA;AACA;AACA;AACA;AACA,QAAQhB,KAAK,IAAIL,iBAAiB,CAACF,kBAAkB,CAACsB,MAAM,EAAEzB,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEG,cAAc,EAAE;AAAQ,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC,CAAC;AAClJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAWR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE;AAAM,CAAC,EAAEN,KAAK,CAACQ,KAAK,CAAC;AAC9E;AACA,IAAKR,KAAK,IAAMA,KAAK,CAACiB,mBAAmB,GAAGP,uBAAuB,GAAG,EAAG;AACzE;AACA;AACA,MAAOV,KAAK,IAAMA,KAAK,CAACkB,uBAAuB,GAAG,EAAE,GAAGd,aAAc;AACrE;AACA;AACA;AACA,wBAAwBJ,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEC,KAAK,EAAE;AAAU,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC;AAChH;AACA;AACA;AACA;AACA,aAAaR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,MAAM;EAAEC,KAAK,EAAE;AAAU,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC;AACnG;AACA;AACA;AACA,wCAAwCR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAU,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACzI;AACA;AACA;AACA,MAAMjB,WAAW;AACjB;AACA;AACA;AACA,kCAAkCS,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAU,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACnI;AACA;AACA,kCAAkCR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAU,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACnI;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wCAAwCR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEC,KAAK,EAAE;AAAO,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC;AAC7H;AACA;AACA;AACA,wCAAwCR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEC,KAAK,EAAE;AAAQ,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC;AAC9H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMW,OAAO,GAAGhC,MAAM,CAACY,GAAG;AACjC;AACA;AACA;AACA,IAAIP,mBAAmB,CAACC,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA,IAAI/B,WAAW,CAAC2B,MAAM;AACtB,MAAMpB,kBAAkB,CAACH,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM5B,mBAAmB,CAACC,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA,MAAMxB,kBAAkB,CAACH,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,OAAO,MAAMC,YAAY,GAAGlC,MAAM,CAACgC,OAAO,CAAC;AAC3C,WAAWnB,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEG,cAAc,EAAE;AAAU,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACzG,CAAC;AAED,MAAMc,aAAa,GAAGA,CAACC,IAAY,EAAEf,KAAU,KAAK;EAClD,IAAGe,IAAI,KAAK1B,MAAM,CAAC2B,KAAK,EACtB,OAAOlC,MAAM,CAACe,aAAa,CAAC;IAACC,aAAa,EAAE,MAAM;IAAEG,cAAc,EAAE;EAAU,CAAC,EAAED,KAAK,CAAC,CAAC,KACrF,IAAIe,IAAI,KAAK1B,MAAM,CAAC4B,OAAO,EAC9B,OAAOnC,MAAM,CAACe,aAAa,CAAC;IAACC,aAAa,EAAE,MAAM;IAAEG,cAAc,EAAE;EAAS,CAAC,EAAED,KAAK,CAAC,CAAC,KAEvF,OAAOlB,MAAM,CAACe,aAAa,CAAC;IAACC,aAAa,EAAE,MAAM;IAAEG,cAAc,EAAE;EAAU,CAAC,EAAED,KAAK,CAAC;AAC3F,CAAC;AAED,OAAO,MAAMkB,iBAAiB,GAAGvC,MAAM,CAACgC,OAAO,CAA0D;AACzG,WAAYnB,KAAK,IAAKsB,aAAa,CAACtB,KAAK,CAACuB,IAAI,EAAEvB,KAAK,CAACQ,KAAK,CAAC;AAC5D,CAAC;AAED,OAAO,MAAMmB,WAAW,GAAGxC,MAAM,CAACgC,OAAO,CAAC;AAC1C,WAAWnB,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,MAAM;EAAEG,cAAc,EAAE;AAAS,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACzG,CAAC;AACD,OAAO,MAAMoB,iBAAiB,GAAGzC,MAAM,CAACgC,OAAO,CAAC;AAChD,WAAWnB,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,MAAM;EAAEG,cAAc,EAAE;AAAQ,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACxG,CAAC;AAED,SAASG,iBAAiB;AAE1B,OAAO,MAAMkB,UAAU,GAAG1C,MAAM,CAACY,GAAG;AACpC;AACA,CAAC;AAED,OAAO,MAAM+B,iBAAiB,GAAG3C,MAAM,CAAC0C,UAAU,CAAC;AACnD;AACA;AACA,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","props","$readOnly","$disabled","$margin","readOnlyState","generateToken","componentType","state","theme","defaultVariant","activeErrorMessageState","InputFieldStyling","input","$extraRightPadding","Italic","MEDIUM","$activeErrorMessage","$suppressReadOnlyStyles","Warning","Regular","ErrorMessage","getStateColor","type","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n outline: none;\r\n ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n position: relative;\r\n \r\n ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'disabled'}, props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)} !important;\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant:'subtle'}, props.theme)} !important;\r\n pointer-events: none;\r\n outline: none;\r\n cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n $activeErrorMessage?: boolean;\r\n $active?: boolean;\r\n $size?: string;\r\n $suppressReadOnlyStyles?: boolean;\r\n $extraRightPadding?: number;\r\n}>`\r\n height: 48px;\r\n width: 100%;\r\n border-radius: 4px;\r\n margin-bottom: 4px;\r\n\r\n border: 0;\r\n -webkit-appearance: none;\r\n ${(props) =>\r\n `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};`}\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n box-sizing: border-box;\r\n padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n text-overflow: ellipsis;\r\n\r\n outline: none;\r\n overflow: hidden;\r\n position: relative;\r\n\r\n font-size: 16px;\r\n\r\n &::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n font-size: 18px;\r\n line-height: 18px;\r\n height: 56px;\r\n padding: 0 16px !important;\r\n\r\n &::placeholder {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n font-size: 16px;\r\n height: 48px;\r\n &::placeholder {\r\n font-size: 16px;\r\n }\r\n }\r\n &.medium {\r\n font-size: 18px;\r\n height: 56px;\r\n &::placeholder {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n color: ${props => COLORS.generateToken({componentType: 'text'}, props.theme)} !important;\r\n\r\n ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n &:read-only:not(:disabled) {\r\n ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n }\r\n\r\n &:disabled {\r\n border: 1px solid ${props => COLORS.generateToken({componentType: 'border', state: 'disabled'}, props.theme)};\r\n pointer-events: none;\r\n box-shadow: none !important;\r\n outline: none;\r\n cursor: not-allowed;\r\n color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)} !important;\r\n }\r\n\r\n &:focus:not(.focus-visible) {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n }\r\n\r\n &.focus-visible {\r\n ${focusStyles}\r\n }\r\n\r\n &.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n }\r\n &.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'positive'}, props.theme)};\r\n }\r\n\r\n &:not(.placeholder) {\r\n line-height: 40px;\r\n }\r\n\r\n &:hover {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'hover'}, props.theme)};\r\n }\r\n\r\n &.active {\r\n box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'active'}, props.theme)};\r\n }\r\n\r\n &.show-checkmark.valid {\r\n background-image: none;\r\n }\r\n\r\n &.show-checkmark.pending {\r\n background-image: none;\r\n }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n }\r\n\r\n &.small {\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n }\r\n &.medium {\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n }\r\n\r\n & * {\r\n vertical-align: middle;\r\n display: inline-block;\r\n }\r\n\r\n svg {\r\n margin-right: 4px;\r\n }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType:'text', defaultVariant: 'critical'}, props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n if(type === States.Valid) \r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'positive'}, theme);\r\n else if (type === States.Default)\r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, theme);\r\n else \r\n return COLORS.generateToken({componentType: 'text', defaultVariant: 'critical'}, theme);\r\n};\r\n \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n`;\r\n\r\nexport { InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n position: absolute;\r\n border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
|