@laerdal/life-react-components 3.0.1-dev.9.full → 3.1.0-dev.1

package/dist/InputFields/components/SearchBarInput.d.ts

@@ -1,20 +1,20 @@
-import * as React from 'react';
-import { Size } from '../../types';
-export declare const Search: import("styled-components").StyledComponent<"input", any, {
-    type: "search";
-}, "type">;
-type SearchBarInputProps = {
-    id: string;
-    searchTerm?: string;
-    setSearchTerm: (term: string) => void;
-    enterSearch: (e: any) => void;
-    placeholder?: string;
-    disabled?: boolean;
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    size?: Size.Small | Size.Medium;
-    onBlur?: (e: any) => void;
-    focusParentRefs?: React.RefObject<any>[];
-    onClick?: () => void;
-};
-declare const SearchBarInput: React.ForwardRefExoticComponent<SearchBarInputProps & React.RefAttributes<HTMLInputElement>>;
-export default SearchBarInput;
+import * as React from 'react';
+import { Size } from '../../types';
+export declare const Search: import("styled-components").StyledComponent<"input", any, {
+    type: "search";
+}, "type">;
+type SearchBarInputProps = {
+    id: string;
+    searchTerm?: string;
+    setSearchTerm: (term: string) => void;
+    enterSearch: (e: any) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    size?: Size.Small | Size.Medium;
+    onBlur?: (e: any) => void;
+    focusParentRefs?: React.RefObject<any>[];
+    onClick?: () => void;
+};
+declare const SearchBarInput: React.ForwardRefExoticComponent<SearchBarInputProps & React.RefAttributes<HTMLInputElement>>;
+export default SearchBarInput;

package/dist/InputFields/components/SearchBarInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBarInput.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","Search","input","attrs","type","Italic","neutral_500","Regular","black","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n  appearance: none;\r\n  width: calc(100% - 96px);\r\n\r\n  /* To prevent browser putting its own cross inside the search bar */\r\n\r\n  ::-ms-clear {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  ::-ms-reveal {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  ::-webkit-search-decoration,\r\n  ::-webkit-search-cancel-button,\r\n  ::-webkit-search-results-button,\r\n  ::-webkit-search-results-decoration {\r\n    display: none;\r\n  }\r\n\r\n  ::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n\r\n  height: 32px;\r\n  border-width: 0;\r\n  margin-left: 48px;\r\n  outline: none;\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  ::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    margin-left: 44px;\r\n\r\n    ::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    \r\n    ::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background: transparent;\r\n    border: none;\r\n  }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  onBlur?: (e: any) => void;\r\n  focusParentRefs?: React.RefObject<any>[];\r\n  onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <Search\r\n      placeholder={disabled ? '' : placeholder}\r\n      ref={elementRef}\r\n      id={id}\r\n      data-testid={id}\r\n      className={size ? size : ''}\r\n      tabIndex={0}\r\n      disabled={disabled}\r\n      onChange={(e: any) => setSearchTerm(e.target.value)}\r\n      value={searchTerm}\r\n      onBlur={(e) => onBlur && onBlur(e)}\r\n      onKeyDown={onKeyDown}\r\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n      onClick={onClick}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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"}
+{"version":3,"file":"SearchBarInput.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","Search","input","attrs","type","Italic","neutral_500","Regular","black","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { Size } from '../../types';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { useFocusVisibleRef } from '../../common';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    \n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  onBlur?: (e: any) => void;\n  focusParentRefs?: React.RefObject<any>[];\n  onClick?: ()=>void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <Search\n      placeholder={disabled ? '' : placeholder}\n      ref={elementRef}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      onBlur={(e) => onBlur && onBlur(e)}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n      onClick={onClick}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"mappings":"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"}

package/dist/InputFields/components/SearchField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.cjs","names":["SearchFieldWrapper","styled","div","focusStyles","StyledSearchField","COLORS","neutral_400","white","ComponentSStyling","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","primary_800","neutral_600","critical_400","neutral_100","SearchField","React","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { Size } from '../../types';\r\n\r\nexport const SearchFieldWrapper = styled.div`\r\n  &.focus-visible-within {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n  margin-bottom: 4px;\r\n  box-sizing: border-box;\r\n  border-radius: 56px;\r\n  align-items: center;\r\n  position: relative;\r\n  height: 48px;\r\n  appearance: none;\r\n  background-color: ${COLORS.white};\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n  padding: 0 !important;\r\n  width: 100%;\r\n\r\n  ::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n    height: 56px;\r\n    padding: 0 4px !important;\r\n\r\n    &::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    height: 48px;\r\n    padding: 0 !important;\r\n\r\n    &::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  div {\r\n    color: ${COLORS.neutral_600};\r\n    background-color: transparent;\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\r\n  }\r\n\r\n  &.disabled {\r\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n    pointer-events: none;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  id: string;\r\n  searchTerm?: string;\r\n  disabled?: boolean;\r\n  validationMessage?: string;\r\n  children: any;\r\n  size?: Size.Small | Size.Medium;\r\n};\r\n\r\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\r\n  const cls = (disabled ? 'disabled ' : '')\r\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\r\n    .concat(size ? `${size} ` : '')\r\n    .concat(validationMessage ? ' invalid ' : '')\r\n    .concat(`${className ?? ''} `);\r\n\r\n  return (\r\n    <SearchFieldWrapper ref={ref}>\r\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\r\n        {children}\r\n      </StyledSearchField>\r\n    </SearchFieldWrapper>\r\n  );\r\n});\r\n\r\nexport default SearchField;\r\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAG7D,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG,iIAEtCC,kBAAW,CAEhB;AAAC;AAEK,IAAMC,iBAAiB,GAAGH,yBAAM,CAACC,GAAG,mpCAGXG,aAAM,CAACC,WAAW,EAQ5BD,aAAM,CAACE,KAAK,EAE9B,IAAAC,yBAAiB,EAACC,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAMzD,IAAAH,yBAAiB,EAACC,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAGlEC,kBAAW,CAACC,MAAM,EAChB,IAAAC,yBAAiB,EAACP,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAMzD,IAAAK,yBAAiB,EAACP,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAKlE,IAAAL,yBAAiB,EAACC,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAKzD,IAAAH,yBAAiB,EAACC,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAKlE,IAAAG,yBAAiB,EAACP,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAIzD,IAAAK,yBAAiB,EAACP,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAKtCR,aAAM,CAACY,WAAW,EAIlBZ,aAAM,CAACY,WAAW,EAIvCZ,aAAM,CAACa,WAAW,EAKGb,aAAM,CAACc,YAAY,EAInBd,aAAM,CAACe,WAAW,CAInD;AAAC;AAWF,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAU,CAAkC,gBAAsFC,GAAG,EAAK;EAAA,IAA3FC,EAAE,QAAFA,EAAE;IAAEC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,iBAAiB,QAAjBA,iBAAiB;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACtJ,IAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAW,GAAG,EAAE,EACrCO,MAAM,CAACR,UAAU,KAAK,EAAE,GAAG,eAAe,GAAG,EAAE,CAAC,CAChDQ,MAAM,CAACJ,IAAI,aAAMA,IAAI,SAAM,EAAE,CAAC,CAC9BI,MAAM,CAACN,iBAAiB,GAAG,WAAW,GAAG,EAAE,CAAC,CAC5CM,MAAM,WAAIH,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,OAAI;EAEhC,oBACE,qBAAC,kBAAkB;IAAC,GAAG,EAAEP,GAAI;IAAA,uBAC3B,qBAAC,iBAAiB;MAAC,EAAE,YAAKC,EAAE,UAAQ;MAAC,yBAAgBA,EAAE,UAAQ;MAAC,SAAS,EAAEQ;IAAI,GAAKD,IAAI;MAAA,UACrFH;IAAQ;EACS,EACD;AAEzB,CAAC,CAAC;AAAC;EAtBDJ,EAAE;EACFC,UAAU;EACVC,QAAQ;EACRC,iBAAiB;EACjBC,QAAQ;AAAA;AAAA,eAoBKR,WAAW;AAAA"}
+{"version":3,"file":"SearchField.cjs","names":["SearchFieldWrapper","styled","div","focusStyles","StyledSearchField","COLORS","neutral_400","white","ComponentSStyling","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","primary_800","neutral_600","critical_400","neutral_100","SearchField","React","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (disabled ? 'disabled ' : '')\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\n    .concat(size ? `${size} ` : '')\n    .concat(validationMessage ? ' invalid ' : '')\n    .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAG7D,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG,iIAEtCC,kBAAW,CAEhB;AAAC;AAEK,IAAMC,iBAAiB,GAAGH,yBAAM,CAACC,GAAG,mpCAGXG,aAAM,CAACC,WAAW,EAQ5BD,aAAM,CAACE,KAAK,EAE9B,IAAAC,yBAAiB,EAACC,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAMzD,IAAAH,yBAAiB,EAACC,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAGlEC,kBAAW,CAACC,MAAM,EAChB,IAAAC,yBAAiB,EAACP,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAMzD,IAAAK,yBAAiB,EAACP,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAKlE,IAAAL,yBAAiB,EAACC,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAKzD,IAAAH,yBAAiB,EAACC,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAKlE,IAAAG,yBAAiB,EAACP,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAIzD,IAAAK,yBAAiB,EAACP,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAKtCR,aAAM,CAACY,WAAW,EAIlBZ,aAAM,CAACY,WAAW,EAIvCZ,aAAM,CAACa,WAAW,EAKGb,aAAM,CAACc,YAAY,EAInBd,aAAM,CAACe,WAAW,CAInD;AAAC;AAWF,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAU,CAAkC,gBAAsFC,GAAG,EAAK;EAAA,IAA3FC,EAAE,QAAFA,EAAE;IAAEC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,iBAAiB,QAAjBA,iBAAiB;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACtJ,IAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAW,GAAG,EAAE,EACrCO,MAAM,CAACR,UAAU,KAAK,EAAE,GAAG,eAAe,GAAG,EAAE,CAAC,CAChDQ,MAAM,CAACJ,IAAI,aAAMA,IAAI,SAAM,EAAE,CAAC,CAC9BI,MAAM,CAACN,iBAAiB,GAAG,WAAW,GAAG,EAAE,CAAC,CAC5CM,MAAM,WAAIH,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,OAAI;EAEhC,oBACE,qBAAC,kBAAkB;IAAC,GAAG,EAAEP,GAAI;IAAA,uBAC3B,qBAAC,iBAAiB;MAAC,EAAE,YAAKC,EAAE,UAAQ;MAAC,yBAAgBA,EAAE,UAAQ;MAAC,SAAS,EAAEQ;IAAI,GAAKD,IAAI;MAAA,UACrFH;IAAQ;EACS,EACD;AAEzB,CAAC,CAAC;AAAC;EAtBDJ,EAAE;EACFC,UAAU;EACVC,QAAQ;EACRC,iBAAiB;EACjBC,QAAQ;AAAA;AAAA,eAoBKR,WAAW;AAAA"}

package/dist/InputFields/components/SearchField.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { Size } from '../../types';
-export declare const SearchFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledSearchField: import("styled-components").StyledComponent<"div", any, {
-    activeValidationMessage?: boolean | undefined;
-}, never>;
-declare const SearchField: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    id: string;
-    searchTerm?: string | undefined;
-    disabled?: boolean | undefined;
-    validationMessage?: string | undefined;
-    children: any;
-    size?: Size.Small | Size.Medium | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export default SearchField;
+import * as React from 'react';
+import { Size } from '../../types';
+export declare const SearchFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSearchField: import("styled-components").StyledComponent<"div", any, {
+    activeValidationMessage?: boolean | undefined;
+}, never>;
+declare const SearchField: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    id: string;
+    searchTerm?: string | undefined;
+    disabled?: boolean | undefined;
+    validationMessage?: string | undefined;
+    children: any;
+    size?: Size.Small | Size.Medium | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default SearchField;

package/dist/InputFields/components/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","SearchFieldWrapper","div","StyledSearchField","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_800","neutral_600","critical_400","neutral_100","SearchField","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { Size } from '../../types';\r\n\r\nexport const SearchFieldWrapper = styled.div`\r\n  &.focus-visible-within {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n  margin-bottom: 4px;\r\n  box-sizing: border-box;\r\n  border-radius: 56px;\r\n  align-items: center;\r\n  position: relative;\r\n  height: 48px;\r\n  appearance: none;\r\n  background-color: ${COLORS.white};\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n  padding: 0 !important;\r\n  width: 100%;\r\n\r\n  ::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n    height: 56px;\r\n    padding: 0 4px !important;\r\n\r\n    &::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    height: 48px;\r\n    padding: 0 !important;\r\n\r\n    &::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  div {\r\n    color: ${COLORS.neutral_600};\r\n    background-color: transparent;\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\r\n  }\r\n\r\n  &.disabled {\r\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n    pointer-events: none;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  id: string;\r\n  searchTerm?: string;\r\n  disabled?: boolean;\r\n  validationMessage?: string;\r\n  children: any;\r\n  size?: Size.Small | Size.Medium;\r\n};\r\n\r\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\r\n  const cls = (disabled ? 'disabled ' : '')\r\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\r\n    .concat(size ? `${size} ` : '')\r\n    .concat(validationMessage ? ' invalid ' : '')\r\n    .concat(`${className ?? ''} `);\r\n\r\n  return (\r\n    <SearchFieldWrapper ref={ref}>\r\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\r\n        {children}\r\n      </StyledSearchField>\r\n    </SearchFieldWrapper>\r\n  );\r\n});\r\n\r\nexport default SearchField;\r\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,WAAW,EAAEC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,oBAAoB;AACzF,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,cAAc;AAAC;AAGpE,OAAO,IAAMC,kBAAkB,GAAGP,MAAM,CAACQ,GAAG,mHAEtCJ,WAAW,CAEhB;AAED,OAAO,IAAMK,iBAAiB,GAAGT,MAAM,CAACQ,GAAG,qoCAGXN,MAAM,CAACQ,WAAW,EAQ5BR,MAAM,CAACS,KAAK,EAE9BL,iBAAiB,CAACH,kBAAkB,CAACS,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAMzDP,iBAAiB,CAACH,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAGlEd,WAAW,CAACe,MAAM,EAChBX,iBAAiB,CAACF,kBAAkB,CAACS,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAMzDR,iBAAiB,CAACF,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAKlET,iBAAiB,CAACH,kBAAkB,CAACS,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAKzDP,iBAAiB,CAACH,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAKlEV,iBAAiB,CAACF,kBAAkB,CAACS,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAIzDR,iBAAiB,CAACF,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAKtCb,MAAM,CAACe,WAAW,EAIlBf,MAAM,CAACe,WAAW,EAIvCf,MAAM,CAACgB,WAAW,EAKGhB,MAAM,CAACiB,YAAY,EAInBjB,MAAM,CAACkB,WAAW,CAInD;AAWD,IAAMC,WAAW,gBAAGtB,KAAK,CAACuB,UAAU,CAAkC,gBAAsFC,GAAG,EAAK;EAAA,IAA3FC,EAAE,QAAFA,EAAE;IAAEC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,iBAAiB,QAAjBA,iBAAiB;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACtJ,IAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAW,GAAG,EAAE,EACrCO,MAAM,CAACR,UAAU,KAAK,EAAE,GAAG,eAAe,GAAG,EAAE,CAAC,CAChDQ,MAAM,CAACJ,IAAI,aAAMA,IAAI,SAAM,EAAE,CAAC,CAC9BI,MAAM,CAACN,iBAAiB,GAAG,WAAW,GAAG,EAAE,CAAC,CAC5CM,MAAM,WAAIH,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,OAAI;EAEhC,oBACE,KAAC,kBAAkB;IAAC,GAAG,EAAEP,GAAI;IAAA,uBAC3B,KAAC,iBAAiB;MAAC,EAAE,YAAKC,EAAE,UAAQ;MAAC,yBAAgBA,EAAE,UAAQ;MAAC,SAAS,EAAEQ;IAAI,GAAKD,IAAI;MAAA,UACrFH;IAAQ;EACS,EACD;AAEzB,CAAC,CAAC;AAAC;EAtBDJ,EAAE;EACFC,UAAU;EACVC,QAAQ;EACRC,iBAAiB;EACjBC,QAAQ;AAAA;AAoBV,eAAeP,WAAW"}
+{"version":3,"file":"SearchField.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","SearchFieldWrapper","div","StyledSearchField","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_800","neutral_600","critical_400","neutral_100","SearchField","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (disabled ? 'disabled ' : '')\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\n    .concat(size ? `${size} ` : '')\n    .concat(validationMessage ? ' invalid ' : '')\n    .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,WAAW,EAAEC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,oBAAoB;AACzF,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,cAAc;AAAC;AAGpE,OAAO,IAAMC,kBAAkB,GAAGP,MAAM,CAACQ,GAAG,mHAEtCJ,WAAW,CAEhB;AAED,OAAO,IAAMK,iBAAiB,GAAGT,MAAM,CAACQ,GAAG,qoCAGXN,MAAM,CAACQ,WAAW,EAQ5BR,MAAM,CAACS,KAAK,EAE9BL,iBAAiB,CAACH,kBAAkB,CAACS,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAMzDP,iBAAiB,CAACH,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAGlEd,WAAW,CAACe,MAAM,EAChBX,iBAAiB,CAACF,kBAAkB,CAACS,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAMzDR,iBAAiB,CAACF,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAKlET,iBAAiB,CAACH,kBAAkB,CAACS,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAKzDP,iBAAiB,CAACH,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAKlEV,iBAAiB,CAACF,kBAAkB,CAACS,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAIzDR,iBAAiB,CAACF,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAKtCb,MAAM,CAACe,WAAW,EAIlBf,MAAM,CAACe,WAAW,EAIvCf,MAAM,CAACgB,WAAW,EAKGhB,MAAM,CAACiB,YAAY,EAInBjB,MAAM,CAACkB,WAAW,CAInD;AAWD,IAAMC,WAAW,gBAAGtB,KAAK,CAACuB,UAAU,CAAkC,gBAAsFC,GAAG,EAAK;EAAA,IAA3FC,EAAE,QAAFA,EAAE;IAAEC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,iBAAiB,QAAjBA,iBAAiB;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACtJ,IAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAW,GAAG,EAAE,EACrCO,MAAM,CAACR,UAAU,KAAK,EAAE,GAAG,eAAe,GAAG,EAAE,CAAC,CAChDQ,MAAM,CAACJ,IAAI,aAAMA,IAAI,SAAM,EAAE,CAAC,CAC9BI,MAAM,CAACN,iBAAiB,GAAG,WAAW,GAAG,EAAE,CAAC,CAC5CM,MAAM,WAAIH,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,OAAI;EAEhC,oBACE,KAAC,kBAAkB;IAAC,GAAG,EAAEP,GAAI;IAAA,uBAC3B,KAAC,iBAAiB;MAAC,EAAE,YAAKC,EAAE,UAAQ;MAAC,yBAAgBA,EAAE,UAAQ;MAAC,SAAS,EAAEQ;IAAI,GAAKD,IAAI;MAAA,UACrFH;IAAQ;EACS,EACD;AAEzB,CAAC,CAAC;AAAC;EAtBDJ,EAAE;EACFC,UAAU;EACVC,QAAQ;EACRC,iBAAiB;EACjBC,QAAQ;AAAA;AAoBV,eAAeP,WAAW"}

package/dist/InputFields/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField, { TextFieldProps } from './TextField';\r\nimport PasswordField, { PasswordFieldProps } from './PasswordField';\r\nimport Checkbox from './Checkbox';\r\nimport RadioButton, { RadioButtonProps } from './RadioButton';\r\nimport SearchBar, { SearchBarProps } from './SearchBar';\r\nimport InputLabel, { LabelProps } from './Label';\r\nimport DatepickerField, { DatepickerFieldProps } from './DatepickerField';\r\nimport Textarea from './Textarea';\r\nimport QuickSearch, { QuickSearchProps } from './QuickSearch';\r\nimport NumberField, { NumberFieldProps } from './NumberField';\r\nimport { TextareaProps, CheckboxProps } from './types';\r\n\r\nexport * from './styling';\r\n\r\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\r\n\r\nexport type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField, { TextFieldProps } from './TextField';\nimport PasswordField, { PasswordFieldProps } from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton, { RadioButtonProps } from './RadioButton';\nimport SearchBar, { SearchBarProps } from './SearchBar';\nimport InputLabel, { LabelProps } from './Label';\nimport DatepickerField, { DatepickerFieldProps } from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch, { QuickSearchProps } from './QuickSearch';\nimport NumberField, { NumberFieldProps } from './NumberField';\nimport { TextareaProps, CheckboxProps } from './types';\n\nexport * from './styling';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\n\nexport type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/InputFields/index.d.ts

@@ -1,14 +1,14 @@
-import TextField, { TextFieldProps } from './TextField';
-import PasswordField, { PasswordFieldProps } from './PasswordField';
-import Checkbox from './Checkbox';
-import RadioButton, { RadioButtonProps } from './RadioButton';
-import SearchBar, { SearchBarProps } from './SearchBar';
-import InputLabel, { LabelProps } from './Label';
-import DatepickerField, { DatepickerFieldProps } from './DatepickerField';
-import Textarea from './Textarea';
-import QuickSearch, { QuickSearchProps } from './QuickSearch';
-import NumberField, { NumberFieldProps } from './NumberField';
-import { TextareaProps, CheckboxProps } from './types';
-export * from './styling';
-export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };
-export type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };
+import TextField, { TextFieldProps } from './TextField';
+import PasswordField, { PasswordFieldProps } from './PasswordField';
+import Checkbox from './Checkbox';
+import RadioButton, { RadioButtonProps } from './RadioButton';
+import SearchBar, { SearchBarProps } from './SearchBar';
+import InputLabel, { LabelProps } from './Label';
+import DatepickerField, { DatepickerFieldProps } from './DatepickerField';
+import Textarea from './Textarea';
+import QuickSearch, { QuickSearchProps } from './QuickSearch';
+import NumberField, { NumberFieldProps } from './NumberField';
+import { TextareaProps, CheckboxProps } from './types';
+export * from './styling';
+export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };
+export type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };

package/dist/InputFields/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField, { TextFieldProps } from './TextField';\r\nimport PasswordField, { PasswordFieldProps } from './PasswordField';\r\nimport Checkbox from './Checkbox';\r\nimport RadioButton, { RadioButtonProps } from './RadioButton';\r\nimport SearchBar, { SearchBarProps } from './SearchBar';\r\nimport InputLabel, { LabelProps } from './Label';\r\nimport DatepickerField, { DatepickerFieldProps } from './DatepickerField';\r\nimport Textarea from './Textarea';\r\nimport QuickSearch, { QuickSearchProps } from './QuickSearch';\r\nimport NumberField, { NumberFieldProps } from './NumberField';\r\nimport { TextareaProps, CheckboxProps } from './types';\r\n\r\nexport * from './styling';\r\n\r\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\r\n\r\nexport type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };\r\n"],"mappings":"AAAA,OAAOA,SAAS,MAA0B,aAAa;AACvD,OAAOC,aAAa,MAA8B,iBAAiB;AACnE,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAA4B,eAAe;AAC7D,OAAOC,SAAS,MAA0B,aAAa;AACvD,OAAOC,UAAU,MAAsB,SAAS;AAChD,OAAOC,eAAe,MAAgC,mBAAmB;AACzE,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAA4B,eAAe;AAC7D,OAAOC,WAAW,MAA4B,eAAe;AAG7D,cAAc,WAAW;AAEzB,SAAST,SAAS,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,SAAS,EAAEC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,WAAW"}
+{"version":3,"file":"index.js","names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField, { TextFieldProps } from './TextField';\nimport PasswordField, { PasswordFieldProps } from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton, { RadioButtonProps } from './RadioButton';\nimport SearchBar, { SearchBarProps } from './SearchBar';\nimport InputLabel, { LabelProps } from './Label';\nimport DatepickerField, { DatepickerFieldProps } from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch, { QuickSearchProps } from './QuickSearch';\nimport NumberField, { NumberFieldProps } from './NumberField';\nimport { TextareaProps, CheckboxProps } from './types';\n\nexport * from './styling';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\n\nexport type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };\n"],"mappings":"AAAA,OAAOA,SAAS,MAA0B,aAAa;AACvD,OAAOC,aAAa,MAA8B,iBAAiB;AACnE,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAA4B,eAAe;AAC7D,OAAOC,SAAS,MAA0B,aAAa;AACvD,OAAOC,UAAU,MAAsB,SAAS;AAChD,OAAOC,eAAe,MAAgC,mBAAmB;AACzE,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAA4B,eAAe;AAC7D,OAAOC,WAAW,MAA4B,eAAe;AAG7D,cAAc,WAAW;AAEzB,SAAST,SAAS,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,SAAS,EAAEC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,WAAW"}

package/dist/InputFields/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styling.cjs","names":["InputWrapper","styled","div","props","readOnly","disabled","margin","TooltipTrigger","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","critical_500","StateColors","States","Default","Valid","Invalid","ValidationMessage","type","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()}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${COLORS.neutral_100};\r\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\r\n  color: ${COLORS.neutral_600} !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 ${COLORS.critical_400};\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.neutral_400};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\r\n  background-color: #fff;\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  position: relative;\r\n\r\n  font-size: 16px;\r\n\r\n  &::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\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      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\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: ${COLORS.black} !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 ${COLORS.neutral_100};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\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 ${COLORS.critical_400};\r\n  }\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\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 ${COLORS.primary_700};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\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\nconst ValidationStyling = css`\r\n  &.error-msg {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    text-align: center;\r\n    font-weight: 400;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  &.error-msg {\r\n    padding-top: 8px;\r\n    padding-bottom: 0;\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\r\n    font-weight: 700;\r\n    line-height: 15px;\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: ${COLORS.critical_500};\r\n`;\r\n\r\nconst StateColors = {\r\n  [States.Default]: COLORS.neutral_500,\r\n  [States.Valid]: COLORS.correct_500,\r\n  [States.Invalid]: COLORS.critical_500,\r\n}\r\n\r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => StateColors[props.type]};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${COLORS.neutral_500};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${COLORS.neutral_600};\r\n`;\r\n\r\nexport { ValidationStyling, 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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"}
+{"version":3,"file":"styling.cjs","names":["InputWrapper","styled","div","props","readOnly","disabled","margin","TooltipTrigger","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","critical_500","StateColors","States","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {Size, States} from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n  \n  ${TooltipTrigger()}\n\n`;\n\nexport const readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n  extraRightPadding?: number;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nconst StateColors = {\n  [States.Default]: COLORS.neutral_500,\n  [States.Valid]: COLORS.correct_500,\n  [States.Invalid]: COLORS.critical_500,\n}\n\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\n  color: ${(props) => StateColors[props.type]};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}

package/dist/InputFields/styling.d.ts

@@ -1,27 +1,27 @@
-import { States } from '../types';
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {
-    readOnly?: boolean | undefined;
-    disabled?: boolean | undefined;
-    margin?: string | undefined;
-}, never>;
-export declare const readOnlyState: import("styled-components").FlattenSimpleInterpolation;
-export declare const activeErrorMessageState: import("styled-components").FlattenSimpleInterpolation;
-declare const InputFieldStyling: import("styled-components").StyledComponent<"input", any, {
-    activeErrorMessage?: boolean | undefined;
-    active?: boolean | undefined;
-    withoutBorder?: boolean | undefined;
-    size?: string | undefined;
-    suppressReadOnlyStyles?: boolean | undefined;
-    extraRightPadding?: number | undefined;
-}, never>;
-declare const ValidationStyling: import("styled-components").FlattenSimpleInterpolation;
-export declare const Warning: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ValidationMessage: import("styled-components").StyledComponent<"div", any, {
-    type: States.Valid | States.Invalid | States.Default;
-}, never>;
-export declare const NoteMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AutofilledMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { ValidationStyling, InputFieldStyling };
-export declare const StyledIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SearchIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { States } from '../types';
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {
+    readOnly?: boolean | undefined;
+    disabled?: boolean | undefined;
+    margin?: string | undefined;
+}, never>;
+export declare const readOnlyState: import("styled-components").FlattenSimpleInterpolation;
+export declare const activeErrorMessageState: import("styled-components").FlattenSimpleInterpolation;
+declare const InputFieldStyling: import("styled-components").StyledComponent<"input", any, {
+    activeErrorMessage?: boolean | undefined;
+    active?: boolean | undefined;
+    withoutBorder?: boolean | undefined;
+    size?: string | undefined;
+    suppressReadOnlyStyles?: boolean | undefined;
+    extraRightPadding?: number | undefined;
+}, never>;
+declare const ValidationStyling: import("styled-components").FlattenSimpleInterpolation;
+export declare const Warning: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ValidationMessage: import("styled-components").StyledComponent<"div", any, {
+    type: States.Valid | States.Invalid | States.Default;
+}, never>;
+export declare const NoteMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AutofilledMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { ValidationStyling, InputFieldStyling };
+export declare const StyledIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/InputFields/styling.js.map

@@ -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","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","StateColors","Default","Valid","Invalid","ValidationMessage","type","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()}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${COLORS.neutral_100};\r\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\r\n  color: ${COLORS.neutral_600} !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 ${COLORS.critical_400};\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.neutral_400};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\r\n  background-color: #fff;\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  position: relative;\r\n\r\n  font-size: 16px;\r\n\r\n  &::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\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      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\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: ${COLORS.black} !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 ${COLORS.neutral_100};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\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 ${COLORS.critical_400};\r\n  }\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\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 ${COLORS.primary_700};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\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\nconst ValidationStyling = css`\r\n  &.error-msg {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    text-align: center;\r\n    font-weight: 400;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  &.error-msg {\r\n    padding-top: 8px;\r\n    padding-bottom: 0;\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\r\n    font-weight: 700;\r\n    line-height: 15px;\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: ${COLORS.critical_500};\r\n`;\r\n\r\nconst StateColors = {\r\n  [States.Default]: COLORS.neutral_500,\r\n  [States.Valid]: COLORS.correct_500,\r\n  [States.Invalid]: COLORS.critical_500,\r\n}\r\n\r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => StateColors[props.type]};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${COLORS.neutral_500};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${COLORS.neutral_600};\r\n`;\r\n\r\nexport { ValidationStyling, 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,IAAMC,YAAY,GAAGX,MAAM,CAACY,GAAG,gJAElC,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,QAAQ,IAAID,KAAK,CAACE,QAAQ,GAAG,sBAAsB,GAAG,EAAE;AAAA,CAAC,EAC3E,UAACF,KAAK;EAAA,OAAMA,KAAK,CAACG,MAAM,qBAAcH,KAAK,CAACG,MAAM,SAAM,EAAE;AAAA,CAAC,EAG3DjB,cAAc,EAAE,CAEnB;AAED,OAAO,IAAMkB,aAAa,GAAGhB,GAAG,mPACVE,MAAM,CAACe,WAAW,EACRf,MAAM,CAACgB,WAAW,EACvChB,MAAM,CAACiB,WAAW,CAI5B;AACD,OAAO,IAAMC,uBAAuB,GAAGpB,GAAG,+GACVE,MAAM,CAACmB,YAAY,CAClD;AAED,IAAMC,iBAAiB,GAAGvB,MAAM,CAACwB,KAAK,+mDAelC,UAACX,KAAK;EAAA,OACNA,KAAK,CAACY,aAAa,oJAK8BtB,MAAM,CAACuB,WAAW,6DACxBvB,MAAM,CAACuB,WAAW,wDACvBvB,MAAM,CAACuB,WAAW,MAAG;AAAA,GAGhD,UAAAb,KAAK;EAAA;EAAA,OAAI,EAAE,6BAAIA,KAAK,CAACc,iBAAiB,yEAAI,CAAC,CAAC;AAAA,GASrDpB,iBAAiB,CAACD,kBAAkB,CAACsB,MAAM,EAAEzB,MAAM,CAAC0B,WAAW,CAAC,EAGlE3B,WAAW,CAAC4B,MAAM,EAOdtB,iBAAiB,CAACF,kBAAkB,CAACsB,MAAM,EAAEzB,MAAM,CAAC0B,WAAW,CAAC,EAmB7D1B,MAAM,CAAC4B,KAAK,EAEnB,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACmB,kBAAkB,GAAGX,uBAAuB,GAAG,EAAE;AAAA,CAAC,EAGlE,UAACR,KAAK;EAAA,OAAMA,KAAK,CAACoB,sBAAsB,GAAG,EAAE,GAAGhB,aAAa;AAAA,CAAC,EAI5Cd,MAAM,CAACe,WAAW,EAK7Bf,MAAM,CAACgB,WAAW,EAGShB,MAAM,CAAC+B,WAAW,EAIpD9B,WAAW,EAIiBD,MAAM,CAACmB,YAAY,EAGnBnB,MAAM,CAACgC,WAAW,EAQZhC,MAAM,CAACiC,WAAW,EAIlBjC,MAAM,CAAC+B,WAAW,CAUzD;AAED,IAAMG,iBAAiB,GAAGpC,GAAG,uTAEvBI,mBAAmB,CAACC,kBAAkB,CAACgC,OAAO,EAAEnC,MAAM,CAAC4B,KAAK,CAAC,EAS7D1B,mBAAmB,CAACC,kBAAkB,CAACgC,OAAO,EAAE,SAAS,CAAC,CAI/D;AAED,OAAO,IAAMC,OAAO,GAAGvC,MAAM,CAACY,GAAG,gkBAI7BP,mBAAmB,CAACC,kBAAkB,CAACgC,OAAO,EAAE,IAAI,CAAC,EAOrDpC,WAAW,CAAC4B,MAAM,EAChBrB,kBAAkB,CAACH,kBAAkB,CAACgC,OAAO,EAAE,IAAI,CAAC,EAQpDjC,mBAAmB,CAACC,kBAAkB,CAACgC,OAAO,EAAE,IAAI,CAAC,EAOrD7B,kBAAkB,CAACH,kBAAkB,CAACgC,OAAO,EAAE,IAAI,CAAC,CAezD;AACD,OAAO,IAAME,YAAY,GAAGxC,MAAM,CAACuC,OAAO,CAAC,0FAChCpC,MAAM,CAACsC,YAAY,CAC7B;AAED,IAAMC,WAAW,qDACdhC,MAAM,CAACiC,OAAO,EAAGxC,MAAM,CAAC0B,WAAW,iCACnCnB,MAAM,CAACkC,KAAK,EAAGzC,MAAM,CAACgC,WAAW,iCACjCzB,MAAM,CAACmC,OAAO,EAAG1C,MAAM,CAACsC,YAAY,gBACtC;AAED,OAAO,IAAMK,iBAAiB,GAAG9C,MAAM,CAACuC,OAAO,CAAC,0FACrC,UAAC1B,KAAK;EAAA,OAAK6B,WAAW,CAAC7B,KAAK,CAACkC,IAAI,CAAC;AAAA,EAC5C;AAED,OAAO,IAAMC,WAAW,GAAGhD,MAAM,CAACuC,OAAO,CAAC,0FAC/BpC,MAAM,CAAC0B,WAAW,CAC5B;AACD,OAAO,IAAMoB,iBAAiB,GAAGjD,MAAM,CAACuC,OAAO,CAAC,4FACrCpC,MAAM,CAACiB,WAAW,CAC5B;AAED,SAASiB,iBAAiB,EAAEd,iBAAiB;AAE7C,OAAO,IAAM2B,UAAU,GAAGlD,MAAM,CAACY,GAAG,kGAEnC;AAED,OAAO,IAAMuC,iBAAiB,GAAGnD,MAAM,CAACkD,UAAU,CAAC,yHAGlD"}
+{"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","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","StateColors","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {Size, States} from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n  \n  ${TooltipTrigger()}\n\n`;\n\nexport const readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n  extraRightPadding?: number;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nconst StateColors = {\n  [States.Default]: COLORS.neutral_500,\n  [States.Valid]: COLORS.correct_500,\n  [States.Invalid]: COLORS.critical_500,\n}\n\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\n  color: ${(props) => StateColors[props.type]};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}

package/dist/InputFields/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\r\nimport React from 'react';\r\n\r\nexport type TextareaProps =\r\n  Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>,  'onChange'>\r\n  & {\r\n  id: string;\r\n  state?: States.Invalid | States.Valid;\r\n  onChange?: (text: string) => void;\r\n  validationMessage?: string;\r\n  size: Size.Small | Size.Medium;\r\n  autoHeight?: boolean;\r\n  margin?: string;\r\n  note?: TextFieldNote;\r\n};\r\n\r\nexport type TextFieldNote = {\r\n  message: string;\r\n  icon: React.ReactNode;\r\n};\r\n\r\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\r\n  id?: string;\r\n  selected: boolean;\r\n  select?: (selected: boolean) => void;\r\n  label?: string;\r\n  invalid?: boolean;\r\n  disabled?: boolean;\r\n  margin?: string;\r\n  size?: Size;\r\n  iconPointerEventsTransparent?: boolean;\r\n  semiSelected?: boolean;\r\n  readOnly?: boolean;\r\n  tabIndexVal?: number;\r\n  className?: string;\r\n};\r\n"],"mappings":";;;;;AAmCC"}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\nexport type TextareaProps =\n  Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>,  'onChange'>\n  & {\n  id: string;\n  state?: States.Invalid | States.Valid;\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n};\n"],"mappings":";;;;;AAmCC"}

package/dist/InputFields/types.d.ts

@@ -1,31 +1,31 @@
-import { Size, States, Testable } from '../types';
-import React from 'react';
-export type TextareaProps = Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
-    id: string;
-    state?: States.Invalid | States.Valid;
-    onChange?: (text: string) => void;
-    validationMessage?: string;
-    size: Size.Small | Size.Medium;
-    autoHeight?: boolean;
-    margin?: string;
-    note?: TextFieldNote;
-};
-export type TextFieldNote = {
-    message: string;
-    icon: React.ReactNode;
-};
-export interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'> {
-    id?: string;
-    selected: boolean;
-    select?: (selected: boolean) => void;
-    label?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    margin?: string;
-    size?: Size;
-    iconPointerEventsTransparent?: boolean;
-    semiSelected?: boolean;
-    readOnly?: boolean;
-    tabIndexVal?: number;
-    className?: string;
-}
+import { Size, States, Testable } from '../types';
+import React from 'react';
+export type TextareaProps = Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
+    id: string;
+    state?: States.Invalid | States.Valid;
+    onChange?: (text: string) => void;
+    validationMessage?: string;
+    size: Size.Small | Size.Medium;
+    autoHeight?: boolean;
+    margin?: string;
+    note?: TextFieldNote;
+};
+export type TextFieldNote = {
+    message: string;
+    icon: React.ReactNode;
+};
+export interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'> {
+    id?: string;
+    selected: boolean;
+    select?: (selected: boolean) => void;
+    label?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    margin?: string;
+    size?: Size;
+    iconPointerEventsTransparent?: boolean;
+    semiSelected?: boolean;
+    readOnly?: boolean;
+    tabIndexVal?: number;
+    className?: string;
+}

package/dist/InputFields/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\r\nimport React from 'react';\r\n\r\nexport type TextareaProps =\r\n  Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>,  'onChange'>\r\n  & {\r\n  id: string;\r\n  state?: States.Invalid | States.Valid;\r\n  onChange?: (text: string) => void;\r\n  validationMessage?: string;\r\n  size: Size.Small | Size.Medium;\r\n  autoHeight?: boolean;\r\n  margin?: string;\r\n  note?: TextFieldNote;\r\n};\r\n\r\nexport type TextFieldNote = {\r\n  message: string;\r\n  icon: React.ReactNode;\r\n};\r\n\r\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\r\n  id?: string;\r\n  selected: boolean;\r\n  select?: (selected: boolean) => void;\r\n  label?: string;\r\n  invalid?: boolean;\r\n  disabled?: boolean;\r\n  margin?: string;\r\n  size?: Size;\r\n  iconPointerEventsTransparent?: boolean;\r\n  semiSelected?: boolean;\r\n  readOnly?: boolean;\r\n  tabIndexVal?: number;\r\n  className?: string;\r\n};\r\n"],"mappings":"AAmCC;AAAC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\nexport type TextareaProps =\n  Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>,  'onChange'>\n  & {\n  id: string;\n  state?: States.Invalid | States.Valid;\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n};\n"],"mappings":"AAmCC;AAAC"}

package/dist/Layouts/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","props","unsetMargin","BREAKPOINTS","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst GRID = {\r\n  GAP: {\r\n    SMALL: '16px',\r\n    MEDIUM: '24px',\r\n    LARGE: '32px',\r\n  },\r\n  GUTTER: {\r\n    SMALL: '16px 16px 32px',\r\n    MEDIUM: '24px 32px 64px',\r\n    LARGE: '32px 64px 128px',\r\n  },\r\n};\r\n\r\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\r\n  display: block;\r\n  margin: ${GRID.GUTTER.SMALL};\r\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: ${GRID.GUTTER.MEDIUM};\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: ${GRID.GUTTER.LARGE};\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: ${(props) => (\r\n            props.useMaxWidth\r\n                    ? (props.maxWidth\r\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\r\n                            : 'calc(100% - 128px)')\r\n                    : 'calc(1600px - 128px)')};\r\n\r\n    margin: 32px auto 128px;\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n`;\r\n\r\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\r\n  width: 100%;\r\n  display: grid;\r\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\r\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    grid-template-columns: ${(props) => props.columns};\r\n    -ms-grid-columns: ${(props) => props.columns};\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\r\n  }\r\n\r\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\r\n    display: -ms-grid;\r\n\r\n    > *:not(:first-child) {\r\n      margin-left: ${GRID.GAP.MEDIUM};\r\n    }\r\n  }\r\n\r\n  @media print {\r\n    grid-gap: 0;\r\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;;AAAA;AAEA;AAAsC;AAEtC,IAAMA,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAEM,IAAME,SAAS,GAAGC,yBAAM,CAACC,GAAG,+SAEvBR,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAO,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAEhEC,mBAAW,CAACR,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACP,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACP,KAAK,EACJ,UAACK,KAAK;EAAA,OACXA,KAAK,CAACG,WAAW,GACNH,KAAK,CAACI,QAAQ,GACP,mBAAmB,GAAGJ,KAAK,CAACI,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAJ,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAErE;AAAC;AAEK,IAAMI,OAAO,GAAGP,yBAAM,CAACQ,OAAO,ooBAGvB,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDS,mBAAW,CAACR,MAAM,EACO,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAC7B,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAChC,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDQ,mBAAW,CAACP,KAAK,EACL,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACS,YAAY,IAAI,MAAM;AAAA,EAEnE;AAAC"}
+{"version":3,"file":"index.cjs","names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","props","unsetMargin","BREAKPOINTS","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport {BREAKPOINTS} from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '16px',\n    MEDIUM: '24px',\n    LARGE: '32px',\n  },\n  GUTTER: {\n    SMALL: '16px 16px 32px',\n    MEDIUM: '24px 32px 64px',\n    LARGE: '32px 64px 128px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\n  display: block;\n  margin: ${GRID.GUTTER.SMALL};\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: ${GRID.GUTTER.MEDIUM};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin: ${GRID.GUTTER.LARGE};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: ${(props) => (\n            props.useMaxWidth\n                    ? (props.maxWidth\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\n                            : 'calc(100% - 128px)')\n                    : 'calc(1600px - 128px)')};\n\n    margin: 32px auto 128px;\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n"],"mappings":";;;;;;;;AAAA;AAEA;AAAsC;AAEtC,IAAMA,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAEM,IAAME,SAAS,GAAGC,yBAAM,CAACC,GAAG,+SAEvBR,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAO,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAEhEC,mBAAW,CAACR,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACP,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACP,KAAK,EACJ,UAACK,KAAK;EAAA,OACXA,KAAK,CAACG,WAAW,GACNH,KAAK,CAACI,QAAQ,GACP,mBAAmB,GAAGJ,KAAK,CAACI,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAJ,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAErE;AAAC;AAEK,IAAMI,OAAO,GAAGP,yBAAM,CAACQ,OAAO,ooBAGvB,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDS,mBAAW,CAACR,MAAM,EACO,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAC7B,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAChC,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDQ,mBAAW,CAACP,KAAK,EACL,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACS,YAAY,IAAI,MAAM;AAAA,EAEnE;AAAC"}

package/dist/Layouts/index.d.ts

@@ -1,10 +1,10 @@
-export declare const PageWidth: import("styled-components").StyledComponent<"div", any, {
-    useMaxWidth?: boolean | undefined;
-    maxWidth?: number | undefined;
-    unsetMargin?: boolean | undefined;
-}, never>;
-export declare const Columns: import("styled-components").StyledComponent<"section", any, {
-    gap?: string | undefined;
-    columns?: string | undefined;
-    printColumns?: string | undefined;
-}, never>;
+export declare const PageWidth: import("styled-components").StyledComponent<"div", any, {
+    useMaxWidth?: boolean | undefined;
+    maxWidth?: number | undefined;
+    unsetMargin?: boolean | undefined;
+}, never>;
+export declare const Columns: import("styled-components").StyledComponent<"section", any, {
+    gap?: string | undefined;
+    columns?: string | undefined;
+    printColumns?: string | undefined;
+}, never>;

package/dist/Layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","props","unsetMargin","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst GRID = {\r\n  GAP: {\r\n    SMALL: '16px',\r\n    MEDIUM: '24px',\r\n    LARGE: '32px',\r\n  },\r\n  GUTTER: {\r\n    SMALL: '16px 16px 32px',\r\n    MEDIUM: '24px 32px 64px',\r\n    LARGE: '32px 64px 128px',\r\n  },\r\n};\r\n\r\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\r\n  display: block;\r\n  margin: ${GRID.GUTTER.SMALL};\r\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: ${GRID.GUTTER.MEDIUM};\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: ${GRID.GUTTER.LARGE};\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: ${(props) => (\r\n            props.useMaxWidth\r\n                    ? (props.maxWidth\r\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\r\n                            : 'calc(100% - 128px)')\r\n                    : 'calc(1600px - 128px)')};\r\n\r\n    margin: 32px auto 128px;\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n`;\r\n\r\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\r\n  width: 100%;\r\n  display: grid;\r\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\r\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    grid-template-columns: ${(props) => props.columns};\r\n    -ms-grid-columns: ${(props) => props.columns};\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\r\n  }\r\n\r\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\r\n    display: -ms-grid;\r\n\r\n    > *:not(:first-child) {\r\n      margin-left: ${GRID.GAP.MEDIUM};\r\n    }\r\n  }\r\n\r\n  @media print {\r\n    grid-gap: 0;\r\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\r\n  }\r\n`;\r\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,QAAO,WAAW;AAErC,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAG,iSAEvBP,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAEhEV,WAAW,CAACI,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAI,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACJ,UAACI,KAAK;EAAA,OACXA,KAAK,CAACE,WAAW,GACNF,KAAK,CAACG,QAAQ,GACP,mBAAmB,GAAGH,KAAK,CAACG,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAErE;AAED,OAAO,IAAMG,OAAO,GAAGd,MAAM,CAACe,OAAO,snBAGvB,UAACL,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDH,WAAW,CAACI,MAAM,EACO,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAC7B,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAChC,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDJ,WAAW,CAACK,KAAK,EACL,UAACI,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACQ,YAAY,IAAI,MAAM;AAAA,EAEnE"}
+{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","props","unsetMargin","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport {BREAKPOINTS} from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '16px',\n    MEDIUM: '24px',\n    LARGE: '32px',\n  },\n  GUTTER: {\n    SMALL: '16px 16px 32px',\n    MEDIUM: '24px 32px 64px',\n    LARGE: '32px 64px 128px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\n  display: block;\n  margin: ${GRID.GUTTER.SMALL};\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: ${GRID.GUTTER.MEDIUM};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin: ${GRID.GUTTER.LARGE};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: ${(props) => (\n            props.useMaxWidth\n                    ? (props.maxWidth\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\n                            : 'calc(100% - 128px)')\n                    : 'calc(1600px - 128px)')};\n\n    margin: 32px auto 128px;\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,QAAO,WAAW;AAErC,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAG,iSAEvBP,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAEhEV,WAAW,CAACI,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAI,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACJ,UAACI,KAAK;EAAA,OACXA,KAAK,CAACE,WAAW,GACNF,KAAK,CAACG,QAAQ,GACP,mBAAmB,GAAGH,KAAK,CAACG,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAErE;AAED,OAAO,IAAMG,OAAO,GAAGd,MAAM,CAACe,OAAO,snBAGvB,UAACL,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDH,WAAW,CAACI,MAAM,EACO,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAC7B,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAChC,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDJ,WAAW,CAACK,KAAK,EACL,UAACI,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACQ,YAAY,IAAI,MAAM;AAAA,EAEnE"}