aidos-ui 3.0.5 → 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/DarkMode.js

@@ -2,11 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useContext, useEffect, useState } from "react";
 import { IconButton } from "./IconButton";
 import { BaseView } from "./BaseView";
+import { isServer } from "./isServer";
 export const DarkModeContext = React.createContext({
     enabled: false,
     toggle: () => { },
 });
-if (typeof window !== "undefined") {
+if (!isServer()) {
     const darkMode = document.cookie
         .split(";")
         .map((c) => c.trim())

package/dist/DarkMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"DarkMode.js","sourceRoot":"","sources":["../src/DarkMode.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DarkMode.js","sourceRoot":"","sources":["../src/DarkMode.tsx"],"names":[],"mappings":"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"}

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/dist/useCookie.js

@@ -1,4 +1,5 @@
 import { useState, useCallback, useEffect, useRef } from "react";
+import { isServer } from "./isServer";
 export function hasCookie(key) {
     return (document.cookie
         .split(";")
@@ -17,7 +18,7 @@ export function getCookie(key, deserialize = JSON.parse) {
 export function useCookie(key, { initialValue = null, loadingValue, serialize = JSON.stringify, deserialize = JSON.parse, maxAge = 60 * 60 * 24 * 365, }) {
     const initializationRef = useRef(false);
     const [cookie, setCookie] = useState(() => {
-        if (typeof window !== "undefined") {
+        if (!isServer()) {
             const hasPersistedCookie = hasCookie(key);
             if (hasPersistedCookie) {
                 return getCookie(key, deserialize);

package/dist/useCookie.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCookie.js","sourceRoot":"","sources":["../src/useCookie.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCookie.js","sourceRoot":"","sources":["../src/useCookie.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aidos-ui",
-  "version": "3.0.5",
+  "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/DarkMode.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode, useContext, useEffect, useState } from "react";
 import { IconButton } from "./IconButton";
 import { BaseView } from "./BaseView";
+import { isServer } from "./isServer";
 
 type State = {
   enabled: boolean;
@@ -12,7 +13,7 @@ export const DarkModeContext = React.createContext<State>({
   toggle: () => {},
 });
 
-if (typeof window !== "undefined") {
+if (!isServer()) {
   const darkMode = document.cookie
     .split(";")
     .map((c) => c.trim())

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" },