@@ -48,7 +48,7 @@ labelAndInputWrapper =
4848 -- , display: inlineBlock
4949 , "--left-icon-size": str "calc(var(--s0) * var(--input-size-factor))"
5050 , "--right-icon-size": str "calc(var(--s0) * var(--input-size-factor)) * 1.2)"
51− , "--input-border-radius": str "calc(var(--s-1) * var(--input-size-factor))"
51+ , "--input-border-radius": str "calc(var(--s-1) * var(--input-size-factor) * var(--input-size-factor))"
5252 , "--input-side-padding": var "--s-1"
5353 , width: inherit
5454 , margin: _0
@@ -224,8 +224,7 @@ ploppedFocusWithin ∷ Style
224224ploppedFocusWithin = css
225225 { "&:focus-within":
226226 nest
227− { animation: str "plop 180ms ease"
228− , animationName: plopAnimation
227+ { transition: str "border-color 0.18s ease-out"
229228 }
230229 }
231230
@@ -250,7 +249,9 @@ containerContainer props = css
250249 }
251250 , "--border-width": str "1px"
252251 , "--input-size-factor": str ((props.sizeVariant ?|| SizeMedium) # sizeVariantToFactor)
253− , "--input-border-radius": str "calc(var(--s-1) * var(--input-size-factor))"
252+ , "--input-border-radius": case props.sizeVariant ?|| SizeMedium of
253+ SizeMedium -> str "var(--s-1)"
254+ SizeSmall -> str "var(--s-2)"
254255 , borderRadius: var "--input-border-radius"
255256 , display: grid
256257 , overflow: visible
@@ -315,8 +316,8 @@ plopAnimation ∷ StyleProperty
315316plopAnimation =
316317 keyframes
317318 $
318− { "from": css { transform: str "scale3d(1.03,1.02,1)" }
319+ { "from": css { transform: str "scale3d(1.003,1.02,1)" }
319320 , "67.7%": css { transform: str "scale3d(0.997,0.98,1)" }
320− , "86.7%": css { transform: str "scale3d(1.004,1.01,1)" }
321+ , "86.7%": css { transform: str "scale3d(1.001,1.01,1)" }
321322 , "to": css { transform: str "scale3d(1,1,1)" }
322323 }