@startlibs/form 1.1.3 → 1.2.0-rc.2

package/lib-yak/withFormImageInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"withFormImageInput.mjs","sources":["../src/withFormImageInput.jsx"],"sourcesContent":["import React, {useContext, useState} from 'react'\nimport styled from 'styled-components'\nimport {FormContext, useFormValue} from './Form'\nimport {useToggle} from '@startlibs/core'\nimport {getUID, callIfFunction} from '@startlibs/utils'\nimport _ from 'lodash/fp'\n\nexport const FileInput = styled.input.attrs({type: 'file'})`\n    z-index: 1;\n    cursor: pointer;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    &::-webkit-file-upload-button {\n      visibility: hidden;\n    }\n    &::file-upload-button {\n      visibility: hidden;\n    }\n  `\n\n\nexport const WithImageInput = ({children, multiple, path = [\"image\"], preValidation = _.stubFalse, onChangeFile, onClose, onClick, uploadFetcher, onSuccess, onFailure, ajaxError, onTouchEnd, ...rest}) => {\n  const form = useContext(FormContext)\n  const loading = useToggle()\n  const [tempImage, setTempImage] = useState()\n  const getPath = (str,fileIndex = 0) => typeof path === 'function' ? [].concat(path(str,fileIndex)) : str !== 'image' ? [].concat(path).slice(0, -1).concat(str) : path\n\n  const imagePath = getPath('image')\n  const [formImage] = useFormValue(imagePath)\n  const image = tempImage || formImage\n\n  const validate = (files) => {\n    const validations = files.map(preValidation).filter(Boolean)\n    if (validations.length) {\n      validations.forEach(v =>\n        form.setError(getPath('image').join('.'), v)\n      )\n      return files.filter((file) => !preValidation(file))\n    }\n    return files\n  }\n\n  const handleFileEvent = (e) => {\n    e.preventDefault()\n    callIfFunction(onClose)\n    const files = Array.from((e.nativeEvent.dataTransfer || e.nativeEvent.target).files)\n    if (files.length > 0) {\n      validate(files.slice(0,multiple ? undefined : 1)).forEach( (file,i) =>\n        handleFile(file,e,i)\n      )\n    }\n  }\n\n  const handleFile = (file, eventTarget, fileIndex = 0) => {\n    const getIndexedPath = (str) => getPath(str,fileIndex)\n    const path = getIndexedPath()\n    const oldUploadStatus = form.getMeta(getIndexedPath('uploadStatus'))\n    const oldImage = form.getValue(getIndexedPath('image'))\n    const oldImageHeight = form.getValue(getIndexedPath('imageHeight'))\n    const oldImageWidth = form.getValue(getIndexedPath('imageWidth'))\n    const oldFilename = form.getValue(getIndexedPath('fileName'))\n\n    const objectUrl = URL.createObjectURL(file)\n    const image = document.createElement('img')\n    image.onload = () => {\n      const {naturalWidth: imageWidth, naturalHeight: imageHeight} = image\n      const newValues = {image: file, filename: file.name, imageWidth, imageHeight}\n      form.setValues(_.flow(\n        _.set(getIndexedPath('filename'), file.name),\n        _.set(getIndexedPath('image'), file),\n        _.set(getIndexedPath('imageWidth'), imageWidth),\n        _.set(getIndexedPath('imageHeight'), imageHeight)\n      ))\n      form.setMeta(_.flow(\n        _.update('submittingFiles', (v) => v ? v + 1 : 1),\n        _.update('uploadingPaths', _.union([path.join(\".\")])),\n        _.set(getIndexedPath('uploadStatus'), 'loading')\n      ))\n      setTempImage(objectUrl)\n      callIfFunction(onChangeFile,file)\n      loading.open()\n      uploadFetcher(file, newValues)\n        .then(({image, uploadStatus}) => {\n          loading.close()\n          if (form.getValue(getIndexedPath('image')) !== file) {\n            form.setMeta(_.update(['submittingFiles'], (v) => v - 1))\n            return\n          }\n          form.clearErrors()\n          form.setValue(getIndexedPath('image'), image, false)\n          form.setMeta(_.flow(\n            _.update('uploadingPaths', _.difference(_,[path.join(\".\")])),\n            _.update(['submittingFiles'], (v) => v - 1),\n            _.update(['submittedFiles'], (v) => (v || []).concat([{path, file, image}])),\n            _.set(getIndexedPath('uploadStatus'), uploadStatus)\n          ))\n          setTempImage(null)\n          callIfFunction(onSuccess, {image, uploadStatus, imageWidth, imageHeight})\n        }).catch((e) => {\n          loading.close()\n          if (form.getValue(getIndexedPath('image')) !== file) {\n            form.setMeta(_.update(['submittingFiles'], (v) => v - 1))\n            return\n          }\n          form.setError(getIndexedPath('image').join('.'), callIfFunction(ajaxError,_.get('[1].status',e)))\n          form.setValues(_.flow(\n            _.set(getIndexedPath('filename'), oldFilename),\n            _.set(getIndexedPath('image'), oldImage),\n            _.set(getIndexedPath('imageWidth'), oldImageWidth),\n            _.set(getIndexedPath('imageHeight'), oldImageHeight)\n            ),\n            false\n          )\n          form.setMeta(_.flow(\n            _.update('uploadingPaths', _.difference(_,[path.join(\".\")])),\n            _.update(['submittingFiles'], (v) => v - 1),\n            _.update(['submittedFiles'], (v) => (v || []).concat([{path, file, image}])),\n            _.set(getIndexedPath('uploadStatus'), oldUploadStatus)\n          ))\n          setTempImage(null)\n          callIfFunction(onFailure)\n        })\n      if (eventTarget && eventTarget.parentNode && typeof eventTarget.parentNode.click === 'function')\n        eventTarget.parentNode.click()\n    }\n    image.src = objectUrl\n  }\n\n  const listenToClose = () => {\n  }\n\n  const handleClick = (e) => {\n    callIfFunction(onClick,e)\n    listenToClose()\n  }\n  const handleTouchEnd = (e) => {\n    callIfFunction(onTouchEnd,e)\n    listenToClose()\n  }\n\n  return children(\n    <FileInput multiple={multiple} onChange={handleFileEvent} onClick={handleClick} tabIndex={-1} onTouchEnd={handleTouchEnd}/>,\n    {\n      image,\n      isLoading: loading.isOpen,\n      handleFile,\n      handleFileEvent,\n      Input: FileInput\n    }\n  )\n}\n\n\n\n\nexport const WithFileInput = ({children, multiple, path = [\"file\"], preValidation = _.stubFalse, onChangeFile, onClose, onClick, uploadFetcher, onSuccess, onFailure, ajaxError, onTouchEnd, maxFiles, ...rest}) => {\n  const form = useContext(FormContext)\n  const loading = useToggle()\n  const [tempImage, setTempImage] = useState()\n  const getPath = (str,fileIndex) => typeof path === 'function' ? [].concat(path(str,fileIndex)) : str !== 'file' ? [].concat(path).slice(0, -1).concat(str) : path\n\n  const validate = (files) => {\n    const validations = files.map(preValidation).filter(Boolean)\n    if (validations.length) {\n      validations.forEach(v =>\n                            form.setError(getPath('file',0).join('.'), v)\n      )\n      return files.filter((file) => !preValidation(file))\n    }\n    return files\n  }\n\n  const handleFileEvent = (e) => {\n    e.preventDefault()\n    callIfFunction(onClose)\n    const files = Array.from((e.nativeEvent.dataTransfer || e.nativeEvent.target).files)\n    if (files.length > 0) {\n      validate(files.slice(0,multiple ? undefined : 1)).forEach( (file,i) =>\n                                                                   handleFile(file,e,i)\n      )\n    }\n  }\n\n  const handleFile = (file, eventTarget) => {\n    const currentFileIndex = (form.getValue(getPath()) || []).length\n    if (currentFileIndex >= maxFiles) {\n      form.setErrors({'': 'Número máximo de arquivos atingido'})\n      return\n    }\n    const createGetIndexedPath = (index) => (str) => getPath(str,index)\n    const getIndexedPath = createGetIndexedPath(currentFileIndex)\n    const path = getIndexedPath()\n    const oldUploadStatus = form.getMeta(getIndexedPath('uploadStatus'))\n    const oldFile = form.getValue(getIndexedPath('file'))\n    const oldFilename = form.getValue(getIndexedPath('fileName'))\n\n    const uid = getUID()\n\n    form.setValues(_.flow(\n      _.set(getIndexedPath('filename'), file.name),\n      _.set(getIndexedPath('file'), file),\n      _.set(getIndexedPath('uid'), uid),\n    ))\n    form.setMeta(_.flow(\n      _.update('submittingFiles', (v) => v ? v + 1 : 1),\n      _.update('uploadingPaths', _.union([path.join(\".\")])),\n      _.set(getIndexedPath('uploadStatus'), 'loading')\n    ))\n    callIfFunction(onChangeFile,file)\n\n    loading.open()\n    uploadFetcher(file)\n    .then(({file, uploadStatus, response}) => {\n      loading.close()\n      const list = (form.getValue(getPath()) || [])\n      const index = list.findIndex((f) => f.uid === uid)\n      if (index < 0) {\n        form.setMeta(_.update(['submittingFiles'], (v) => v - 1))\n        return\n      }\n      const getIndexedPath = createGetIndexedPath(index)\n      form.clearErrors()\n      form.setValue(getIndexedPath('file'), response, false)\n      form.setMeta(_.flow(\n        _.update('uploadingPaths', _.difference(_,[path.join(\".\")])),\n        _.update(['submittingFiles'], (v) => v - 1),\n        _.update(['submittedFiles'], (v) => (v || []).concat([{path, file}])),\n        _.set(getIndexedPath('uploadStatus'), uploadStatus)\n      ))\n      callIfFunction(onSuccess, {file, uploadStatus})\n    }).catch((e) => {\n      loading.close()\n      const list = (form.getValue(getPath()) || [])\n      const index = list.findIndex((f) => f.uid === uid)\n      if (index < 0) {\n        form.setMeta(_.update(['submittingFiles'], (v) => v - 1))\n        return\n      }\n      const getIndexedPath = createGetIndexedPath(index)\n      form.setError(getIndexedPath('file').join('.'), callIfFunction(ajaxError,_.get('[1].status',e)))\n      if (oldFile) {\n        form.setValues(\n          _.flow(\n            _.set(getIndexedPath('filename'), oldFilename),\n            _.set(getIndexedPath('file'), oldFile),\n          ),\n          false\n        )\n      } else {\n        form.setValues(\n          _.update(getPath(), _.filter((f) => f.uid !== uid)),\n          false\n        )\n      }\n      form.setMeta(_.flow(\n        _.update('uploadingPaths', _.difference(_,[path.join(\".\")])),\n        _.update(['submittingFiles'], (v) => v - 1),\n        _.update(['submittedFiles'], (v) => (v || []).concat([{path, file}])),\n        _.set(getIndexedPath('uploadStatus'), oldUploadStatus)\n      ))\n      callIfFunction(onFailure)\n    })\n    if (eventTarget && eventTarget.parentNode && typeof eventTarget.parentNode.click === 'function')\n      eventTarget.parentNode.click()\n  }\n\n  const listenToClose = () => {\n  }\n\n  const handleClick = (e) => {\n    callIfFunction(onClick,e)\n    listenToClose()\n  }\n  const handleTouchEnd = (e) => {\n    callIfFunction(onTouchEnd,e)\n    listenToClose()\n  }\n\n  return children(\n    <FileInput multiple={multiple} onChange={handleFileEvent} onClick={handleClick} tabIndex={-1} onTouchEnd={handleTouchEnd}/>,\n    {\n      isLoading: loading.isOpen,\n      handleFile,\n      handleFileEvent,\n      Input: FileInput\n    }\n  )\n}\n\n\n"],"names":["FileInput","styled","yakDomTag","attrs","type","className","WithImageInput","_ref","children","multiple","path","preValidation","_stubFalse","onChangeFile","onClose","onClick","uploadFetcher","onSuccess","onFailure","ajaxError","onTouchEnd","rest","_objectWithoutProperties","_excluded","form","useContext","FormContext","loading","useToggle","tempImage","setTempImage","useState","getPath","str","fileIndex","arguments","length","undefined","concat","slice","imagePath","formImage","useFormValue","image","validate","files","validations","map","filter","Boolean","forEach","v","setError","join","file","handleFileEvent","e","preventDefault","callIfFunction","Array","from","nativeEvent","dataTransfer","target","i","handleFile","eventTarget","getIndexedPath","oldUploadStatus","getMeta","oldImage","getValue","oldImageHeight","oldImageWidth","oldFilename","objectUrl","URL","createObjectURL","document","createElement","onload","naturalWidth","imageWidth","naturalHeight","imageHeight","newValues","filename","name","setValues","_flow","_set","setMeta","_update","_union","open","then","_ref2","uploadStatus","close","clearErrors","setValue","_difference","placeholder","catch","_get","parentNode","click","src","handleClick","handleTouchEnd","React","onChange","tabIndex","isLoading","isOpen","Input","WithFileInput","_ref3","maxFiles","_excluded2","currentFileIndex","setErrors","createGetIndexedPath","index","oldFile","uid","getUID","_ref4","response","list","findIndex","f","_filter"],"mappings":"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"}

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "@startlibs/form",
-  "version": "1.1.3",
+  "version": "1.2.0-rc.2",
+  "packageManager": "yarn@4.18.1",
   "description": "Startlibs Form",
   "main": "lib/index.cjs",
   "exports": {
     ".": {
       "source": "./src/index.js",
+      "yak": "./lib-yak/index.mjs",
       "require": "./lib/index.cjs",
       "import": "./lib/index.mjs",
       "default": "./lib/index.mjs"
     },
     "./package.json": "./package.json",
     "./*": {
+      "yak": "./lib-yak/*.mjs",
       "import": "./lib/*.mjs"
     }
   },
@@ -20,7 +23,8 @@
   "peerDependencies": {
     "@startlibs/components": "*",
     "@startlibs/core": "*",
-    "@startlibs/utils": "*",
+    "@startlibs/utils": ">=1.2.0-rc.2",
+    "@yak/react": "10.0.0",
     "lodash": "^4.17.21",
     "polished": "^2.0.0 || ^3.0.0 || ^4.0.0",
     "react": ">=16.8",
@@ -28,6 +32,11 @@
     "reselect": "^4.0.0 || ^5.0.0",
     "styled-components": ">=5"
   },
+  "peerDependenciesMeta": {
+    "@yak/react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@babel/core": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.2.0",
@@ -50,7 +59,7 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c",
+    "build": "rollup -c && rollup -c --environment YAK",
     "prepare": "patch-package"
   },
   "repository": {
@@ -73,6 +82,7 @@
   },
   "files": [
     "lib",
+    "lib-yak",
     "src"
   ],
   "module": "lib/index.mjs",

package/src/AutoComplete.jsx

@@ -1,8 +1,8 @@
 import React, {useEffect, useRef, useState} from 'react'
 import ContentEditableModule from 'react-contenteditable'
 import {useRefState, useToggle, useEnsureRef} from '@startlibs/core'
-import {ContextMenu, Li, Loading, Icon} from '@startlibs/components'
-import {Errors, useProvideErrors} from './Errors'
+import {ContextMenu, Li, ListItem, Loading, Icon} from '@startlibs/components'
+import {Errors, ErrorsCloseIcon, ErrorsItem, useProvideErrors} from './Errors'
 import {Field} from './Field'
 import {useInput} from './enhanceInput'
 import _ from 'lodash/fp'
@@ -96,11 +96,11 @@ const AddedBox = styled.span`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  ${isSafari ? `
-    vertical-align: 2px;
-    `:`
-    vertical-align: -7px;
-  `}
+  /* isSafari não depende de props; uma const de módulo com um css condicional (ternário)
+     não é um mixin válido pro yak ("not a valid css value or css mixin"). Em posição de
+     valor, uma arrow function comum (mesmo sem usar props) segue a mesma regra de qualquer
+     valor dinâmico (R3). */
+  vertical-align: ${() => isSafari ? '2px' : '-7px'};
 `
 const RemoveIcon = styled(Icon)`
   width: 20px;
@@ -116,7 +116,7 @@ const RemoveIcon = styled(Icon)`
   text-align: center;
   cursor: pointer;
   color: ${getColor('gray120')};
-  :hover {
+  &:hover {
     background-color: ${getColor('gray210')};
     color: ${props => darken(0.05, getColor('alert')(props))};
   }
@@ -126,7 +126,7 @@ const AutoCompleteMenu = styled(ContextMenu)`
   box-shadow: 0 2px 3px 1px rgba(0,0,0,0.2),0 0px 0px 1px rgba(0,0,0,0.05);
   max-height: 22rem;
   overflow: auto;
-  ${ContextMenu.ListItem} {
+  ${ListItem} {
       > * {
         padding: 11px;
       }
@@ -134,14 +134,14 @@ const AutoCompleteMenu = styled(ContextMenu)`
 `
 
 const AutoCompleteError = styled(Errors)`
-  ${Errors.Item} {
+  ${ErrorsItem} {
     background: transparent;
     border: none;
     color: ${getColor('alert')};
     padding: 0;
     margin-top: 0.5rem;
     font-weight: 600;
-    ${Errors.CloseIcon} {
+    ${ErrorsCloseIcon} {
       display: none;
     }
   }
@@ -170,7 +170,7 @@ const DropdownIconContainer = styled(Icon)`
     text-align: center;
     cursor: pointer;
     color: ${getColor('gray90')};
-    :hover, :active {
+    &:hover, &:active {
       background: rgba(0,0,0,0.15);
     }
   }

package/src/Checkbox.jsx

@@ -11,7 +11,7 @@ const HiddenInput = styled.input`
   pointer-events: none;
 `
 
-export const Checkbox = ({className, children, isChecked = _.identity, isList, onClick, disabled, inverted, path, tabIndex = 1, raw, ...rest}) => {
+export const Checkbox = ({className, style, children, isChecked = _.identity, isList, onClick, disabled, inverted, path, tabIndex = 1, raw, ...rest}) => {
   const focused = useToggle()
   const [v, ,{name, toggle, toggleItem, hasErrors}] = useInput({ path, isChecked,...rest}, raw)
   const testInvert = (v) => inverted ? !v : v
@@ -27,7 +27,7 @@ export const Checkbox = ({className, children, isChecked = _.identity, isList, o
       e.preventDefault();
     }
   }
-  return <label onClick={_onClick} data-drag="false" className={className}>
+  return <label onClick={_onClick} data-drag="false" className={className} style={style}>
     {
       !isTouchDevice() && <HiddenInput
         onFocus={focused.open}

package/src/Combobox.jsx

@@ -74,7 +74,7 @@ export const ComboboxInput = styled.div `
     border-color: ${getColor('gray180')};
     box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
   `}
-  :focus {
+  &:focus {
     border-color: ${getColor('gray180')};
     box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
   }

package/src/DatePicker.jsx

@@ -2,7 +2,7 @@ import React, {forwardRef, useContext, useEffect, useRef, useState} from 'react'
 import styled, {css} from 'styled-components'
 import _ from 'lodash/fp'
 import {StartlibsContext, useEnsureRef, usePopupToggle, usePrevious} from '@startlibs/core'
-import {formatDate, formatDateToPattern, getColor, getNumberInputType, ifProp, media, parseDate} from '@startlibs/utils'
+import {formatDate, formatDateToPattern, getColor, getNumberInputType, ifProp, insertKeyframes, media, parseDate} from '@startlibs/utils'
 import {Icon} from '@startlibs/components'
 import {Field} from './Field'
 import {TextInput} from './TextInput'
@@ -16,7 +16,22 @@ export const CALENDAR_LEVEL_YEAR = 'year'
 
 const LEVELS = [CALENDAR_LEVEL_DAY, CALENDAR_LEVEL_MONTH, CALENDAR_LEVEL_YEAR]
 
-const DatePickerContainer = styled.div`
+// Nome fixo do @keyframes preservado: um `keyframes` do styled-components geraria um nome
+// com hash, diferente do atual "datePickerFadeInDown" (quebraria quem lê animationName). Por
+// isso o bloco fica fora de um template styled/css/keyframes, registrado pelo CSSOM (sem
+// nonce) no primeiro render do DatePickerContainer (mesmo padrão de components/src/Loading.jsx).
+const injectDatePickerFadeInDownKeyframes = () => insertKeyframes('datePickerFadeInDown',
+  'from { opacity: 0; transform: translateY(-10px); pointer-events: none; } to { opacity: 1; transform: none; pointer-events: none; }')
+
+// styled(DatePickerContainerBase) mira num componente, não numa tag: ao contrário do antigo
+// styled.div, o styled-components não filtra prop inválida pra <div> nesse caso. O template
+// abaixo não lê nenhuma prop custom, então repassar tudo com {...props} é seguro.
+const DatePickerContainerBase = React.forwardRef((props, ref) => {
+  injectDatePickerFadeInDownKeyframes()
+  return <div ref={ref} {...props}/>
+})
+
+const DatePickerContainer = styled(DatePickerContainerBase)`
   width: 20rem;
   position: absolute;
   z-index: 100;
@@ -38,18 +53,6 @@ const DatePickerContainer = styled.div`
       width: 2.5rem;
     `}
   }
-  @keyframes datePickerFadeInDown {
-    from {
-      opacity: 0;
-      transform: translateY(-10px);
-      pointer-events: none;
-    }
-    to {
-      opacity: 1;
-      transform: none;
-      pointer-events: none;
-    }
-  }
 `
 
 const CalendarHeader = styled.div`
@@ -75,7 +78,7 @@ const WeekHeader = styled(CalendarContentContainer)`
 `
 
 const CalendarClickable = styled.a`
-  :hover, :focus {
+  &:hover, &:focus {
     background-color: rgba(0,0,0,0.1);
     cursor: pointer;
   }
@@ -115,12 +118,12 @@ const CalendarContent = styled(CalendarClickable)`
   )}  
   ${ifProp('isCurrent', css`
     background: ${getColor('main')};
-    color: #FFF;  
-    :hover {
+    color: #FFF;
+    &:hover {
       background-color: ${props => darken(0.075, getColor('main')(props))};
     }
     ${ifProp('isSelected', 'box-shadow: none;')}
-  `)}  
+  `)}
 `
 
 const DayItem = styled(CalendarContent)`
@@ -146,7 +149,7 @@ const DatePickerInputIcon = styled(Icon)`
   width: 2rem;
   cursor: pointer;
   color: ${getColor('gray150')};
-  :hover {
+  &:hover {
     color: ${getColor('main')};
   }
   display: none;
@@ -173,7 +176,7 @@ const ClearButton = styled(Icon)`
   text-align: center;
   border-radius: 50%;
   background: rgba(0,0,0,0.1);
-  :hover {
+  &:hover {
     background: #f7d3d4;
     color: ${getColor('alert')};
   }
@@ -199,10 +202,10 @@ const ShortcutsWrapper = styled.div`
       font-size: 13px;  
     `}
 
-    :hover {
+    &:hover {
       color: ${getColor('main')};
     }
-      
+
     ${ifProp('disabled', css`
       pointer-events: none;
       opacity: 0.5;

package/src/Errors.jsx

@@ -118,25 +118,31 @@ export const Errors = ({path,filter,className, autoScroll}) => {
     }
   },[uniqErrors])
 
-  return <TransitionDiv block>{uniqErrors.length > 0 && <Errors.Container ref={ref} className={className}>
+  return <TransitionDiv block>{uniqErrors.length > 0 && <ErrorsContainer ref={ref} className={className}>
     {uniqErrors.map(([value]) => value && value !== true &&
-      <Errors.Item key={value}>
+      <ErrorsItem key={value}>
         {value}
-        <Errors.CloseIcon onClick={willRemoveError(value, path)}/>
-      </Errors.Item>
+        <ErrorsCloseIcon onClick={willRemoveError(value, path)}/>
+      </ErrorsItem>
     )}
-  </Errors.Container>}</TransitionDiv>
+  </ErrorsContainer>}</TransitionDiv>
 }
 
 Errors.displayName = 'Errors'
 
-Errors.Container = styled.ul`
+// Nomes próprios (não `Errors.Container = ...`) porque o yak resolve `${Errors.Item}` num outro
+// arquivo tentando avaliar o módulo inteiro de `Errors` (um componente React de verdade, com
+// hooks) em tempo de build — e falha ("rename Errors.mjs so its exports run at build time (or
+// replace Errors.Item with a literal value)"). Um export próprio resolve direto, sem depender do
+// componente. `Errors.Container`/`Errors.Item`/`Errors.CloseIcon` continuam existindo (uso
+// interno e compatibilidade de quem já importa `Errors` e lê essas propriedades).
+export const ErrorsContainer = styled.ul`
     list-style-type: none;
     margin: 0;
     padding: 0;
   `
 
-Errors.Item = styled.li`
+export const ErrorsItem = styled.li`
     background-color: ${props => lighten(0.42, props.theme.colors.alert)};
     padding: 1rem 3.5rem 1rem 1rem;
     border-radius: 8px;
@@ -151,7 +157,7 @@ Errors.Item = styled.li`
     }
     ${customTheme('ErrorItem')}
   `
-Errors.CloseIcon = styled(Icon).attrs({icon: 'x'})`
+export const ErrorsCloseIcon = styled(Icon).attrs({icon: 'x'})`
     color: ${getColor('alert')};
     font-weight: 600;
     display: inline-block;
@@ -172,3 +178,7 @@ Errors.CloseIcon = styled(Icon).attrs({icon: 'x'})`
     }
   `
 
+Errors.Container = ErrorsContainer
+Errors.Item = ErrorsItem
+Errors.CloseIcon = ErrorsCloseIcon
+

package/src/ExpandableBox.jsx

@@ -31,17 +31,17 @@ const ExpandableBoxStyled = styled.div`
   ${props => props.collapsed ? css`
     cursor: pointer;
     padding-right: 3.25rem;
-    :hover {
+    &:hover {
       background: ${props => darken(0.035, getColor('lightBluishGray')(props))};
     }
-    :active {
+    &:active {
       background: ${props => darken(0.05, getColor('lightBluishGray')(props))};
       transition: none;
     }
   `: css`
     padding: 1.5rem;
     ${media.max(340)`
-      padding 1rem;
+      padding: 1rem;
     `}
     ${props => props.fixMarginBottom && `
       padding-bottom: 0.5rem !important;

package/src/Field.jsx

@@ -16,7 +16,12 @@ const Container = styled.div`
   margin-bottom: ${props => getMargin(props.theme.Field.margins)(props)};
   text-align: left;
 `
-const Label = styled.label`
+// Nome próprio (não só `Field.Label = ...`): TextInput.jsx usa `${Field.Label}` como seletor
+// (FloatingFieldType) num ARQUIVO DIFERENTE, e o yak tenta resolver isso avaliando o módulo
+// inteiro de `Field` (um componente React de verdade) em tempo de build — falha com um
+// `undefined` na saída (mesmo problema do Errors.Item, ver Errors.jsx). `Field.Label` continua
+// existindo (uso interno e compatibilidade).
+export const FieldLabel = styled.label`
   font-weight: 550;
   display: inline-block;
   font-size: ${props => props.labelFontSize ? props.labelFontSize : '15'}px;
@@ -58,18 +63,18 @@ export const Field = React.forwardRef((
   <Container ref={ref} {...rest} className={className}>
     {
       label &&
-      <Label {...rest} onClick={labelClick} labelFontSize={labelFontSize}>
+      <FieldLabel {...rest} onClick={labelClick} labelFontSize={labelFontSize}>
         {label}{mandatory && <Mandatory mandatory={mandatory}>*</Mandatory>}
         {helpText && <HelpText> {helpText}</HelpText>}
         {descText && <FieldDescription>{descText}</FieldDescription>}
-      </Label>
+      </FieldLabel>
     }
     {children}
     {bellowDescText && <BellowFieldDescription>{bellowDescText}</BellowFieldDescription>}
   </Container>
 )
 
-Field.Label = Label
+Field.Label = FieldLabel
 Field.Container = Container
 Field.HelpText = HelpText
 Field.Description = FieldDescription

package/src/FieldBox.jsx

@@ -45,10 +45,10 @@ const DeleteButton = styled(Icon).attrs({icon: 'x'})`
   color: ${getColor('gray120')};
   background-color: rgba(0,0,0,0.08);
   flex-shrink: 0;
-  :hover {
+  &:hover {
     background: rgba(0,0,0,0.11);
   }
-  :active {
+  &:active {
     background: rgba(0,0,0,0.13);
   }
 `
@@ -66,10 +66,10 @@ const DropdownButton = styled(Icon).attrs({icon: 'arrow-down'})`
   background-color: rgba(0,0,0,0.08);
   flex-shrink: 0;
   position: relative;
-  :hover {
+  &:hover {
     background: rgba(0,0,0,0.11);
   }
-  :active {
+  &:active {
     background: rgba(0,0,0,0.13);
   }
 `
@@ -115,10 +115,10 @@ export const FieldBox = styled(({className,label,helpText,descText,actionLabel,r
   transition: border-radius 0.5s ease;
   ${props => props.onClick && css`
     cursor: pointer;
-    :hover {
+    &:hover {
       background: ${props => darken(0.035, getColor('lightBluishGray')(props))};
     }
-    :active {
+    &:active {
       background: ${props => darken(0.05, getColor('lightBluishGray')(props))};
       transition: none;
     }

package/src/IconRadioBoxOldHubt.jsx

@@ -55,7 +55,7 @@ export const StyledIconRadioBox = styled(({className, setFromField, name, tabInd
       color:#fff;
     }
   ` : css`
-    :hover ${Text} {
+    &:hover ${Text} {
       background-color: ${getColor('gray150')};
       color: #fff;
     }

package/src/InputboxGroup.jsx

@@ -55,7 +55,7 @@ export const InputboxGroup = styled(({path, className, column, as = column ? Spl
   ` : `
     ${SimpleRadiobox}, ${SimpleCheckbox} {
       margin-bottom: 0.5rem;
-      :last-child {
+      &:last-child {
         margin-bottom: 1.5rem;
       }
     }

package/src/RichText.jsx

@@ -88,6 +88,23 @@ const FIX_STYLE = {
   }
 }
 
+// Precisa vir antes de RichTextContainer: o yak resolve `${ToolsContainer}` (seletor dentro de
+// props.showToolbar) estaticamente lendo o módulo de cima pra baixo — em tempo de execução
+// (sc) a ordem nunca importou, já que o template só lê ToolsContainer dentro de um callback
+// (props => ...), chamado bem depois do módulo inteiro já ter sido avaliado.
+const ToolsContainer = styled.div`
+  background: ${getColor('lightBluishGray')};
+  padding: 0 0.125rem;
+  border-top-left-radius: 7px;
+  border-top-right-radius: 7px;
+  transition: 0.225s;
+  max-height: 0;
+  pointer-events: none;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+`
+
 export const RichTextContainer = styled.div`
   position:relative;
   width: 100%;
@@ -159,19 +176,6 @@ export const RichTextInput = styled.div`
   `}
 `
 
-const ToolsContainer = styled.div`
-  background: ${getColor('lightBluishGray')};
-  padding: 0 0.125rem;
-  border-top-left-radius: 7px;
-  border-top-right-radius: 7px;
-  transition: 0.225s;
-  max-height: 0;
-  pointer-events: none;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-`
-
 const ToolButton = styled(Button)`
     min-height: 2rem;
     min-width: 2rem;