@ntbjs/react-components 2.0.1-rc.31 → 2.0.2-rc.10

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

@@ -1 +1 @@
-{"version":3,"file":"CompactTextInput.styled.js","sources":["../../../src/components/inputs/CompactTextInput/CompactTextInput.styled.js"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst fadeIn = keyframes`\n  from {\n    background-color: ${props =>\n      props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)')};\n  }\n  to {\n    background-color: ${props =>\n      props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)')};\n  }\n`;\n\nconst fadeOut = keyframes`\n  from {\n    background-color: ${props =>\n      props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)')};\n  }\n  to {\n    background-color: ${props =>\n      props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)')};\n  }\n`;\n\nconst fadeInCheck = keyframes`\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1\n  }\n`;\n\nconst fadeOutCheck = keyframes`\n  from {\n    opacity: 1\n  }\n  to {\n    opacity: 0\n  }\n`;\n\nconst linkColor = css`\n  ${props => props.theme.themeProp('color', '#ACCDC3', props.theme.getColor('emerald-500'))}\n  ${props =>\n    !props.disabled &&\n    css`\n      &:hover {\n        text-decoration: underline;\n      }\n    `}\n`;\n\nconst commonAnchorTagStyle = css`\n  a,\n  && {\n    font-size: 0.875rem;\n    text-decoration: none;\n  }\n`;\n\nconst readOnlyBackground = css`\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('white')\n    )}\n`;\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const CompactTextInput = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  height: 24px;\n  font-family: ${props => props.theme.primaryFontFamily};\n`;\n\nexport const Label = styled.label\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n  flex-basis: 33.33%;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  justify-content: space-between;\n  height: 19px;\n  display: flex;\n  align-items: center;\n  ${props =>\n    props.disabled &&\n    css`\n      opacity: 0.5;\n      cursor: not-allowed;\n    `}\n`;\n\nexport const InputContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  position: relative;\n  height: 19px;\n  flex-basis: ${props => (props.$hasLabel ? '66.66%' : '100%')};\n`;\n\nexport const SuccessContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  opacity: 1;\n  pointer-events: none;\n  display: flex;\n  opacity: ${props => (props.fadeIn ? 0 : 1)};\n  animation: ${props => (props.fadeIn ? fadeOutCheck : fadeInCheck)} 0.5s ease-in-out;\n  transition: opacity 0.5s ease-in-out;\n  margin-right: 5px;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-500')\n    )}\n  > svg {\n    width: 13px;\n  }\n`;\n\nexport const InputSuccessContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  opacity: 1;\n  pointer-events: none;\n  display: flex;\n  justify-content: flex-end;\n  opacity: ${props => (props.fadeIn ? 0 : 1)};\n  animation: ${props => (props.fadeIn ? fadeOutCheck : fadeInCheck)} 0.5s ease-in-out;\n  transition: opacity 0.5s ease-in-out;\n  position: relative;\n  margin-top: -20px;\n  margin-right: 8px;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-500')\n    )}\n  > svg {\n    width: 13px;\n  }\n`;\n\nexport const InputIconContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  opacity: 0;\n  pointer-events: none;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n  padding: 5px 10px 0 0;\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      css`\n        linear-gradient(-90deg,\n        ${props =>\n          props.type === 'error'\n            ? '#901d1d'\n            : props.type === 'warning'\n              ? '#816600'\n              : props.theme.getColor('gray-700')} 55%,\n        transparent)\n      `,\n      css`\n        linear-gradient(-90deg,\n        ${props =>\n          props.type === 'error'\n            ? '#f7d5d0'\n            : props.type === 'warning'\n              ? '#fffebf'\n              : props.theme.getColor('gray-100')} 55%,\n        transparent)\n      `\n    )};\n\n  display: flex;\n  align-items: center;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  color: ${props => props.theme.getColor('gray-400')};\n\n  ${props => props.type === 'warning' && props.theme.themeProp('color', '#C3AF43', '#C3AF43')}\n\n  ${props => props.type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F')}\n\n  > svg {\n    width: 12px;\n  }\n`;\n\nexport const Input = styled.input\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(props => ({\n    ...applyDefaultTheme(props),\n    type: props.inputtype || 'text'\n  }))`\n  box-sizing: border-box;\n  height: 22px;\n  width: 100%;\n  display: block;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  font-family: inherit;\n  padding: 1px 10px;\n  border-radius: 3px;\n  border: 1px solid transparent;\n\n${props => {\n  if (props.type === 'error') {\n    return css`\n      ${props.theme.themeProp('background', '#7f1b1b', '#FEE2E2')} !important;\n    `;\n  } else if (props.type === 'warning') {\n    return css`\n      ${props.theme.themeProp('background', '#634E01', '#FFFDE8')} !important;\n    `;\n  } else {\n    return props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('white')\n    );\n  }\n}}\n\n  ${props =>\n    props.readOnly &&\n    css`\n      cursor: default;\n    `}\n\n  ${props =>\n    props.disabled &&\n    css`\n      opacity: 0.5;\n    `}\n\n  ${props =>\n    props.type === 'success' &&\n    css`\n      animation: ${props => (props.type === 'success' ? fadeIn : fadeOut)} 0.5s ease-in-out;\n    `}\n\n\n    ${props =>\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-200'),\n        props.theme.getColor('gray-700')\n      )}\n\n\n      \n   \n\n      ${props =>\n        props.haslink &&\n        css`\n          &&:not(:focus),\n          &&:read-only {\n            ${linkColor}\n          }\n          &&:read-only {\n            cursor: default;\n          }\n        `};\n\n        \n\n\n  &&:not(:hover):not(:focus) {\n\n    ${props => {\n      if (props.$edit) {\n        if (props.type === 'error') {\n          return props.theme.themeProp('background', '#7f1b1b', '#FEE2E2');\n        } else if (props.type === 'warning') {\n          return props.theme.themeProp('background', '#634E01', '#FFFDE8');\n        } else {\n          return props.theme.themeProp(\n            'background',\n            'rgba(39,39,42, 0.7)',\n            'rgba(244,244,245, 0.3)'\n          );\n        }\n      }\n    }}\n   \n     \n\n    ${props =>\n      props.$edit &&\n      props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)')};\n    \n    ${props =>\n      props.haslink &&\n      css`\n        &&:not(:focus),\n        &&:read-only {\n          cursor: default;\n          ${linkColor}\n        }\n      `}\n  }\n\n  &&:hover:not(:focus) {\n\n    ${props =>\n      props.theme.themeProp(\n        'background',\n        props.theme.getColor('gray-700'),\n        props.theme.getColor('gray-100')\n      )}\n\n    ${props =>\n      props.readOnly &&\n      css`\n        ${readOnlyBackground}\n      `};\n\n    ${props =>\n      props.$edit &&\n      props.theme.themeProp(\n        'border-color',\n        props.theme.getColor('gray-700'),\n        props.theme.getColor('gray-100')\n      )};\n\n    ${props =>\n      props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF')};\n\n    ${props => props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0')};\n\n\n    ${props =>\n      props.$haslink &&\n      css`\n        cursor: pointer;\n        &&:read-only {\n          background: none !important;\n          cursor: default;\n        }\n      `}\n      & + ${InputIconContainer} {\n        opacity: 1;\n        \n      }\n  }\n\n    ${props =>\n      props.disabled &&\n      css`\n        background: none !important;\n        cursor: not-allowed;\n      `}\n      ${props =>\n        props.disabled &&\n        props.$haslink &&\n        css`\n          background: none !important;\n          cursor: not-allowed !important;\n        `}\n\n  }\n\n  &&:focus {\n    ${props =>\n      !props.readOnly &&\n      props.theme.themeProp(\n        'background',\n        props.theme.getColor('gray-700'),\n        props.theme.getColor('gray-100')\n      )};\n\n      ${props =>\n        props.readOnly &&\n        css`\n          ${readOnlyBackground}\n        `};\n    \n    ${props =>\n      props.type === 'error' &&\n      !props.readOnly &&\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-200'),\n        props.theme.getColor('gray-700')\n      )};\n\n    ${props =>\n      !props.readOnly &&\n      css`\n        border-color: ${props => props.theme.getColor('gray-600')};\n      `};\n    outline: none;\n\n    ${props =>\n      props.type === 'warning' &&\n      css`\n        ${props => props.theme.themeProp('border-color', '#F4E21E', '#F4E21E')}\n        ${props.theme.themeProp('background', 'white', 'white')}\n        ${props.theme.themeProp('color', 'black', 'black')}\n      `};\n\n    ${props =>\n      props.type === 'error' &&\n      css`\n        ${props => props.theme.themeProp('border-color', '#D83018', '#D83018')}\n        ${props.theme.themeProp('background', 'white', 'white')}\n        ${props.theme.themeProp('color', 'black', 'black')}\n      `};\n  }\n\n  &&::placeholder {\n    color: inherit;\n    opacity: 0.6;\n  }\n\n  ${props =>\n    props.$bold &&\n    css`\n      font-size: 1rem;\n      font-weight: 500;\n      line-height: 1.0625;\n      padding-top: 3px;\n      padding-bottom: 2px;\n    `}\n`;\n\nexport const LinkPopoverContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  ${commonAnchorTagStyle}\n\n  padding: 5px 8px;\n\n  svg {\n    width: 18px;\n    margin-right: 8px;\n  }\n`;\n\nexport const StyledLink = styled.a\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  ${commonAnchorTagStyle}\n  ${linkColor}\n`;\n\nexport const ReadOnlyLinkContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  ${readOnlyBackground};\n  border: 1px solid transparent;\n  border-radius: 3px;\n  padding: 0 10px 1px;\n`;\n"],"names":["fadeIn","keyframes","props","theme","themeProp","fadeOut","fadeInCheck","fadeOutCheck","linkColor","css","getColor","disabled","commonAnchorTagStyle","readOnlyBackground","shouldForwardProp","prop","startsWith","CompactTextInput","styled","div","withConfig","attrs","applyDefaultTheme","primaryFontFamily","Label","label","InputContainer","$hasLabel","SuccessContainer","InputSuccessContainer","InputIconContainer","type","Input","input","inputtype","readOnly","haslink","$edit","$haslink","$bold","LinkPopoverContainer","StyledLink","a","ReadOnlyLinkContainer"],"mappings":";;;AAGA,MAAMA,MAAM,GAAGC,SAAS,CAAA;AACxB;AACA,sBAAwBC,EAAAA,KAAK,IACvBA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,uBAAuB,EAAE,wBAAwB,CAAC,CAAA;AAC9E;AACA;AACA,sBAAwBF,EAAAA,KAAK,IACvBA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,uBAAuB,EAAE,wBAAwB,CAAC,CAAA;AAC9E;AACA,CAAC,CAAA;AAED,MAAMC,OAAO,GAAGJ,SAAS,CAAA;AACzB;AACA,sBAAwBC,EAAAA,KAAK,IACvBA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,uBAAuB,EAAE,wBAAwB,CAAC,CAAA;AAC9E;AACA;AACA,sBAAwBF,EAAAA,KAAK,IACvBA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,uBAAuB,EAAE,wBAAwB,CAAC,CAAA;AAC9E;AACA,CAAC,CAAA;AAED,MAAME,WAAW,GAAGL,SAAS,CAAA;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMM,YAAY,GAAGN,SAAS,CAAA;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMO,SAAS,GAAGC,GAAG,CAAA;AACrB,EAAIP,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,OAAO,EAAE,SAAS,EAAEF,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAA;AAC3F,EAAA,EAAIR,KAAK,IACL,CAACA,KAAK,CAACS,QAAQ,IACfF,GAAG,CAAA;AACP;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL,CAAC,CAAA;AAED,MAAMG,oBAAoB,GAAGH,GAAG,CAAA;AAChC;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMI,kBAAkB,GAAGJ,GAAG,CAAA;AAC9B,EAAIP,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,YAAY,EACZF,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CAAC,EAChCR,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,OAAO,CAC9B,CAAC,CAAA;AACL,CAAC,CAAA;AAED,MAAMI,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,GAAG,CACvCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA,eAAA,EAAiBpB,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACoB,iBAAiB,CAAA;AACvD,EAAC;AAEM,MAAMC,KAAK,GAAGN,MAAM,CAACO,KAAK,CAC9BL,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B,EAAIpB,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,OAAO,CAAC,EAC7BR,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIR,KAAK,IACLA,KAAK,CAACS,QAAQ,IACdF,GAAG,CAAA;AACP;AACA;AACA,IAAK,CAAA,CAAA;AACL,EAAC;AAEM,MAAMiB,cAAc,GAAGR,MAAM,CAACC,GAAG,CACrCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA,cAAgBpB,EAAAA,KAAK,IAAKA,KAAK,CAACyB,SAAS,GAAG,QAAQ,GAAG,MAAO,CAAA;AAC9D,EAAC;AAEM,MAAMC,gBAAgB,GAAGV,MAAM,CAACC,GAAG,CACvCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA,WAAapB,EAAAA,KAAK,IAAKA,KAAK,CAACF,MAAM,GAAG,CAAC,GAAG,CAAE,CAAA;AAC5C,aAAeE,EAAAA,KAAK,IAAKA,KAAK,CAACF,MAAM,GAAGO,YAAY,GAAGD,WAAY,CAAA;AACnE;AACA;AACA,EAAIJ,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CAAC,EAChCR,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL;AACA;AACA;AACA,EAAC;AAEM,MAAMmB,qBAAqB,GAAGX,MAAM,CAACC,GAAG,CAC5CC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA;AACA,WAAapB,EAAAA,KAAK,IAAKA,KAAK,CAACF,MAAM,GAAG,CAAC,GAAG,CAAE,CAAA;AAC5C,aAAeE,EAAAA,KAAK,IAAKA,KAAK,CAACF,MAAM,GAAGO,YAAY,GAAGD,WAAY,CAAA;AACnE;AACA;AACA;AACA;AACA,EAAIJ,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CAAC,EAChCR,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL;AACA;AACA;AACA,EAAC;AAEM,MAAMoB,kBAAkB,GAAGZ,MAAM,CAACC,GAAG,CACzCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA;AACA;AACA,EAAIpB,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,YAAY,EACZK,GAAG,CAAA;AACT;AACA,QAAUP,EAAAA,KAAK,IACLA,KAAK,CAAC6B,IAAI,KAAK,OAAO,GAClB,SAAS,GACT7B,KAAK,CAAC6B,IAAI,KAAK,SAAS,GACtB,SAAS,GACT7B,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CAAC,CAAA;AAChD;AACA,MAAA,CAAO,EACDD,GAAG,CAAA;AACT;AACA,QAAUP,EAAAA,KAAK,IACLA,KAAK,CAAC6B,IAAI,KAAK,OAAO,GAClB,SAAS,GACT7B,KAAK,CAAC6B,IAAI,KAAK,SAAS,GACtB,SAAS,GACT7B,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CAAC,CAAA;AAChD;AACA,MAAA,CACI,CAAC,CAAA;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAWR,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CAAC,CAAA;AACpD;AACA,EAAA,EAAIR,KAAK,IAAIA,KAAK,CAAC6B,IAAI,KAAK,SAAS,IAAI7B,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AAC7F;AACA,EAAA,EAAIF,KAAK,IAAIA,KAAK,CAAC6B,IAAI,KAAK,OAAO,IAAI7B,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AAC3F;AACA;AACA;AACA;AACA,EAAC;AAEM,MAAM4B,KAAK,GAAGd,MAAM,CAACe,KAAK,CAC9Bb,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACnB,KAAK,KAAK;EACf,GAAGoB,iBAAiB,CAACpB,KAAK,CAAC;AAC3B6B,EAAAA,IAAI,EAAE7B,KAAK,CAACgC,SAAS,IAAI,MAAA;AAC3B,CAAC,CAAC,CAAC,CAAA;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAEhC,KAAK,IAAI;AACT,EAAA,IAAIA,KAAK,CAAC6B,IAAI,KAAK,OAAO,EAAE;AAC1B,IAAA,OAAOtB,GAAG,CAAA;AACd,MAAQP,EAAAA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AACjE,IAAK,CAAA,CAAA;AACH,GAAC,MAAM,IAAIF,KAAK,CAAC6B,IAAI,KAAK,SAAS,EAAE;AACnC,IAAA,OAAOtB,GAAG,CAAA;AACd,MAAQP,EAAAA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AACjE,IAAK,CAAA,CAAA;AACH,GAAC,MAAM;IACL,OAAOF,KAAK,CAACC,KAAK,CAACC,SAAS,CAC1B,YAAY,EACZF,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CAAC,EAChCR,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,OAAO,CAC9B,CAAC,CAAA;AACH,GAAA;AACF,CAAC,CAAA;AACD;AACA,EAAA,EAAIR,KAAK,IACLA,KAAK,CAACiC,QAAQ,IACd1B,GAAG,CAAA;AACP;AACA,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIP,KAAK,IACLA,KAAK,CAACS,QAAQ,IACdF,GAAG,CAAA;AACP;AACA,IAAK,CAAA,CAAA;AACL;AACA,EAAIP,EAAAA,KAAK,IACLA,KAAK,CAAC6B,IAAI,KAAK,SAAS,IACxBtB,GAAG,CAAA;AACP,iBAAmBP,EAAAA,KAAK,IAAKA,KAAK,CAAC6B,IAAI,KAAK,SAAS,GAAG/B,MAAM,GAAGK,OAAQ,CAAA;AACzE,IAAK,CAAA,CAAA;AACL;AACA;AACA,IAAMH,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CAAC,EAChCR,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACP;AACA;AACA;AACA;AACA;AACA,MAAA,EAAQR,KAAK,IACLA,KAAK,CAACkC,OAAO,IACb3B,GAAG,CAAA;AACX;AACA;AACA,YAAA,EAAcD,SAAS,CAAA;AACvB;AACA;AACA;AACA;AACA,QAAS,CAAA,CAAA;AACT;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMN,KAAK,IAAI;EACT,IAAIA,KAAK,CAACmC,KAAK,EAAE;AACf,IAAA,IAAInC,KAAK,CAAC6B,IAAI,KAAK,OAAO,EAAE;MAC1B,OAAO7B,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AAClE,KAAC,MAAM,IAAIF,KAAK,CAAC6B,IAAI,KAAK,SAAS,EAAE;MACnC,OAAO7B,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AAClE,KAAC,MAAM;MACL,OAAOF,KAAK,CAACC,KAAK,CAACC,SAAS,CAC1B,YAAY,EACZ,qBAAqB,EACrB,wBACF,CAAC,CAAA;AACH,KAAA;AACF,GAAA;AACF,CAAC,CAAA;AACL;AACA;AACA;AACA,IAAA,EAAMF,KAAK,IACLA,KAAK,CAACmC,KAAK,IACXnC,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,cAAc,EAAE,qBAAqB,EAAE,wBAAwB,CAAC,CAAA;AAC5F;AACA,IAAA,EAAMF,KAAK,IACLA,KAAK,CAACkC,OAAO,IACb3B,GAAG,CAAA;AACT;AACA;AACA;AACA,UAAA,EAAYD,SAAS,CAAA;AACrB;AACA,MAAO,CAAA,CAAA;AACP;AACA;AACA;AACA;AACA,IAAMN,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,YAAY,EACZF,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CAAC,EAChCR,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACP;AACA,IAAA,EAAMR,KAAK,IACLA,KAAK,CAACiC,QAAQ,IACd1B,GAAG,CAAA;AACT,QAAA,EAAUI,kBAAkB,CAAA;AAC5B,MAAO,CAAA,CAAA;AACP;AACA,IAAA,EAAMX,KAAK,IACLA,KAAK,CAACmC,KAAK,IACXnC,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,cAAc,EACdF,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CAAC,EAChCR,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACP;AACA,IAAA,EAAMR,KAAK,IACLA,KAAK,CAAC6B,IAAI,KAAK,SAAS,IAAI7B,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AAC3F;AACA,IAAA,EAAMF,KAAK,IAAIA,KAAK,CAAC6B,IAAI,KAAK,OAAO,IAAI7B,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AAClG;AACA;AACA,IAAA,EAAMF,KAAK,IACLA,KAAK,CAACoC,QAAQ,IACd7B,GAAG,CAAA;AACT;AACA;AACA;AACA;AACA;AACA,MAAO,CAAA,CAAA;AACP,UAAA,EAAYqB,kBAAkB,CAAA;AAC9B;AACA;AACA;AACA;AACA;AACA,IAAA,EAAM5B,KAAK,IACLA,KAAK,CAACS,QAAQ,IACdF,GAAG,CAAA;AACT;AACA;AACA,MAAO,CAAA,CAAA;AACP,MAAQP,EAAAA,KAAK,IACLA,KAAK,CAACS,QAAQ,IACdT,KAAK,CAACoC,QAAQ,IACd7B,GAAG,CAAA;AACX;AACA;AACA,QAAS,CAAA,CAAA;AACT;AACA;AACA;AACA;AACA,IAAA,EAAMP,KAAK,IACL,CAACA,KAAK,CAACiC,QAAQ,IACfjC,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,YAAY,EACZF,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CAAC,EAChCR,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACP;AACA,MAAA,EAAQR,KAAK,IACLA,KAAK,CAACiC,QAAQ,IACd1B,GAAG,CAAA;AACX,UAAA,EAAYI,kBAAkB,CAAA;AAC9B,QAAS,CAAA,CAAA;AACT;AACA,IAAA,EAAMX,KAAK,IACLA,KAAK,CAAC6B,IAAI,KAAK,OAAO,IACtB,CAAC7B,KAAK,CAACiC,QAAQ,IACfjC,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CAAC,EAChCR,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACP;AACA,IAAA,EAAMR,KAAK,IACL,CAACA,KAAK,CAACiC,QAAQ,IACf1B,GAAG,CAAA;AACT,sBAAwBP,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACO,QAAQ,CAAC,UAAU,CAAC,CAAA;AACjE,MAAO,CAAA,CAAA;AACP;AACA;AACA,IAAMR,EAAAA,KAAK,IACLA,KAAK,CAAC6B,IAAI,KAAK,SAAS,IACxBtB,GAAG,CAAA;AACT,QAAA,EAAUP,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AAC9E,QAAUF,EAAAA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;AAC/D,QAAUF,EAAAA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;AAC1D,MAAO,CAAA,CAAA;AACP;AACA,IAAMF,EAAAA,KAAK,IACLA,KAAK,CAAC6B,IAAI,KAAK,OAAO,IACtBtB,GAAG,CAAA;AACT,QAAA,EAAUP,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AAC9E,QAAUF,EAAAA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;AAC/D,QAAUF,EAAAA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;AAC1D,MAAO,CAAA,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIF,KAAK,IACLA,KAAK,CAACqC,KAAK,IACX9B,GAAG,CAAA;AACP;AACA;AACA;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL,EAAC;AAEM,MAAM+B,oBAAoB,GAAGtB,MAAM,CAACC,GAAG,CAC3CC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B,EAAA,EAAIV,oBAAoB,CAAA;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AAEM,MAAM6B,UAAU,GAAGvB,MAAM,CAACwB,CAAC,CAC/BtB,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B,EAAA,EAAIV,oBAAoB,CAAA;AACxB,EAAA,EAAIJ,SAAS,CAAA;AACb,EAAC;AAEM,MAAMmC,qBAAqB,GAAGzB,MAAM,CAACC,GAAG,CAC5CC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B,EAAA,EAAIT,kBAAkB,CAAA;AACtB;AACA;AACA;AACA;;;;"}
+{"version":3,"file":"CompactTextInput.styled.js","sources":["../../../src/components/inputs/CompactTextInput/CompactTextInput.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst linkColor = css`\n  ${props => props.theme.themeProp('color', '#ACCDC3', props.theme.getColor('emerald-500'))}\n  ${props =>\n    !props.disabled &&\n    css`\n      &:hover {\n        text-decoration: underline;\n      }\n    `}\n`;\n\nconst commonAnchorTagStyle = css`\n  a,\n  && {\n    font-size: 0.875rem;\n    text-decoration: none;\n  }\n`;\n\nconst readOnlyBackground = css`\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('white')\n    )}\n`;\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const CompactTextInput = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  height: 24px;\n  font-family: ${props => props.theme.primaryFontFamily};\n`;\n\nexport const Label = styled.label\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n  flex-basis: 33.33%;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  justify-content: space-between;\n  height: 19px;\n  display: flex;\n  align-items: center;\n  ${props =>\n    props.disabled &&\n    css`\n      opacity: 0.5;\n      cursor: not-allowed;\n    `}\n`;\n\nexport const InputContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  position: relative;\n  height: 19px;\n  flex-basis: ${props => (props.$hasLabel ? '66.66%' : '100%')};\n`;\n\nexport const SuccessContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  opacity: 1;\n  pointer-events: none;\n  display: flex;\n  transition: opacity 0.5s ease-in-out;\n  margin-right: 5px;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-500')\n    )}\n  > svg {\n    width: 13px;\n  }\n`;\n\nexport const InputSuccessContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  opacity: 1;\n  pointer-events: none;\n  display: flex;\n  justify-content: flex-end;\n  transition: opacity 0.5s ease-in-out;\n  position: relative;\n  margin-top: -20px;\n  margin-right: 8px;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-500')\n    )}\n  > svg {\n    width: 13px;\n  }\n`;\n\nexport const InputIconContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  opacity: 0;\n  pointer-events: none;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n  padding: 5px 10px 0 0;\n  transition: opacity 250ms;\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      css`\n        linear-gradient(-90deg,\n        ${props =>\n          props.$type === 'error'\n            ? '#901d1d'\n            : props.$type === 'warning'\n              ? '#816600'\n              : props.theme.getColor('gray-700')} 55%,\n        transparent)\n      `,\n      css`\n        linear-gradient(-90deg,\n        ${props =>\n          props.$type === 'error'\n            ? '#f7d5d0'\n            : props.$type === 'warning'\n              ? '#fffebf'\n              : props.theme.getColor('gray-100')} 55%,\n        transparent)\n      `\n    )};\n\n  display: flex;\n  align-items: center;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  color: ${props => props.theme.getColor('gray-400')};\n\n  ${props => props.$type === 'warning' && props.theme.themeProp('color', '#C3AF43', '#C3AF43')}\n\n  ${props => props.$type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F')}\n\n  > svg {\n    width: 12px;\n    transition: opacity 250ms;\n  }\n`;\n\n// @ts-ignore - Transient props ($type, $edit, $bold, $haslink) are filtered by shouldForwardProp\nexport const Input = styled.input\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(props => ({\n    ...applyDefaultTheme(props),\n    type: props.inputtype || 'text'\n  }))`\n  box-sizing: border-box;\n  height: 22px;\n  width: 100%;\n  display: block;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  font-family: inherit;\n  padding: 1px 10px;\n  border-radius: 3px;\n  border: 1px solid transparent;\n  transition: border-color 350ms, background 350ms;\n\n  ${props => {\n    if (props.$type === 'error') {\n      return css`\n        ${props.theme.themeProp('background', '#7f1b1b', '#FEE2E2')} !important;\n      `;\n    } else if (props.$type === 'warning') {\n      return css`\n        ${props.theme.themeProp('background', '#634E01', '#FFFDE8')} !important;\n      `;\n    } else {\n      return props.theme.themeProp(\n        'background',\n        props.theme.getColor('gray-900'),\n        props.theme.getColor('white')\n      );\n    }\n  }}\n\n  ${props =>\n    props.readOnly &&\n    css`\n      cursor: default;\n    `}\n\n  ${props =>\n    props.disabled &&\n    css`\n      opacity: 0.5;\n    `}\n\n\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-200'),\n      props.theme.getColor('gray-700')\n    )}\n\n  ${props =>\n    props.$haslink &&\n    css`\n      &&:not(:focus),\n      &&:read-only {\n        ${linkColor}\n      }\n      &&:read-only {\n        cursor: default;\n      }\n    `};\n\n  &&:not(:hover):not(:focus) {\n    ${props => {\n      if (props.$edit) {\n        if (props.$type === 'error') {\n          return props.theme.themeProp('background', '#7f1b1b', '#FEE2E2');\n        } else if (props.$type === 'warning') {\n          return props.theme.themeProp('background', '#634E01', '#FFFDE8');\n        } else {\n          return props.theme.themeProp(\n            'background',\n            'rgba(39,39,42, 0.7)',\n            'rgba(244,244,245, 0.3)'\n          );\n        }\n      }\n    }}\n\n    ${props =>\n      props.$edit &&\n      props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)')};\n    \n    ${props =>\n      props.$haslink &&\n      css`\n        &&:not(:focus),\n        &&:read-only {\n          cursor: default;\n          ${linkColor}\n        }\n      `}\n  }\n\n  &&:hover:not(:focus) {\n    ${props => {\n      if (props.readOnly) {\n        if (props.$type === 'error') {\n          return props.theme.themeProp('background', '#7f1b1b', '#FEE2E2');\n        } else if (props.$type === 'warning') {\n          return props.theme.themeProp('background', '#634E01', '#FFFDE8');\n        }\n        return readOnlyBackground;\n      }\n\n      if (props.$type === 'error') {\n        return props.theme.themeProp('background', '#901d1d', '#F7D5D0');\n      } else if (props.$type === 'warning') {\n        return props.theme.themeProp('background', '#806403', '#FFFEBF');\n      } else {\n        return props.theme.themeProp(\n          'background',\n          props.theme.getColor('gray-700'),\n          props.theme.getColor('gray-100')\n        );\n      }\n    }}\n\n    ${props =>\n      props.$edit &&\n      props.theme.themeProp(\n        'border-color',\n        props.theme.getColor('gray-700'),\n        props.theme.getColor('gray-100')\n      )};\n\n    ${props =>\n      props.$haslink &&\n      css`\n        cursor: pointer;\n        &&:read-only {\n          background: none !important;\n          cursor: default;\n        }\n      `}\n      \n    & + ${InputIconContainer} {\n      opacity: 1;\n      ${props =>\n        props.$type === 'success' &&\n        css`\n          opacity: 0;\n        `}\n    }\n\n    ${props =>\n      props.disabled &&\n      css`\n        background: none !important;\n        cursor: not-allowed;\n      `}\n    \n    ${props =>\n      props.disabled &&\n      props.$haslink &&\n      css`\n        background: none !important;\n        cursor: not-allowed !important;\n      `}\n  }\n\n  &&:focus {\n    outline: none;\n\n    ${props => {\n      if (props.readOnly) {\n        if (props.$type === 'error') {\n          return props.theme.themeProp('background', '#7f1b1b', '#FEE2E2');\n        } else if (props.$type === 'warning') {\n          return props.theme.themeProp('background', '#634E01', '#FFFDE8');\n        }\n        return readOnlyBackground;\n      }\n\n      if (props.$type === 'error') {\n        return css`\n          ${props.theme.themeProp('border-color', '#D83018', '#D83018')}\n          ${props.theme.themeProp('background', 'white', 'white')}\n          ${props.theme.themeProp('color', 'black', 'black')}\n        `;\n      } else if (props.$type === 'warning') {\n        return css`\n          ${props.theme.themeProp('border-color', '#F4E21E', '#F4E21E')}\n          ${props.theme.themeProp('background', 'white', 'white')}\n          ${props.theme.themeProp('color', 'black', 'black')}\n        `;\n      } else {\n        return css`\n          border-color: ${props.theme.getColor('gray-600')};\n          ${props.theme.themeProp(\n            'background',\n            props.theme.getColor('gray-700'),\n            props.theme.getColor('gray-100')\n          )}\n        `;\n      }\n    }}\n  }\n\n  &&::placeholder {\n    color: inherit;\n    opacity: 0.6;\n  }\n\n  &&:hover::placeholder {\n    ${props => {\n      if (props.$type === 'warning') {\n        return props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-200'),\n          props.theme.getColor('gray-700')\n        );\n      } else if (props.$type === 'error') {\n        return props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-200'),\n          props.theme.getColor('gray-700')\n        );\n      }\n      return '';\n    }}\n  }\n\n  &&:focus::placeholder {\n    ${props => {\n      if (props.$type === 'warning') {\n        return props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-900'),\n          props.theme.getColor('gray-900')\n        );\n      } else if (props.$type === 'error') {\n        return props.theme.themeProp(\n          'color',\n          props.theme.getColor('red-600'),\n          props.theme.getColor('red-600')\n        );\n      }\n      return '';\n    }}\n  }\n\n  ${props =>\n    props.$bold &&\n    css`\n      font-size: 1rem;\n      font-weight: 500;\n      line-height: 1.0625;\n      padding-top: 3px;\n      padding-bottom: 2px;\n    `}\n`;\n\nexport const LinkPopoverContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  ${commonAnchorTagStyle}\n\n  padding: 5px 8px;\n\n  svg {\n    width: 18px;\n    margin-right: 8px;\n  }\n`;\n\nexport const StyledLink = styled.a\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  ${commonAnchorTagStyle}\n  ${linkColor}\n`;\n\nexport const ReadOnlyLinkContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  ${readOnlyBackground};\n  border: 1px solid transparent;\n  border-radius: 3px;\n  padding: 0 10px 1px;\n`;\n"],"names":["linkColor","css","props","theme","themeProp","getColor","disabled","commonAnchorTagStyle","readOnlyBackground","shouldForwardProp","prop","startsWith","CompactTextInput","styled","div","withConfig","attrs","applyDefaultTheme","primaryFontFamily","Label","label","InputContainer","$hasLabel","SuccessContainer","InputSuccessContainer","InputIconContainer","$type","Input","input","type","inputtype","readOnly","$haslink","$edit","$bold","LinkPopoverContainer","StyledLink","a","ReadOnlyLinkContainer"],"mappings":"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"}

package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiLevelCheckboxSelect.js","sources":["../../../src/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './MultiLevelCheckboxSelect.styled';\nimport { Popover } from '../../data';\nimport MultiLevelCheckbox from '../MultiLevelCheckbox';\nimport TextInput from '../TextInput';\nimport { SectionSeparator } from '../../layout';\nimport { ReactComponent as SearchIcon } from '../../../icons/search.svg';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\nimport { findChildValues, NodeType } from '../MultiLevelCheckbox';\nimport { useEventListener } from '../../../hooks/useEventListner';\nimport { useOnClickOutside } from '../../../hooks/useOnClickOutside';\nimport useUpdateEffect from '@restart/hooks/useUpdateEffect';\nimport { isFunction } from 'lodash';\n\n/**\n * MultiLevelCheckboxSelect allow the user to select one or more items from a nested set into a MultiSelect-styled input.\n *\n * This component is controlled which means that the consumer will have to keep track of what options are selected. The selected options should be provided to the `checked`-prop. On any selection or deselection onChange will be called with an updated `checked`-list.\n *\n * ### Import\n *\n * ```js\n * import { MultiLevelCheckboxSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import MultiLevelCheckboxSelect from '@ntbjs/react-components/inputs/MultiLevelCheckboxSelect'\n * ```\n */\nconst MultiLevelCheckboxSelect = React.forwardRef(function MultiLevelCheckboxSelect(\n  {\n    label,\n    options,\n    checked: checkedProp,\n    placeholder,\n    noResultsText,\n    onChange,\n    onParentChange,\n    ...props\n  },\n  forwardedRef\n) {\n  const inputRef = useRef(null);\n  const popoverContentRef = useRef(null);\n  const searchInputRef = useRef(null);\n  // const [internalChecked, setInternalChecked] = useState([]);\n  const [searchString, setSearchString] = useState('');\n  const [open, setOpen] = useState(false);\n\n  const handleClickInside = useCallback(() => {\n    setOpen(true);\n    searchInputRef.current?.focus();\n  }, []);\n\n  const handleKeyDown = useCallback(\n    event => {\n      if (!open) return;\n      if (event.key === 'Escape') {\n        setOpen(false);\n      }\n    },\n    [open]\n  );\n\n  useEventListener('focus', handleClickInside, inputRef);\n  useEventListener('mousedown', handleClickInside, inputRef);\n  useEventListener('keydown', handleKeyDown);\n\n  const handleClickOutside = event => {\n    if (\n      popoverContentRef?.current === event.target ||\n      popoverContentRef?.current?.contains(event.target)\n    ) {\n      return;\n    }\n    setOpen(false);\n  };\n\n  useOnClickOutside(inputRef, handleClickOutside);\n\n  const checked = useMemo(() => {\n    const checkedParents = [];\n\n    function iterate(nodes) {\n      nodes.forEach(node => {\n        if (checkedProp.includes(node.value)) {\n          return checkedParents.push(node.value);\n        }\n\n        if (node.children) {\n          iterate(node.children);\n        }\n      });\n    }\n\n    iterate(options);\n    return checkedParents.sort();\n  }, [JSON.stringify(options), JSON.stringify(checkedProp)]);\n\n  const getLabelByValue = useCallback(\n    (targetValue, nodes = options) => {\n      for (const node of nodes) {\n        if (node.value === targetValue) {\n          return node.label;\n        }\n\n        if (node.children) {\n          const result = getLabelByValue(targetValue, node.children);\n          if (result) {\n            return result;\n          }\n        }\n      }\n\n      return null; // Return null if the value is not found in the array\n    },\n    [options]\n  );\n\n  const removeItem = useCallback(\n    value => {\n      let node = null;\n\n      function findNodeByValue(options, value) {\n        for (let i = 0; i < options.length; i++) {\n          if (options[i].value === value) {\n            node = options[i];\n            break; // This will exit the loop when the condition is met\n          }\n\n          if (options[i].children) {\n            findNodeByValue(options[i].children, value);\n          }\n        }\n      }\n\n      findNodeByValue(options, value);\n\n      if (node) {\n        const childValues = findChildValues(node);\n        const valuesToRemove = [value, ...childValues];\n        onChange(checkedProp.filter(value => !valuesToRemove.includes(value)));\n      }\n    },\n    [options, checkedProp]\n  );\n\n  useUpdateEffect(() => {\n    if (isFunction(onParentChange)) {\n      onParentChange(checked);\n    }\n  }, [checked]);\n\n  return (\n    <S.MultiLevelCheckboxSelect ref={forwardedRef} {...props}>\n      <Popover\n        visible={open}\n        arrow={false}\n        placement={'bottom'}\n        offset={[0, 6]}\n        modifiers={[\n          {\n            name: 'sameWidth',\n            enabled: true,\n            phase: 'beforeWrite',\n            requires: ['computeStyles'],\n            fn: ({ state }) => {\n              state.styles.popper.width = `${state.rects.reference.width}px`;\n            },\n            effect: ({ state }) => {\n              state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;\n            }\n          }\n        ]}\n        content={\n          <S.PopoverContainer ref={popoverContentRef}>\n            <S.PopoverHeader>\n              <S.SearchContainer>\n                <TextInput\n                  ref={searchInputRef}\n                  onBlur={e => {\n                    if (open) {\n                      e.target.focus();\n                    }\n                  }}\n                  icon={<SearchIcon />}\n                  value={searchString}\n                  onChange={e => setSearchString(e.target.value)}\n                />\n              </S.SearchContainer>\n              <SectionSeparator />\n            </S.PopoverHeader>\n            <S.OptionsContainer>\n              <MultiLevelCheckbox\n                options={options}\n                checked={checkedProp}\n                search={searchString}\n                noResultsText={noResultsText}\n                onChange={onChange}\n              />\n            </S.OptionsContainer>\n          </S.PopoverContainer>\n        }\n      >\n        <S.MultiLevelCheckboxSelectInput tabIndex=\"0\" ref={inputRef}>\n          {label && <S.Label>{label}</S.Label>}\n          {checked.length === 0 && <S.Placeholder>{placeholder}</S.Placeholder>}\n          {checked.map(option => (\n            <S.Item key={option}>\n              <S.ItemLabel>{getLabelByValue(option)}</S.ItemLabel>\n              <S.ItemRemoveButton\n                onClick={() => {\n                  removeItem(option);\n                }}\n              >\n                <CloseIcon />\n              </S.ItemRemoveButton>\n            </S.Item>\n          ))}\n        </S.MultiLevelCheckboxSelectInput>\n      </Popover>\n    </S.MultiLevelCheckboxSelect>\n  );\n});\n\nMultiLevelCheckboxSelect.propTypes = {\n  /**\n   * Label text for the MultiLevelCheckbox\n   */\n  label: PropTypes.string,\n  /**\n   * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. \"Select categories...\"\n   */\n  placeholder: PropTypes.string,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      value: PropTypes.any.isRequired,\n      children: PropTypes.arrayOf(NodeType)\n    })\n  ).isRequired,\n\n  /**\n   * Array of checked option values\n   */\n  checked: PropTypes.array.isRequired,\n\n  /**\n   * Optional text to display when no results are found while searching.`\n   */\n  noResultsText: PropTypes.string,\n\n  /**\n   *  Callback function for the `onChange` event\n   */\n  onChange: PropTypes.func.isRequired,\n\n  /**\n   *  Callback function for the `onChange` event – returns only the checked parents\n   */\n  onParentChange: PropTypes.func\n};\n\nMultiLevelCheckboxSelect.defaultProps = {\n  checked: []\n};\n\nexport default MultiLevelCheckboxSelect;\n"],"names":["MultiLevelCheckboxSelect","React","forwardRef","label","options","checked","checkedProp","placeholder","noResultsText","onChange","onParentChange","props","forwardedRef","inputRef","useRef","popoverContentRef","searchInputRef","searchString","setSearchString","useState","open","setOpen","handleClickInside","useCallback","current","focus","handleKeyDown","event","key","useEventListener","handleClickOutside","target","contains","useOnClickOutside","useMemo","checkedParents","iterate","nodes","forEach","node","includes","value","push","children","sort","JSON","stringify","getLabelByValue","targetValue","result","removeItem","findNodeByValue","i","length","childValues","findChildValues","valuesToRemove","filter","useUpdateEffect","isFunction","createElement","S","_extends","ref","Popover","visible","arrow","placement","offset","modifiers","name","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","style","offsetWidth","content","TextInput","onBlur","e","icon","SearchIcon","SectionSeparator","MultiLevelCheckbox","search","tabIndex","map","option","onClick","CloseIcon","propTypes","process","env","NODE_ENV","PropTypes","string","arrayOf","shape","isRequired","any","NodeType","array","func","defaultProps"],"mappings":"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"}
+{"version":3,"file":"MultiLevelCheckboxSelect.js","sources":["../../../src/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './MultiLevelCheckboxSelect.styled';\nimport { Popover } from '../../data';\nimport MultiLevelCheckbox from '../MultiLevelCheckbox';\nimport TextInput from '../TextInput';\nimport { SectionSeparator } from '../../layout';\nimport { ReactComponent as SearchIcon } from '../../../icons/search.svg';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\nimport { findChildValues, NodeType } from '../MultiLevelCheckbox';\nimport { useEventListener } from '../../../hooks/useEventListner';\nimport { useOnClickOutside } from '../../../hooks/useOnClickOutside';\nimport useUpdateEffect from '@restart/hooks/useUpdateEffect';\nimport { isFunction } from 'lodash';\n\n/**\n * MultiLevelCheckboxSelect allow the user to select one or more items from a nested set into a MultiSelect-styled input.\n *\n * This component is controlled which means that the consumer will have to keep track of what options are selected. The selected options should be provided to the `checked`-prop. On any selection or deselection onChange will be called with an updated `checked`-list.\n *\n * ### Import\n *\n * ```js\n * import { MultiLevelCheckboxSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import MultiLevelCheckboxSelect from '@ntbjs/react-components/inputs/MultiLevelCheckboxSelect'\n * ```\n */\nconst MultiLevelCheckboxSelect = React.forwardRef(function MultiLevelCheckboxSelect(\n  {\n    label,\n    options,\n    checked: checkedProp,\n    placeholder,\n    noResultsText,\n    onChange,\n    onParentChange,\n    ...props\n  },\n  forwardedRef\n) {\n  const inputRef = useRef(null);\n  const popoverContentRef = useRef(null);\n  const searchInputRef = useRef(null);\n  const [searchString, setSearchString] = useState('');\n  const [open, setOpen] = useState(false);\n\n  const handleClickInside = useCallback(() => {\n    setOpen(true);\n    searchInputRef.current?.focus();\n  }, []);\n\n  const handleKeyDown = useCallback(\n    event => {\n      if (!open) return;\n      if (event.key === 'Escape') {\n        setOpen(false);\n      }\n    },\n    [open]\n  );\n\n  useEventListener('focus', handleClickInside, inputRef);\n  useEventListener('mousedown', handleClickInside, inputRef);\n  useEventListener('keydown', handleKeyDown);\n\n  const handleClickOutside = event => {\n    if (\n      popoverContentRef?.current === event.target ||\n      popoverContentRef?.current?.contains(event.target)\n    ) {\n      return;\n    }\n    setOpen(false);\n  };\n\n  useOnClickOutside(inputRef, handleClickOutside);\n\n  const checked = useMemo(() => {\n    const checkedParents = [];\n\n    function iterate(nodes) {\n      nodes.forEach(node => {\n        if (checkedProp.includes(node.value)) {\n          return checkedParents.push(node.value);\n        }\n\n        if (node.children) {\n          iterate(node.children);\n        }\n      });\n    }\n\n    iterate(options);\n    return checkedParents.sort();\n  }, [JSON.stringify(options), JSON.stringify(checkedProp)]);\n\n  const getLabelByValue = useCallback(\n    (targetValue, nodes = options) => {\n      for (const node of nodes) {\n        if (node.value === targetValue) {\n          return node.label;\n        }\n\n        if (node.children) {\n          const result = getLabelByValue(targetValue, node.children);\n          if (result) {\n            return result;\n          }\n        }\n      }\n\n      return null; // Return null if the value is not found in the array\n    },\n    [options]\n  );\n\n  const removeItem = useCallback(\n    value => {\n      let node = null;\n\n      function findNodeByValue(options, value) {\n        for (let i = 0; i < options.length; i++) {\n          if (options[i].value === value) {\n            node = options[i];\n            break; // This will exit the loop when the condition is met\n          }\n\n          if (options[i].children) {\n            findNodeByValue(options[i].children, value);\n          }\n        }\n      }\n\n      findNodeByValue(options, value);\n\n      if (node) {\n        const childValues = findChildValues(node);\n        const valuesToRemove = [value, ...childValues];\n        onChange(checkedProp.filter(value => !valuesToRemove.includes(value)));\n      }\n    },\n    [options, checkedProp]\n  );\n\n  useUpdateEffect(() => {\n    if (isFunction(onParentChange)) {\n      onParentChange(checked);\n    }\n  }, [checked]);\n\n  return (\n    <S.MultiLevelCheckboxSelect ref={forwardedRef} {...props}>\n      <Popover\n        visible={open}\n        arrow={false}\n        placement={'bottom'}\n        offset={[0, 6]}\n        modifiers={[\n          {\n            name: 'sameWidth',\n            enabled: true,\n            phase: 'beforeWrite',\n            requires: ['computeStyles'],\n            fn: ({ state }) => {\n              state.styles.popper.width = `${state.rects.reference.width}px`;\n            },\n            effect: ({ state }) => {\n              state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;\n            }\n          }\n        ]}\n        content={\n          <S.PopoverContainer ref={popoverContentRef}>\n            <S.PopoverHeader>\n              <S.SearchContainer>\n                <TextInput\n                  ref={searchInputRef}\n                  onBlur={e => {\n                    if (open) {\n                      e.target.focus();\n                    }\n                  }}\n                  icon={<SearchIcon />}\n                  value={searchString}\n                  onChange={e => setSearchString(e.target.value)}\n                />\n              </S.SearchContainer>\n              <SectionSeparator />\n            </S.PopoverHeader>\n            <S.OptionsContainer>\n              <MultiLevelCheckbox\n                options={options}\n                checked={checkedProp}\n                search={searchString}\n                noResultsText={noResultsText}\n                onChange={onChange}\n              />\n            </S.OptionsContainer>\n          </S.PopoverContainer>\n        }\n      >\n        <S.MultiLevelCheckboxSelectInput tabIndex=\"0\" ref={inputRef}>\n          {label && <S.Label>{label}</S.Label>}\n          {checked.length === 0 && <S.Placeholder>{placeholder}</S.Placeholder>}\n          {checked.map(option => (\n            <S.Item key={option}>\n              <S.ItemLabel>{getLabelByValue(option)}</S.ItemLabel>\n              <S.ItemRemoveButton\n                onClick={() => {\n                  removeItem(option);\n                }}\n              >\n                <CloseIcon />\n              </S.ItemRemoveButton>\n            </S.Item>\n          ))}\n        </S.MultiLevelCheckboxSelectInput>\n      </Popover>\n    </S.MultiLevelCheckboxSelect>\n  );\n});\n\nMultiLevelCheckboxSelect.propTypes = {\n  /**\n   * Label text for the MultiLevelCheckbox\n   */\n  label: PropTypes.string,\n  /**\n   * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. \"Select categories...\"\n   */\n  placeholder: PropTypes.string,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      value: PropTypes.any.isRequired,\n      children: PropTypes.arrayOf(NodeType)\n    })\n  ).isRequired,\n\n  /**\n   * Array of checked option values\n   */\n  checked: PropTypes.array.isRequired,\n\n  /**\n   * Optional text to display when no results are found while searching.`\n   */\n  noResultsText: PropTypes.string,\n\n  /**\n   *  Callback function for the `onChange` event\n   */\n  onChange: PropTypes.func.isRequired,\n\n  /**\n   *  Callback function for the `onChange` event – returns only the checked parents\n   */\n  onParentChange: PropTypes.func\n};\n\nMultiLevelCheckboxSelect.defaultProps = {\n  checked: []\n};\n\nexport default MultiLevelCheckboxSelect;\n"],"names":["MultiLevelCheckboxSelect","React","forwardRef","label","options","checked","checkedProp","placeholder","noResultsText","onChange","onParentChange","props","forwardedRef","inputRef","useRef","popoverContentRef","searchInputRef","searchString","setSearchString","useState","open","setOpen","handleClickInside","useCallback","current","focus","handleKeyDown","event","key","useEventListener","handleClickOutside","target","contains","useOnClickOutside","useMemo","checkedParents","iterate","nodes","forEach","node","includes","value","push","children","sort","JSON","stringify","getLabelByValue","targetValue","result","removeItem","findNodeByValue","i","length","childValues","findChildValues","valuesToRemove","filter","useUpdateEffect","isFunction","createElement","S","_extends","ref","Popover","visible","arrow","placement","offset","modifiers","name","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","style","offsetWidth","content","TextInput","onBlur","e","icon","SearchIcon","SectionSeparator","MultiLevelCheckbox","search","tabIndex","map","option","onClick","CloseIcon","propTypes","process","env","NODE_ENV","PropTypes","string","arrayOf","shape","isRequired","any","NodeType","array","func","defaultProps"],"mappings":"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"}

package/build/inputs/MultiSelect/MultiSelect.js

@@ -1,142 +1,217 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useEffect } from 'react';
+import React__default, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { MultiSelectWrapper, AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, MultiSelect as MultiSelect$1, ShowMoreWrapper, ShowMoreOverlay, ShowMoreText, ErrorMessage, MultiValueRemove as MultiValueRemove$1, DropdownMenu, Option as Option$1, SelectedOption as SelectedOption$1, DropdownOptionDeleteIcon, MultiValueWrapper, MultiValue } from './MultiSelect.styled.js';
+import { nanoid } from 'nanoid';
+import { components } from 'react-select';
+import { MultiSelectWrapper, Label, InnerWrapper, AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, MultiSelect as MultiSelect$1, ShowMoreWrapper, ShowMoreOverlay, ShowMoreText, ErrorMessage, MultiValue, InputWrapper, DropdownMenu, SelectedOption, DropdownOptionDeleteIcon, Option } from './MultiSelect.styled.js';
 import { ReactComponent as SvgClose } from '../../icons/close.svg.js';
 
+const reactSelectTheme = theme => ({
+  ...theme,
+  spacing: {
+    baseUnit: 4,
+    controlHeight: 38,
+    menuGutter: 8
+  }
+});
 const MultiSelect = React__default.forwardRef(function MultiSelect({
-  selectedOptions,
+  label,
+  selectedOptions = [],
   availableOptions,
   loadOptions,
   loadingMessageFunc,
   onUpdateCallback,
   editText,
-  createNewOptionMessageFunc,
-  noOptionsMessageFunc,
-  onMultiValueClick,
-  showMore,
-  showMoreText,
-  displayTotalOnShowMore,
   creatable,
   readOnly,
   hidden,
   disabled,
   error,
   warning,
+  onMultiValueClick,
+  showMore,
+  showMoreText = 'Show more',
+  displayTotalOnShowMore = true,
+  noOptionsMessageFunc,
   ...props
 }, forwardedRef) {
+  const [uniqueId] = useState(nanoid());
   const [selected, setSelected] = useState(selectedOptions);
   const [focused, setFocused] = useState(false);
   const [displayShowMore, setDisplayShowMore] = useState(error || warning ? false : showMore);
   const [cacheUnique, setCacheUnique] = useState(0);
+  const [controlledMenuIsOpen, setControlledMenuIsOpen] = useState(undefined);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const wrapperRef = React__default.useRef(null);
   useEffect(() => {
     setSelected(selectedOptions);
   }, [selectedOptions]);
-  const handleShowMoreClick = () => {
-    setDisplayShowMore(false);
-  };
-  const MultiValue$1 = innerProps => {
-    return React__default.createElement(MultiValueWrapper, {
-      className: "multi-value-wrapper",
-      onMouseDown: e => {
-        e.stopPropagation();
-        if (onMultiValueClick && innerProps.data && !(e.target.role === 'button' || e.target instanceof SVGElement)) {
-          onMultiValueClick(innerProps.data);
+  useEffect(() => {
+    function handleClick(event) {
+      if (wrapperRef.current) {
+        const isClickInside = wrapperRef.current.contains(event.target);
+        if (!isClickInside) {
+          setControlledMenuIsOpen(false);
+          setIsMenuOpen(false);
+        } else {
+          const isRemoveButton = event.target.closest('.multi-select__multi-value__remove') || event.target.closest('[role="button"]') || event.target instanceof SVGElement || event.target.closest('svg');
+          if (!isRemoveButton && !readOnly && !disabled) {
+            setControlledMenuIsOpen(true);
+            setIsMenuOpen(true);
+          }
         }
       }
-    }, React__default.createElement(MultiValue, _extends({
-      className: "multi-value",
-      readOnly: readOnly
-    }, innerProps)));
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, [readOnly, disabled]);
+  const getNoOptionsMessage = inputValue => {
+    if (typeof noOptionsMessageFunc === 'function') {
+      return noOptionsMessageFunc(inputValue);
+    }
+    return inputValue ? `No matches for "${inputValue}"` : 'No available options';
   };
   const innerComponents = {
     DropdownIndicator: null,
-    MultiValue: MultiValue$1,
-    MultiValueRemove: innerProps => {
-      return readOnly || disabled ? false : MultiValueRemove(innerProps);
+    MultiValue: ({
+      data,
+      ...props
+    }) => {
+      return React__default.createElement("div", {
+        className: "multi-value-wrapper",
+        onMouseDown: e => {
+          if (onMultiValueClick && data && !(e.target.role === 'button' || e.target instanceof SVGElement)) {
+            e.stopPropagation();
+            onMultiValueClick(data);
+          }
+        }
+      }, React__default.createElement(MultiValue, _extends({
+        data: data,
+        $isDisabled: disabled,
+        $isReadOnly: readOnly
+      }, props)));
     },
-    Menu,
-    Option: innerProps => {
-      return innerProps.isSelected ? SelectedOption(innerProps) : Option(innerProps);
-    }
+    MultiValueRemove: props => {
+      if (readOnly || disabled) return null;
+      return React__default.createElement(components.MultiValueRemove, props, React__default.createElement(SvgClose, null));
+    },
+    Input: inputProps => React__default.createElement(InputWrapper, {
+      $focused: focused,
+      $editText: !readOnly && !disabled ? editText : '',
+      $isDisabled: readOnly || disabled,
+      $isMenuOpen: isMenuOpen
+    }, React__default.createElement(components.Input, inputProps)),
+    Menu: menuProps => React__default.createElement(DropdownMenu, menuProps),
+    Option: optProps => optProps.isSelected ? React__default.createElement(SelectedOption, optProps, React__default.createElement("span", null, optProps.label), React__default.createElement(DropdownOptionDeleteIcon, null)) : React__default.createElement(Option, optProps)
   };
-  const sharedSelectProps = {
+  const selectStyles = useMemo(() => ({
+    control: base => ({
+      ...base,
+      alignItems: 'flex-start',
+      background: 'transparent',
+      border: 'none',
+      boxShadow: 'none',
+      minHeight: 'unset'
+    }),
+    valueContainer: base => ({
+      ...base,
+      padding: 0,
+      gap: '8px',
+      maxHeight: displayShowMore && !(error || warning) ? '130px' : '100%'
+    }),
+    menu: base => ({
+      ...base,
+      backgroundColor: 'transparent',
+      boxShadow: 'none'
+    }),
+    menuList: base => ({
+      ...base,
+      backgroundColor: 'transparent'
+    }),
+    option: base => ({
+      ...base,
+      backgroundColor: 'transparent',
+      color: 'inherit'
+    }),
+    multiValue: base => ({
+      ...base,
+      margin: 0,
+      border: 'none',
+      background: 'none'
+    }),
+    multiValueLabel: base => ({
+      ...base,
+      padding: 0
+    }),
+    multiValueRemove: base => ({
+      ...base,
+      padding: 0,
+      cursor: 'pointer'
+    })
+  }), [error, warning, displayShowMore]);
+  const sharedProps = {
+    ...props,
     ref: forwardedRef,
+    classNamePrefix: 'multi-select',
     value: selected,
     options: loadOptions ? undefined : availableOptions,
-    loadOptions: loadOptions,
+    loadOptions,
     loadingMessage: loadingMessageFunc,
-    editText: editText,
-    formatCreateLabel: createNewOptionMessageFunc,
-    showMore: displayShowMore,
-    readOnly: readOnly,
-    isDisabled: disabled,
+    theme: reactSelectTheme,
+    styles: selectStyles,
     components: innerComponents,
-    focused: focused,
     isMulti: true,
     isClearable: false,
     placeholder: null,
+    isDisabled: disabled,
+    readOnly: readOnly,
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
+    openMenuOnClick: false,
+    openMenuOnFocus: false,
+    blurInputOnSelect: false,
+    menuIsOpen: controlledMenuIsOpen,
     cacheUniqs: loadOptions ? [cacheUnique] : undefined,
+    onMenuOpen: () => {
+      setIsMenuOpen(true);
+      setControlledMenuIsOpen(true);
+    },
+    onMenuClose: () => {
+      setIsMenuOpen(false);
+      setControlledMenuIsOpen(false);
+    },
     onFocus: () => setFocused(true),
     onBlur: () => setFocused(false),
-    noOptionsMessage: input => {
-      return noOptionsMessageFunc(input.inputValue);
-    },
+    noOptionsMessage: ({
+      inputValue
+    }) => getNoOptionsMessage(inputValue),
     onChange: (selectedOptions, actionMeta) => {
-      switch (actionMeta.action) {
-        case 'create-option':
-          if (onUpdateCallback) {
-            onUpdateCallback(actionMeta.action, actionMeta.option);
-          }
-          if (loadOptions) {
-            setCacheUnique(cacheUnique + 1);
-          }
-          setSelected(selectedOptions);
-          break;
-        case 'select-option':
-          if (onUpdateCallback) {
-            onUpdateCallback(actionMeta.action, actionMeta.option);
-          }
-          setSelected(selectedOptions);
-          break;
-        case 'remove-value':
-          if (onUpdateCallback) {
-            onUpdateCallback(actionMeta.action, actionMeta.removedValue);
-          }
-          setSelected(selectedOptions);
-          break;
-        case 'pop-value':
-          if (onUpdateCallback) {
-            onUpdateCallback(actionMeta.action, actionMeta.removedValue);
-          }
-          setSelected(selectedOptions);
-          break;
-        case 'deselect-option':
-          if (onUpdateCallback) {
-            onUpdateCallback(actionMeta.action, actionMeta.option);
-          }
-          setSelected(selectedOptions);
-          break;
-        case 'clear':
-          break;
-        default:
-          if (onUpdateCallback) {
-            onUpdateCallback(actionMeta.action, actionMeta.option);
-          }
-          setSelected(selectedOptions);
-          break;
+      if (props.onChange) {
+        props.onChange(selectedOptions, actionMeta);
+      }
+      if (onUpdateCallback) {
+        const updatedItem = actionMeta.option || actionMeta.removedValue;
+        onUpdateCallback(actionMeta.action, updatedItem);
+      }
+      setSelected(selectedOptions);
+      if (actionMeta.action === 'create-option' && loadOptions) {
+        setCacheUnique(cacheUnique + 1);
       }
     }
   };
   if (hidden) return null;
   return React__default.createElement(MultiSelectWrapper, {
+    ref: wrapperRef
+  }, label && React__default.createElement(Label, {
+    htmlFor: uniqueId
+  }, label), React__default.createElement(InnerWrapper, {
     $error: error,
     $warning: warning
-  }, loadOptions ? creatable ? React__default.createElement(AsyncCreatableMultiSelect, _extends({}, sharedSelectProps, props)) : React__default.createElement(AsyncMultiSelect, _extends({}, sharedSelectProps, props)) : creatable ? React__default.createElement(CreatableMultiSelect, _extends({}, sharedSelectProps, props)) : React__default.createElement(MultiSelect$1, _extends({}, sharedSelectProps, props)), displayShowMore && !(error || warning) && React__default.createElement(ShowMoreWrapper, {
-    onClick: handleShowMoreClick
-  }, React__default.createElement(ShowMoreOverlay, null), React__default.createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && '(' + selected.length + ')')), (typeof error === 'string' || typeof warning === 'string') && React__default.createElement(ErrorMessage, {
+  }, loadOptions ? creatable ? React__default.createElement(AsyncCreatableMultiSelect, sharedProps) : React__default.createElement(AsyncMultiSelect, sharedProps) : creatable ? React__default.createElement(CreatableMultiSelect, sharedProps) : React__default.createElement(MultiSelect$1, sharedProps)), displayShowMore && !(error || warning) && React__default.createElement(ShowMoreWrapper, {
+    onClick: () => setDisplayShowMore(false)
+  }, React__default.createElement(ShowMoreOverlay, null), React__default.createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && `(${selected.length})`)), (typeof error === 'string' || typeof warning === 'string') && React__default.createElement(ErrorMessage, {
     $error: error,
     $warning: warning
   }, error ? error : warning));
@@ -160,7 +235,8 @@ MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   hidden: PropTypes.bool,
   disabled: PropTypes.bool,
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  onChange: PropTypes.func
 } : {};
 MultiSelect.defaultProps = {
   noOptionsMessageFunc: inputValue => {
@@ -180,22 +256,6 @@ MultiSelect.defaultProps = {
   showMoreText: 'Show more',
   hidden: false
 };
-const MultiValueRemove = innerProps => {
-  return React__default.createElement(MultiValueRemove$1, innerProps, React__default.createElement(SvgClose, {
-    className: "multi-value-remove-icon"
-  }));
-};
-const Menu = innerProps => {
-  return React__default.createElement(DropdownMenu, innerProps);
-};
-const Option = innerProps => {
-  return React__default.createElement(Option$1, _extends({
-    className: "multi-select-dropdown-item"
-  }, innerProps));
-};
-const SelectedOption = innerProps => {
-  return React__default.createElement(SelectedOption$1, innerProps, innerProps.label, React__default.createElement(DropdownOptionDeleteIcon, null));
-};
 
 export { MultiSelect as default };
 //# sourceMappingURL=MultiSelect.js.map