aidos-ui 3.0.6 → 3.0.7

package/dist/Card.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare function Card({ children }: {
-    children: JSX.Element;
-}): import("react/jsx-runtime").JSX.Element;
+import { FlexLayoutProps } from "./FlexLayout";
+export interface CardProps extends FlexLayoutProps {
+}
+export declare function Card({ children, jsStyle, padding, gap, ...otherProps }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/Card.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { BaseView } from "./BaseView";
+import { FlexLayout } from "./FlexLayout";
 import { cssVar } from "./jss";
-export function Card({ children }) {
-    return (_jsx(BaseView, { jsStyle: {
-            backgroundColor: cssVar("--primary-background"),
-            borderRadius: cssVar("--border-radius-l"),
-            padding: cssVar("--spacing-l"),
-            border: `1px solid ${cssVar("--divider")}`,
-        }, children: children }));
+export function Card({ children, jsStyle, padding = "large", gap = "large", ...otherProps }) {
+    return (_jsx(FlexLayout, { ...otherProps, padding: padding, gap: gap, jsStyle: [
+            {
+                backgroundColor: cssVar("--overlay-background"),
+                borderRadius: cssVar("--border-radius-l"),
+                boxShadow: "1px 1px 4px 1px #e0e0e0",
+            },
+            jsStyle,
+        ], children: children }));
 }
 //# sourceMappingURL=Card.js.map

package/dist/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAA6B;IAC1D,OAAO,CACL,KAAC,QAAQ,IACP,OAAO,EAAE;YACP,eAAe,EAAE,MAAM,CAAC,sBAAsB,CAAC;YAC/C,YAAY,EAAE,MAAM,CAAC,mBAAmB,CAAC;YACzC,OAAO,EAAE,MAAM,CAAC,aAAa,CAAC;YAC9B,MAAM,EAAE,aAAa,MAAM,CAAC,WAAW,CAAC,EAAE;SAC3C,YAEA,QAAQ,GACA,CACZ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAI/B,MAAM,UAAU,IAAI,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,OAAO,GAAG,OAAO,EACjB,GAAG,GAAG,OAAO,EACb,GAAG,UAAU,EACH;IACV,OAAO,CACL,KAAC,UAAU,OACL,UAAU,EACd,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE;YACP;gBACE,eAAe,EAAE,MAAM,CAAC,sBAAsB,CAAC;gBAC/C,YAAY,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBACzC,SAAS,EAAE,yBAAyB;aACrC;YACD,OAAO;SACR,YAEA,QAAQ,GACE,CACd,CAAC;AACJ,CAAC"}

package/dist/TextArea.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
-import { JSStyle } from "./jss";
+import { JSStyle, Padding } from "./jss";
 export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
     jsStyle?: JSStyle;
     onValueChange?: (value: string) => void;
     value?: string;
     className?: undefined;
     size?: undefined;
+    padding?: Padding;
 }
 export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/TextArea.js

@@ -1,21 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { jss } from "./jss";
-export const TextArea = React.forwardRef(({ jsStyle, onValueChange, value, onChange, ...otherProps }, ref) => {
+import { cssVar, getPadding, jss } from "./jss";
+export const TextArea = React.forwardRef(({ jsStyle, onValueChange, value, onChange, padding = "medium", ...otherProps }, ref) => {
     return (_jsx("textarea", { ...otherProps, ref: ref, className: jss([
             {
-                padding: "var(--spacing-m)",
                 flexGrow: 1,
-                backgroundColor: "var(--primary-background)",
-                color: "var(--primary-text)",
+                color: cssVar("--primary-text"),
                 outline: "none",
-                border: "none",
                 fontSize: 20,
                 lineHeight: 24 / 20,
+                backgroundColor: cssVar("--overlay-background"),
+                border: `1px solid ${cssVar("--divider")}`,
+                borderRadius: cssVar("--border-radius-m"),
                 "::placeholder": {
-                    color: "var(--secondary-text);",
+                    color: cssVar("--subtle-text"),
+                },
+                ":focus-visible": {
+                    outline: `2px solid ${cssVar("--highlight")}`,
+                    outlineOffset: -2,
                 },
             },
+            getPadding(padding),
             jsStyle,
         ]), value: value, onChange: onValueChange ? (e) => onValueChange(e.target.value) : undefined }));
 });

package/dist/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../src/TextArea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAW,GAAG,EAAE,MAAM,OAAO,CAAC;AAWrC,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CACE,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAiB,EACzE,GAAoC,EACpC,EAAE;IACF,OAAO,CACL,sBACM,UAAU,EACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,GAAG,CAAC;YACb;gBACE,OAAO,EAAE,kBAAkB;gBAC3B,QAAQ,EAAE,CAAC;gBACX,eAAe,EAAE,2BAA2B;gBAC5C,KAAK,EAAE,qBAAqB;gBAC5B,OAAO,EAAE,MAAM;gBACf,MAAM,EAAE,MAAM;gBACd,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,EAAE,GAAG,EAAE;gBACnB,eAAe,EAAE;oBACf,KAAK,EAAE,wBAAwB;iBAChC;aACF;YACD,OAAO;SACR,CAAC,EACF,KAAK,EAAE,KAAK,EACZ,QAAQ,EACN,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,GAElE,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../src/TextArea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAYlE,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CACE,EACE,OAAO,EACP,aAAa,EACb,KAAK,EACL,QAAQ,EACR,OAAO,GAAG,QAAQ,EAClB,GAAG,UAAU,EACC,EAChB,GAAoC,EACpC,EAAE;IACF,OAAO,CACL,sBACM,UAAU,EACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,GAAG,CAAC;YACb;gBACE,QAAQ,EAAE,CAAC;gBACX,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC;gBAC/B,OAAO,EAAE,MAAM;gBACf,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,EAAE,GAAG,EAAE;gBACnB,eAAe,EAAE,MAAM,CAAC,sBAAsB,CAAC;gBAC/C,MAAM,EAAE,aAAa,MAAM,CAAC,WAAW,CAAC,EAAE;gBAC1C,YAAY,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBACzC,eAAe,EAAE;oBACf,KAAK,EAAE,MAAM,CAAC,eAAe,CAAC;iBAC/B;gBACD,gBAAgB,EAAE;oBAChB,OAAO,EAAE,aAAa,MAAM,CAAC,aAAa,CAAC,EAAE;oBAC7C,aAAa,EAAE,CAAC,CAAC;iBAClB;aACF;YACD,UAAU,CAAC,OAAO,CAAC;YACnB,OAAO;SACR,CAAC,EACF,KAAK,EAAE,KAAK,EACZ,QAAQ,EACN,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,GAElE,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/TextInputWithState.d.ts

@@ -1,10 +1,8 @@
 import React from "react";
 import { BaseInputProps } from "./BaseInput";
-import { IconType } from "./IconType";
 export interface TextInputWithStateProps extends BaseInputProps {
     onValueChange?: (value: string) => void;
     valueRef: React.MutableRefObject<string>;
-    icon?: IconType;
     onChange?: undefined;
 }
-export declare function TextInputWithState({ valueRef, onValueChange: externalOnChange, icon, ...otherProps }: TextInputWithStateProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextInputWithState({ valueRef, onValueChange: externalOnChange, ...otherProps }: TextInputWithStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/TextInputWithState.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { TextInput } from "./TextInput";
 import { useState } from "react";
-export function TextInputWithState({ valueRef, onValueChange: externalOnChange, icon, ...otherProps }) {
+export function TextInputWithState({ valueRef, onValueChange: externalOnChange, ...otherProps }) {
     const [value, setValue] = useState(valueRef.current);
     const onValueChange = useCallback((value) => {
         valueRef.current = value;

package/dist/TextInputWithState.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputWithState.js","sourceRoot":"","sources":["../src/TextInputWithState.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAS5C,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,aAAa,EAAE,gBAAgB,EAC/B,IAAI,EACJ,GAAG,UAAU,EACW;IACxB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAErD,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAK,EAAE,EAAE;QACR,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,gBAAgB,IAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC9C,CAAC,EACD,CAAC,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,CAAC,CACvC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,OAAK,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,GAAI,CAC1E,CAAC;AACJ,CAAC"}
+{"version":3,"file":"TextInputWithState.js","sourceRoot":"","sources":["../src/TextInputWithState.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQjC,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,aAAa,EAAE,gBAAgB,EAC/B,GAAG,UAAU,EACW;IACxB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAErD,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAK,EAAE,EAAE;QACR,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,gBAAgB,IAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC9C,CAAC,EACD,CAAC,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,CAAC,CACvC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,OAAK,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,GAAI,CAC1E,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./aria";
 export * from "./Badge";
 export * from "./BaseButton";
 export * from "./BaseInput";
@@ -11,6 +10,7 @@ export * from "./Box";
 export * from "./Button";
 export * from "./Calendar";
 export * from "./Checkbox";
+export * from "./Card";
 export * from "./Circle";
 export * from "./Column";
 export * from "./DarkMode";

package/dist/index.js

@@ -1,4 +1,3 @@
-export * from "./aria";
 export * from "./Badge";
 export * from "./BaseButton";
 export * from "./BaseInput";
@@ -11,6 +10,7 @@ export * from "./Box";
 export * from "./Button";
 export * from "./Calendar";
 export * from "./Checkbox";
+export * from "./Card";
 export * from "./Circle";
 export * from "./Column";
 export * from "./DarkMode";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aidos-ui",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "A simple UI framework",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/Card.tsx

@@ -1,17 +1,30 @@
-import { BaseView } from "./BaseView";
+import { FlexLayout, FlexLayoutProps } from "./FlexLayout";
 import { cssVar } from "./jss";
 
-export function Card({ children }: { children: JSX.Element }) {
+export interface CardProps extends FlexLayoutProps {}
+
+export function Card({
+  children,
+  jsStyle,
+  padding = "large",
+  gap = "large",
+  ...otherProps
+}: CardProps) {
   return (
-    <BaseView
-      jsStyle={{
-        backgroundColor: cssVar("--primary-background"),
-        borderRadius: cssVar("--border-radius-l"),
-        padding: cssVar("--spacing-l"),
-        border: `1px solid ${cssVar("--divider")}`,
-      }}
+    <FlexLayout
+      {...otherProps}
+      padding={padding}
+      gap={gap}
+      jsStyle={[
+        {
+          backgroundColor: cssVar("--overlay-background"),
+          borderRadius: cssVar("--border-radius-l"),
+          boxShadow: "1px 1px 4px 1px #e0e0e0",
+        },
+        jsStyle,
+      ]}
     >
       {children}
-    </BaseView>
+    </FlexLayout>
   );
 }

package/src/TextArea.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { JSStyle, jss } from "./jss";
+import { JSStyle, Padding, cssVar, getPadding, jss } from "./jss";
 
 export interface TextAreaProps
   extends React.InputHTMLAttributes<HTMLTextAreaElement> {
@@ -8,11 +8,19 @@ export interface TextAreaProps
   value?: string;
   className?: undefined;
   size?: undefined;
+  padding?: Padding;
 }
 
 export const TextArea = React.forwardRef(
   (
-    { jsStyle, onValueChange, value, onChange, ...otherProps }: TextAreaProps,
+    {
+      jsStyle,
+      onValueChange,
+      value,
+      onChange,
+      padding = "medium",
+      ...otherProps
+    }: TextAreaProps,
     ref?: React.Ref<HTMLTextAreaElement>
   ) => {
     return (
@@ -21,18 +29,23 @@ export const TextArea = React.forwardRef(
         ref={ref}
         className={jss([
           {
-            padding: "var(--spacing-m)",
             flexGrow: 1,
-            backgroundColor: "var(--primary-background)",
-            color: "var(--primary-text)",
+            color: cssVar("--primary-text"),
             outline: "none",
-            border: "none",
             fontSize: 20,
             lineHeight: 24 / 20,
+            backgroundColor: cssVar("--overlay-background"),
+            border: `1px solid ${cssVar("--divider")}`,
+            borderRadius: cssVar("--border-radius-m"),
             "::placeholder": {
-              color: "var(--secondary-text);",
+              color: cssVar("--subtle-text"),
+            },
+            ":focus-visible": {
+              outline: `2px solid ${cssVar("--highlight")}`,
+              outlineOffset: -2,
             },
           },
+          getPadding(padding),
           jsStyle,
         ])}
         value={value}

package/src/TextInputWithState.tsx

@@ -2,20 +2,17 @@ import React, { useCallback } from "react";
 
 import { TextInput } from "./TextInput";
 import { BaseInputProps } from "./BaseInput";
-import { IconType } from "./IconType";
-import { ReactNode, useState } from "react";
+import { useState } from "react";
 
 export interface TextInputWithStateProps extends BaseInputProps {
   onValueChange?: (value: string) => void;
   valueRef: React.MutableRefObject<string>;
-  icon?: IconType;
   onChange?: undefined;
 }
 
 export function TextInputWithState({
   valueRef,
   onValueChange: externalOnChange,
-  icon,
   ...otherProps
 }: TextInputWithStateProps) {
   const [value, setValue] = useState(valueRef.current);

package/src/docs/pages.ts

@@ -85,6 +85,7 @@ export const pages: Array<Page> = [
     type: "section",
     label: "Visual indicators",
     content: [
+      { type: "link", page: "Card" },
       { type: "link", page: "Badge" },
       { type: "link", page: "ProgressBar" },
       { type: "link", page: "ProgressCircle" },