@ledgerhq/react-ui 0.33.0 → 0.34.0-nightly.1

package/lib/cjs/pre-ldls/components/TextInput/TextInput.js

@@ -0,0 +1,226 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TextInput_exports = {};
+__export(TextInput_exports, {
+  TextInput: () => TextInput
+});
+module.exports = __toCommonJS(TextInput_exports);
+var import_debounce = __toESM(require("lodash/debounce"));
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_assets = require("../../../assets");
+var import_components = require("../../../components");
+var import_libs = require("../../libs");
+const DEBOUNCE_MS = 250;
+const COLORS_BORDER_STATUS_ERROR_DEFAULT = "colors-border-status-error-default";
+const EXTRA_FONT_SIZE = "0.75rem";
+const ICON_BUTTONS_SIZE = "32px";
+const LABEL_OFFSET_Y = `calc(-0.5 * ${EXTRA_FONT_SIZE})`;
+const LABEL_OFFSET_X = "var(--spacing-s, 16px)";
+const LABEL_PADDING = "5px";
+const ClearButton = import_styled_components.default.button`
+  ${(0, import_libs.withTokens)("colors-surface-dark-default")}
+
+  all: unset;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: ${ICON_BUTTONS_SIZE};
+  width: ${ICON_BUTTONS_SIZE};
+`;
+const Container = import_styled_components.default.div`
+  ${(0, import_libs.withTokens)("spacing-xxs")}
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xxs, 4px);
+  position: relative;
+  min-width: 328px;
+`;
+const Label = import_styled_components.default.label`
+  ${(0, import_libs.withTokens)(
+  COLORS_BORDER_STATUS_ERROR_DEFAULT,
+  "colors-border-active-default",
+  "colors-content-disabled",
+  "colors-content-subdued-default-default",
+  "spacing-s"
+)}
+  color: ${({ hasError, isDisabled, isFocused }) => isDisabled ? "var(--colors-content-disabled)" : hasError ? `var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT});` : isFocused ? "var(--colors-border-active-default)" : "var(--colors-content-subdued-default-default);"};
+  font-size: ${EXTRA_FONT_SIZE};
+  padding-inline: ${LABEL_PADDING};
+  position: absolute;
+  top: ${LABEL_OFFSET_Y};
+  left: calc(${LABEL_OFFSET_X} - ${LABEL_PADDING});
+`;
+const Wrapper = import_styled_components.default.div`
+  ${(0, import_libs.withTokens)(
+  "colors-content-default-default",
+  "colors-surface-transparent-subdued-default",
+  "radius-s",
+  "spacing-s",
+  "spacing-xxs"
+)}
+
+  align-items: center;
+  border-radius: var(--radius-s);
+  display: flex;
+  gap: var(--spacing-xxs, 8px);
+  height: 56px;
+  padding: ${({ hasEnd, hasStart }) => `0 ${hasEnd ? "var(--spacing-xs, 8px)" : LABEL_OFFSET_X} 0 ${hasStart ? "var(--spacing-xs, 8px)" : LABEL_OFFSET_X}`};
+  position: relative;
+  transition: height 0.3s linear;
+`;
+const StyledInput = import_styled_components.default.input`
+  ${(0, import_libs.withTokens)("colors-border-disabled-default")}
+
+  flex: 1;
+  background: none;
+  border: none;
+  cursor: text;
+  &[disabled] {
+    color: var(--colors-border-disabled-default);
+    cursor: not-allowed;
+  }
+`;
+const Fieldset = import_styled_components.default.fieldset`
+  ${(0, import_libs.withTokens)(
+  COLORS_BORDER_STATUS_ERROR_DEFAULT,
+  "colors-border-active-default",
+  "colors-content-subdued-default-default",
+  "colors-content-disabled",
+  "spacing-s"
+)}
+  border-radius: var(--radius-s);
+  border-color: ${({ isDisabled, hasError, isFocused }) => isDisabled ? "var(--colors-content-disabled)" : hasError ? `var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT})` : isFocused ? "var(--colors-border-active-default)" : "var(--colors-content-subdued-default-default)"};
+  border-style: solid;
+  border-width: 1px;
+  bottom: 0;
+  font-size: ${EXTRA_FONT_SIZE};
+  left: 0;
+  overflow: hidden;
+  padding: 0 calc(${LABEL_OFFSET_X} - ${LABEL_PADDING});
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: ${({ hasLabel }) => hasLabel ? LABEL_OFFSET_Y : "0"};
+`;
+const Legend = import_styled_components.default.legend`
+  visibility: hidden;
+  padding-inline: ${LABEL_PADDING};
+`;
+const HelperContainer = (0, import_styled_components.default)(import_components.Flex)`
+  ${(0, import_libs.withTokens)(COLORS_BORDER_STATUS_ERROR_DEFAULT)}
+  align-items: center;
+`;
+const HelperText = import_styled_components.default.span`
+  ${(0, import_libs.withTokens)(COLORS_BORDER_STATUS_ERROR_DEFAULT, "colors-border-disabled-default")}
+  ${({ isDisabled, hasError }) => isDisabled ? "var(--colors-border-disabled-default)" : hasError ? `color: var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT});` : ""}
+  font-size: ${EXTRA_FONT_SIZE};
+`;
+const TextInput = import_react.default.forwardRef(
+  ({
+    label,
+    name,
+    defaultValue = "",
+    startAdornment = null,
+    endAdornment = null,
+    error = false,
+    helperText,
+    style,
+    onFocus,
+    onBlur,
+    onChange,
+    ...rest
+  }, ref) => {
+    const inputRef = import_react.default.useRef(null);
+    const [isFocused, setIsFocused] = import_react.default.useState(false);
+    const [value, setValue] = import_react.default.useState(defaultValue);
+    import_react.default.useImperativeHandle(ref, () => inputRef.current);
+    const hideClearDebounced = import_react.default.useMemo(
+      () => (0, import_debounce.default)(() => setIsFocused(false), DEBOUNCE_MS),
+      []
+    );
+    const handleFocus = (e) => {
+      hideClearDebounced.cancel();
+      setIsFocused(true);
+      onFocus == null ? void 0 : onFocus(e);
+    };
+    const handleBlur = (e) => {
+      onBlur == null ? void 0 : onBlur(e);
+      hideClearDebounced();
+    };
+    import_react.default.useEffect(() => () => hideClearDebounced.cancel(), [hideClearDebounced]);
+    const handleChange = (e) => {
+      setValue(e.target.value);
+      onChange == null ? void 0 : onChange(e);
+    };
+    const clearInput = () => {
+      if (inputRef.current) {
+        inputRef.current.value = "";
+        setValue("");
+        inputRef.current.focus();
+      }
+    };
+    const showClear = value.length > 0 && (isFocused || error);
+    const hasEnd = showClear || Boolean(endAdornment);
+    const hasError = Boolean(error);
+    const hasLabel = Boolean(label);
+    const isDisabled = Boolean(rest.disabled);
+    return /* @__PURE__ */ import_react.default.createElement(Container, { style }, label && /* @__PURE__ */ import_react.default.createElement(Label, { isDisabled, hasError, isFocused, htmlFor: name }, label), /* @__PURE__ */ import_react.default.createElement(Wrapper, { hasStart: Boolean(startAdornment), hasEnd }, startAdornment, /* @__PURE__ */ import_react.default.createElement(
+      StyledInput,
+      {
+        name,
+        defaultValue,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        ...rest,
+        ref: inputRef
+      }
+    ), showClear ? /* @__PURE__ */ import_react.default.createElement(ClearButton, { onClick: clearInput, "aria-label": "Clear" }, /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.DeleteCircleFill, { size: "S", color: "var(--colors-surface-dark-default)" })) : endAdornment, /* @__PURE__ */ import_react.default.createElement(
+      Fieldset,
+      {
+        hasError,
+        hasLabel,
+        isDisabled,
+        isFocused
+      },
+      label ? /* @__PURE__ */ import_react.default.createElement(Legend, null, label) : null
+    )), helperText ? /* @__PURE__ */ import_react.default.createElement(HelperContainer, { columnGap: 2 }, hasError ? /* @__PURE__ */ import_react.default.createElement(
+      import_assets.Icons.DeleteCircleFill,
+      {
+        size: "S",
+        color: `var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT})`
+      }
+    ) : null, /* @__PURE__ */ import_react.default.createElement(HelperText, { isDisabled, hasError }, helperText)) : null);
+  }
+);
+TextInput.displayName = "TextInput";
+//# sourceMappingURL=TextInput.js.map

package/lib/cjs/pre-ldls/components/TextInput/TextInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/TextInput/TextInput.tsx"],
+  "sourcesContent": ["import debounce from \"lodash/debounce\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../../../assets\";\nimport { Flex } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\n\nconst DEBOUNCE_MS = 250;\n\nconst COLORS_BORDER_STATUS_ERROR_DEFAULT = \"colors-border-status-error-default\";\nconst EXTRA_FONT_SIZE = \"0.75rem\";\nconst ICON_BUTTONS_SIZE = \"32px\";\nconst LABEL_OFFSET_Y = `calc(-0.5 * ${EXTRA_FONT_SIZE})`;\nconst LABEL_OFFSET_X = \"var(--spacing-s, 16px)\";\nconst LABEL_PADDING = \"5px\";\n\ntype NativeInputProps = Omit<React.ComponentProps<\"input\">, \"value\" | \"defaultValue\">;\n\nexport type TextInputProps = Readonly<\n  NativeInputProps & {\n    defaultValue?: string;\n    label?: string;\n    startAdornment?: React.ReactNode;\n    endAdornment?: React.ReactNode;\n    error?: boolean;\n    helperText?: string;\n  }\n>;\n\nconst ClearButton = styled.button`\n  ${withTokens(\"colors-surface-dark-default\")}\n\n  all: unset;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: ${ICON_BUTTONS_SIZE};\n  width: ${ICON_BUTTONS_SIZE};\n`;\n\nconst Container = styled.div`\n  ${withTokens(\"spacing-xxs\")}\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xxs, 4px);\n  position: relative;\n  min-width: 328px;\n`;\n\nconst Label = styled.label<{ isDisabled: boolean; hasError: boolean; isFocused: boolean }>`\n  ${withTokens(\n    COLORS_BORDER_STATUS_ERROR_DEFAULT,\n    \"colors-border-active-default\",\n    \"colors-content-disabled\",\n    \"colors-content-subdued-default-default\",\n    \"spacing-s\",\n  )}\n  color: ${({ hasError, isDisabled, isFocused }) =>\n    isDisabled\n      ? \"var(--colors-content-disabled)\"\n      : hasError\n        ? `var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT});`\n        : isFocused\n          ? \"var(--colors-border-active-default)\"\n          : \"var(--colors-content-subdued-default-default);\"};\n  font-size: ${EXTRA_FONT_SIZE};\n  padding-inline: ${LABEL_PADDING};\n  position: absolute;\n  top: ${LABEL_OFFSET_Y};\n  left: calc(${LABEL_OFFSET_X} - ${LABEL_PADDING});\n`;\n\nconst Wrapper = styled.div<{\n  hasStart: boolean;\n  hasEnd: boolean;\n}>`\n  ${withTokens(\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-subdued-default\",\n    \"radius-s\",\n    \"spacing-s\",\n    \"spacing-xxs\",\n  )}\n\n  align-items: center;\n  border-radius: var(--radius-s);\n  display: flex;\n  gap: var(--spacing-xxs, 8px);\n  height: 56px;\n  padding: ${({ hasEnd, hasStart }) =>\n    `0 ${hasEnd ? \"var(--spacing-xs, 8px)\" : LABEL_OFFSET_X} 0 ${\n      hasStart ? \"var(--spacing-xs, 8px)\" : LABEL_OFFSET_X\n    }`};\n  position: relative;\n  transition: height 0.3s linear;\n`;\n\nconst StyledInput = styled.input`\n  ${withTokens(\"colors-border-disabled-default\")}\n\n  flex: 1;\n  background: none;\n  border: none;\n  cursor: text;\n  &[disabled] {\n    color: var(--colors-border-disabled-default);\n    cursor: not-allowed;\n  }\n`;\n\nconst Fieldset = styled.fieldset<{\n  hasError: boolean;\n  hasLabel: boolean;\n  isDisabled: boolean;\n  isFocused: boolean;\n}>`\n  ${withTokens(\n    COLORS_BORDER_STATUS_ERROR_DEFAULT,\n    \"colors-border-active-default\",\n    \"colors-content-subdued-default-default\",\n    \"colors-content-disabled\",\n    \"spacing-s\",\n  )}\n  border-radius: var(--radius-s);\n  border-color: ${({ isDisabled, hasError, isFocused }) =>\n    isDisabled\n      ? \"var(--colors-content-disabled)\"\n      : hasError\n        ? `var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT})`\n        : isFocused\n          ? \"var(--colors-border-active-default)\"\n          : \"var(--colors-content-subdued-default-default)\"};\n  border-style: solid;\n  border-width: 1px;\n  bottom: 0;\n  font-size: ${EXTRA_FONT_SIZE};\n  left: 0;\n  overflow: hidden;\n  padding: 0 calc(${LABEL_OFFSET_X} - ${LABEL_PADDING});\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: ${({ hasLabel }) => (hasLabel ? LABEL_OFFSET_Y : \"0\")};\n`;\n\nconst Legend = styled.legend`\n  visibility: hidden;\n  padding-inline: ${LABEL_PADDING};\n`;\n\nconst HelperContainer = styled(Flex)`\n  ${withTokens(COLORS_BORDER_STATUS_ERROR_DEFAULT)}\n  align-items: center;\n`;\n\n// TODO what's the color for disabled helperText?\nconst HelperText = styled.span<{ hasError: boolean; isDisabled: boolean }>`\n  ${withTokens(COLORS_BORDER_STATUS_ERROR_DEFAULT, \"colors-border-disabled-default\")}\n  ${({ isDisabled, hasError }) =>\n    isDisabled\n      ? \"var(--colors-border-disabled-default)\"\n      : hasError\n        ? `color: var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT});`\n        : \"\"}\n  font-size: ${EXTRA_FONT_SIZE};\n`;\n\nexport const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  (\n    {\n      label,\n      name,\n      defaultValue = \"\",\n      startAdornment = null,\n      endAdornment = null,\n      error = false,\n      helperText,\n      style,\n      onFocus,\n      onBlur,\n      onChange,\n      ...rest\n    },\n    ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const [isFocused, setIsFocused] = React.useState(false);\n    const [value, setValue] = React.useState(defaultValue);\n\n    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const hideClearDebounced = React.useMemo(\n      () => debounce(() => setIsFocused(false), DEBOUNCE_MS),\n      [],\n    );\n\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n      hideClearDebounced.cancel();\n      setIsFocused(true);\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n      onBlur?.(e);\n      hideClearDebounced();\n    };\n\n    React.useEffect(() => () => hideClearDebounced.cancel(), [hideClearDebounced]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(e.target.value);\n      onChange?.(e);\n    };\n\n    const clearInput = () => {\n      if (inputRef.current) {\n        inputRef.current.value = \"\";\n        setValue(\"\");\n        inputRef.current.focus();\n      }\n    };\n\n    const showClear = value.length > 0 && (isFocused || error);\n    const hasEnd = showClear || Boolean(endAdornment);\n    const hasError = Boolean(error);\n    const hasLabel = Boolean(label);\n    const isDisabled = Boolean(rest.disabled);\n\n    return (\n      <Container style={style}>\n        {label && (\n          <Label isDisabled={isDisabled} hasError={hasError} isFocused={isFocused} htmlFor={name}>\n            {label}\n          </Label>\n        )}\n\n        <Wrapper hasStart={Boolean(startAdornment)} hasEnd={hasEnd}>\n          {startAdornment}\n\n          <StyledInput\n            name={name}\n            defaultValue={defaultValue}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            {...rest}\n            ref={inputRef}\n          />\n\n          {showClear ? (\n            <ClearButton onClick={clearInput} aria-label=\"Clear\">\n              <Icons.DeleteCircleFill size=\"S\" color=\"var(--colors-surface-dark-default)\" />\n            </ClearButton>\n          ) : (\n            endAdornment\n          )}\n\n          <Fieldset\n            hasError={hasError}\n            hasLabel={hasLabel}\n            isDisabled={isDisabled}\n            isFocused={isFocused}\n          >\n            {label ? <Legend>{label}</Legend> : null}\n          </Fieldset>\n        </Wrapper>\n\n        {helperText ? (\n          <HelperContainer columnGap={2}>\n            {hasError ? (\n              <Icons.DeleteCircleFill\n                size=\"S\"\n                color={`var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT})`}\n              />\n            ) : null}\n            <HelperText isDisabled={isDisabled} hasError={hasError}>\n              {helperText}\n            </HelperText>\n          </HelperContainer>\n        ) : null}\n      </Container>\n    );\n  },\n);\n\nTextInput.displayName = \"TextInput\";\n"],
+  "mappings": "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",
+  "names": ["styled", "React", "debounce"]
+}

package/lib/cjs/pre-ldls/components/TextInput/TextInput.stories.js

@@ -0,0 +1,93 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TextInput_stories_exports = {};
+__export(TextInput_stories_exports, {
+  Default: () => Default,
+  Disabled: () => Disabled,
+  Filled: () => Filled,
+  WithAdornments: () => WithAdornments,
+  WithError: () => WithError,
+  WithLabel: () => WithLabel,
+  default: () => TextInput_stories_default
+});
+module.exports = __toCommonJS(TextInput_stories_exports);
+var import_react = __toESM(require("react"));
+var import_assets = require("../../../assets");
+var import_TextInput = require("./TextInput");
+const meta = {
+  component: import_TextInput.TextInput,
+  title: "PreLdls/Components/TextInput",
+  tags: ["autodocs"]
+};
+var TextInput_stories_default = meta;
+const Default = {
+  args: {
+    name: "plain",
+    placeholder: "Type here"
+  }
+};
+const WithLabel = {
+  args: {
+    name: "labelled",
+    label: "Your comment",
+    placeholder: "Write something"
+  }
+};
+const WithAdornments = {
+  args: {
+    name: "adorned",
+    startAdornment: /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.Search, { size: "S" }),
+    placeholder: "Search accounts"
+  }
+};
+const WithError = {
+  args: {
+    name: "errorDemo",
+    label: "Errored label",
+    defaultValue: "-20.00",
+    error: true,
+    helperText: "Amount must be a positive number"
+  }
+};
+const Filled = {
+  args: {
+    name: "filledDemo",
+    defaultValue: "Clear me",
+    helperText: "This is a filled input"
+  }
+};
+const Disabled = {
+  args: {
+    name: "disabled",
+    label: "Disabled label",
+    placeholder: "Disabled",
+    disabled: true
+  }
+};
+//# sourceMappingURL=TextInput.stories.js.map

package/lib/cjs/pre-ldls/components/TextInput/TextInput.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/TextInput/TextInput.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Icons } from \"../../../assets\";\nimport { TextInput, TextInputProps } from \"./TextInput\";\n\nconst meta: Meta<typeof TextInput> = {\n  component: TextInput,\n  title: \"PreLdls/Components/TextInput\",\n  tags: [\"autodocs\"],\n};\nexport default meta;\n\ntype Story = StoryObj<TextInputProps>;\n\nexport const Default: Story = {\n  args: {\n    name: \"plain\",\n    placeholder: \"Type here\",\n  },\n};\n\nexport const WithLabel: Story = {\n  args: {\n    name: \"labelled\",\n    label: \"Your comment\",\n    placeholder: \"Write something\",\n  },\n};\n\nexport const WithAdornments: Story = {\n  args: {\n    name: \"adorned\",\n    startAdornment: <Icons.Search size=\"S\" />,\n    placeholder: \"Search accounts\",\n  },\n};\n\nexport const WithError: Story = {\n  args: {\n    name: \"errorDemo\",\n    label: \"Errored label\",\n    defaultValue: \"-20.00\",\n    error: true,\n    helperText: \"Amount must be a positive number\",\n  },\n};\n\nexport const Filled: Story = {\n  args: {\n    name: \"filledDemo\",\n    defaultValue: \"Clear me\",\n    helperText: \"This is a filled input\",\n  },\n};\n\nexport const Disabled: Story = {\n  args: {\n    name: \"disabled\",\n    label: \"Disabled label\",\n    placeholder: \"Disabled\",\n    disabled: true,\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkB;AAClB,oBAAsB;AACtB,uBAA0C;AAE1C,MAAM,OAA+B;AAAA,EACnC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AACnB;AACA,IAAO,4BAAQ;AAIR,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,aAAa;AAAA,EACf;AACF;AAEO,MAAM,YAAmB;AAAA,EAC9B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AACF;AAEO,MAAM,iBAAwB;AAAA,EACnC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,gBAAgB,6BAAAA,QAAA,cAAC,oBAAM,QAAN,EAAa,MAAK,KAAI;AAAA,IACvC,aAAa;AAAA,EACf;AACF;AAEO,MAAM,YAAmB;AAAA,EAC9B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,cAAc;AAAA,IACd,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AACF;AAEO,MAAM,SAAgB;AAAA,EAC3B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACF;AAEO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,EACZ;AACF;",
+  "names": ["React"]
+}

package/lib/cjs/pre-ldls/components/index.js

@@ -26,5 +26,6 @@ __reExport(components_exports, require("./NetworkItem/NetworkItem"), module.expo
 __reExport(components_exports, require("./NetworkList/NetworkList"), module.exports);
 __reExport(components_exports, require("./Search/Search"), module.exports);
 __reExport(components_exports, require("./Tag/Tag"), module.exports);
+__reExport(components_exports, require("./TextInput/TextInput"), module.exports);
 __reExport(components_exports, require("./VirtualList/VirtualList"), module.exports);
 //# sourceMappingURL=index.js.map

package/lib/cjs/pre-ldls/components/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/pre-ldls/components/index.ts"],
-  "sourcesContent": ["export * from \"./AccountItem/AccountItem\";\nexport * from \"./AccountList/AccountList\";\nexport * from \"./Address/Address\";\nexport * from \"./AssetItem/AssetItem\";\nexport * from \"./AssetList/AssetList\";\nexport * from \"./CardButton/CardButton\";\nexport * from \"./Input/Input\";\nexport * from \"./NetworkItem/NetworkItem\";\nexport * from \"./NetworkList/NetworkList\";\nexport * from \"./Search/Search\";\nexport * from \"./Tag/Tag\";\nexport * from \"./VirtualList/VirtualList\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,sCAAd;AACA,+BAAc,sCADd;AAEA,+BAAc,8BAFd;AAGA,+BAAc,kCAHd;AAIA,+BAAc,kCAJd;AAKA,+BAAc,oCALd;AAMA,+BAAc,0BANd;AAOA,+BAAc,sCAPd;AAQA,+BAAc,sCARd;AASA,+BAAc,4BATd;AAUA,+BAAc,sBAVd;AAWA,+BAAc,sCAXd;",
+  "sourcesContent": ["export * from \"./AccountItem/AccountItem\";\nexport * from \"./AccountList/AccountList\";\nexport * from \"./Address/Address\";\nexport * from \"./AssetItem/AssetItem\";\nexport * from \"./AssetList/AssetList\";\nexport * from \"./CardButton/CardButton\";\nexport * from \"./Input/Input\";\nexport * from \"./NetworkItem/NetworkItem\";\nexport * from \"./NetworkList/NetworkList\";\nexport * from \"./Search/Search\";\nexport * from \"./Tag/Tag\";\nexport * from \"./TextInput/TextInput\";\nexport * from \"./VirtualList/VirtualList\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,sCAAd;AACA,+BAAc,sCADd;AAEA,+BAAc,8BAFd;AAGA,+BAAc,kCAHd;AAIA,+BAAc,kCAJd;AAKA,+BAAc,oCALd;AAMA,+BAAc,0BANd;AAOA,+BAAc,sCAPd;AAQA,+BAAc,sCARd;AASA,+BAAc,4BATd;AAUA,+BAAc,sBAVd;AAWA,+BAAc,kCAXd;AAYA,+BAAc,sCAZd;",
   "names": []
 }

package/lib/cjs/pre-ldls/libs/index.js

@@ -66,12 +66,14 @@ const overrideColor = {
     // override from colours
     "border-subdued-default-hover": "#D5D5D5",
     // override from colours
-    "border-subdued-default-pressed": "#C1C1C1"
+    "border-subdued-default-pressed": "#C1C1C1",
     // missing from colours
+    "background-active": "#D4A0FF"
   },
   dark: {
-    "opacity-default-10": "#FFFFFF1A"
+    "opacity-default-10": "#FFFFFF1A",
     // missing from colours
+    "background-active": "#D4A0FF"
   }
 };
 const withTokens = (...usedTokens) => {

package/lib/cjs/pre-ldls/libs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/pre-ldls/libs/index.ts"],
-  "sourcesContent": ["import memoize from \"lodash/memoize\";\nimport { css, DefaultTheme } from \"styled-components\";\nimport { dark, light, ModeColors, spacing, SpacingScale } from \"./design-tokens\";\n\n// Add temporarily missing and override incorrect tokens here\nconst overrideOther = {\n  \"radius-m\": \"12px\", // missing from tokens\n  \"radius-s\": \"8px\", // missing from tokens\n  \"radius-xs\": \"4px\", // missing from tokens\n  \"border-width-default\": \"1px\", // missing from tokens\n  \"border-width-focus\": \"2px\", // missing from tokens\n  \"margin-xs\": \"8px\", // redefines marging-xs\n  \"margin-s\": \"16px\", // redefines marging-s\n  \"margin-m\": \"24px\", // redefines marging-m\n  \"margin-l\": \"32px\", // redefines marging-l\n\n  \"spacing-xs\": \"12px\", // override from \"spacing-xxs\": \"12px\"\n  \"spacing-xxs\": \"8px\", // override from \"spacing-xs\": \"8px\"\n} as const;\n\n// Add temporarily missing and override incorrect colours here\nconst overrideColor = {\n  light: {\n    \"surface-transparent-hover\": \"#0000000D\", // override from colours\n    \"surface-transparent-pressed\": \"#0000001A\", // override from colours\n    \"border-subdued-default-hover\": \"#D5D5D5\", // override from colours\n\n    \"border-subdued-default-pressed\": \"#C1C1C1\", // missing from colours\n  },\n  dark: {\n    \"opacity-default-10\": \"#FFFFFF1A\", // missing from colours\n  },\n} as const;\n\ntype ColorToken =\n  | `colors-${keyof ModeColors}`\n  | `colors-${keyof typeof overrideColor.light}`\n  | `colors-${keyof typeof overrideColor.dark}`;\ntype OtherToken = keyof (SpacingScale & typeof overrideOther);\n\nexport const withTokens = (...usedTokens: Array<ColorToken | OtherToken>) => {\n  const filterTokens = memoize((theme: DefaultTheme[\"theme\"]) => {\n    const colors = {\n      dark: { ...dark, ...overrideColor.dark },\n      light: { ...light, ...overrideColor.light },\n    }[theme];\n\n    const colorEntries = Object.entries(colors).flatMap(([key, value]) => {\n      const color = `colors-${key}` as ColorToken;\n      if (!usedTokens.includes(color)) return [];\n      return [[`--${color}`, value]];\n    });\n    const otherEntries = [spacing, overrideOther]\n      .flatMap(Object.entries)\n      .flatMap(([key, value]) => {\n        if (!usedTokens.includes(key as OtherToken)) return [];\n        return [[`--${key}`, value]];\n      });\n\n    return Object.fromEntries([...colorEntries, ...otherEntries]);\n  });\n\n  return css(({ theme }) => filterTokens(theme.colors.type as DefaultTheme[\"theme\"]));\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoB;AACpB,+BAAkC;AAClC,2BAA+D;AAG/D,MAAM,gBAAgB;AAAA,EACpB,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EACZ,aAAa;AAAA;AAAA,EACb,wBAAwB;AAAA;AAAA,EACxB,sBAAsB;AAAA;AAAA,EACtB,aAAa;AAAA;AAAA,EACb,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EAEZ,cAAc;AAAA;AAAA,EACd,eAAe;AAAA;AACjB;AAGA,MAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,IACL,6BAA6B;AAAA;AAAA,IAC7B,+BAA+B;AAAA;AAAA,IAC/B,gCAAgC;AAAA;AAAA,IAEhC,kCAAkC;AAAA;AAAA,EACpC;AAAA,EACA,MAAM;AAAA,IACJ,sBAAsB;AAAA;AAAA,EACxB;AACF;AAQO,MAAM,aAAa,IAAI,eAA+C;AAC3E,QAAM,mBAAe,eAAAA,SAAQ,CAAC,UAAiC;AAC7D,UAAM,SAAS;AAAA,MACb,MAAM,EAAE,GAAG,2BAAM,GAAG,cAAc,KAAK;AAAA,MACvC,OAAO,EAAE,GAAG,4BAAO,GAAG,cAAc,MAAM;AAAA,IAC5C,EAAE,KAAK;AAEP,UAAM,eAAe,OAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACpE,YAAM,QAAQ,UAAU,GAAG;AAC3B,UAAI,CAAC,WAAW,SAAS,KAAK;AAAG,eAAO,CAAC;AACzC,aAAO,CAAC,CAAC,KAAK,KAAK,IAAI,KAAK,CAAC;AAAA,IAC/B,CAAC;AACD,UAAM,eAAe,CAAC,8BAAS,aAAa,EACzC,QAAQ,OAAO,OAAO,EACtB,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACzB,UAAI,CAAC,WAAW,SAAS,GAAiB;AAAG,eAAO,CAAC;AACrD,aAAO,CAAC,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC;AAAA,IAC7B,CAAC;AAEH,WAAO,OAAO,YAAY,CAAC,GAAG,cAAc,GAAG,YAAY,CAAC;AAAA,EAC9D,CAAC;AAED,aAAO,8BAAI,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,IAA6B,CAAC;AACpF;",
+  "sourcesContent": ["import memoize from \"lodash/memoize\";\nimport { css, DefaultTheme } from \"styled-components\";\nimport { dark, light, ModeColors, spacing, SpacingScale } from \"./design-tokens\";\n\n// Add temporarily missing and override incorrect tokens here\nconst overrideOther = {\n  \"radius-m\": \"12px\", // missing from tokens\n  \"radius-s\": \"8px\", // missing from tokens\n  \"radius-xs\": \"4px\", // missing from tokens\n  \"border-width-default\": \"1px\", // missing from tokens\n  \"border-width-focus\": \"2px\", // missing from tokens\n  \"margin-xs\": \"8px\", // redefines marging-xs\n  \"margin-s\": \"16px\", // redefines marging-s\n  \"margin-m\": \"24px\", // redefines marging-m\n  \"margin-l\": \"32px\", // redefines marging-l\n\n  \"spacing-xs\": \"12px\", // override from \"spacing-xxs\": \"12px\"\n  \"spacing-xxs\": \"8px\", // override from \"spacing-xs\": \"8px\"\n} as const;\n\n// Add temporarily missing and override incorrect colours here\nconst overrideColor = {\n  light: {\n    \"surface-transparent-hover\": \"#0000000D\", // override from colours\n    \"surface-transparent-pressed\": \"#0000001A\", // override from colours\n    \"border-subdued-default-hover\": \"#D5D5D5\", // override from colours\n\n    \"border-subdued-default-pressed\": \"#C1C1C1\", // missing from colours\n    \"background-active\": \"#D4A0FF\",\n  },\n  dark: {\n    \"opacity-default-10\": \"#FFFFFF1A\", // missing from colours\n    \"background-active\": \"#D4A0FF\",\n  },\n} as const;\n\ntype ColorToken =\n  | `colors-${keyof ModeColors}`\n  | `colors-${keyof typeof overrideColor.light}`\n  | `colors-${keyof typeof overrideColor.dark}`;\ntype OtherToken = keyof (SpacingScale & typeof overrideOther);\n\nexport const withTokens = (...usedTokens: Array<ColorToken | OtherToken>) => {\n  const filterTokens = memoize((theme: DefaultTheme[\"theme\"]) => {\n    const colors = {\n      dark: { ...dark, ...overrideColor.dark },\n      light: { ...light, ...overrideColor.light },\n    }[theme];\n\n    const colorEntries = Object.entries(colors).flatMap(([key, value]) => {\n      const color = `colors-${key}` as ColorToken;\n      if (!usedTokens.includes(color)) return [];\n      return [[`--${color}`, value]];\n    });\n    const otherEntries = [spacing, overrideOther]\n      .flatMap(Object.entries)\n      .flatMap(([key, value]) => {\n        if (!usedTokens.includes(key as OtherToken)) return [];\n        return [[`--${key}`, value]];\n      });\n\n    return Object.fromEntries([...colorEntries, ...otherEntries]);\n  });\n\n  return css(({ theme }) => filterTokens(theme.colors.type as DefaultTheme[\"theme\"]));\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoB;AACpB,+BAAkC;AAClC,2BAA+D;AAG/D,MAAM,gBAAgB;AAAA,EACpB,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EACZ,aAAa;AAAA;AAAA,EACb,wBAAwB;AAAA;AAAA,EACxB,sBAAsB;AAAA;AAAA,EACtB,aAAa;AAAA;AAAA,EACb,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EAEZ,cAAc;AAAA;AAAA,EACd,eAAe;AAAA;AACjB;AAGA,MAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,IACL,6BAA6B;AAAA;AAAA,IAC7B,+BAA+B;AAAA;AAAA,IAC/B,gCAAgC;AAAA;AAAA,IAEhC,kCAAkC;AAAA;AAAA,IAClC,qBAAqB;AAAA,EACvB;AAAA,EACA,MAAM;AAAA,IACJ,sBAAsB;AAAA;AAAA,IACtB,qBAAqB;AAAA,EACvB;AACF;AAQO,MAAM,aAAa,IAAI,eAA+C;AAC3E,QAAM,mBAAe,eAAAA,SAAQ,CAAC,UAAiC;AAC7D,UAAM,SAAS;AAAA,MACb,MAAM,EAAE,GAAG,2BAAM,GAAG,cAAc,KAAK;AAAA,MACvC,OAAO,EAAE,GAAG,4BAAO,GAAG,cAAc,MAAM;AAAA,IAC5C,EAAE,KAAK;AAEP,UAAM,eAAe,OAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACpE,YAAM,QAAQ,UAAU,GAAG;AAC3B,UAAI,CAAC,WAAW,SAAS,KAAK;AAAG,eAAO,CAAC;AACzC,aAAO,CAAC,CAAC,KAAK,KAAK,IAAI,KAAK,CAAC;AAAA,IAC/B,CAAC;AACD,UAAM,eAAe,CAAC,8BAAS,aAAa,EACzC,QAAQ,OAAO,OAAO,EACtB,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACzB,UAAI,CAAC,WAAW,SAAS,GAAiB;AAAG,eAAO,CAAC;AACrD,aAAO,CAAC,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC;AAAA,IAC7B,CAAC;AAEH,WAAO,OAAO,YAAY,CAAC,GAAG,cAAc,GAAG,YAAY,CAAC;AAAA,EAC9D,CAAC;AAED,aAAO,8BAAI,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,IAA6B,CAAC;AACpF;",
   "names": ["memoize"]
 }

package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CheckboxProps } from "../../../components/form/Checkbox/Checkbox";
+import type { CheckboxProps } from "../Checkbox/Checkbox";
 export type Account = {
     address: string;
     balance?: string;
@@ -11,14 +11,18 @@ export type Account = {
     protocol?: string;
     ticker?: string;
 };
+export type RightElementArrow = {
+    type: "arrow";
+};
 export type RightElementCheckbox = {
     type: "checkbox";
     checkbox: CheckboxProps;
 };
-export type RightElementArrow = {
-    type: "arrow";
+export type RightElementEdit = {
+    type: "edit";
+    onClick: () => void;
 };
-export type RightElement = RightElementCheckbox | RightElementArrow;
+export type RightElement = RightElementArrow | RightElementCheckbox | RightElementEdit;
 export type AccountItemProps = {
     onClick?: () => void;
     account: Account;

package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccountItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAMhF,MAAM,MAAM,OAAO,GAAG;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AAEpE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAmGF,eAAO,MAAM,WAAW,mEAMrB,gBAAgB,sBA6DlB,CAAC"}
+{"version":3,"file":"AccountItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAI1D,MAAM,MAAM,OAAO,GAAG;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,iBAAiB,GAAG,oBAAoB,GAAG,gBAAgB,CAAC;AAEvF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAkHF,eAAO,MAAM,WAAW,mEAMrB,gBAAgB,sBA2ElB,CAAC"}

package/lib/pre-ldls/components/AccountItem/AccountItem.js

@@ -1,9 +1,24 @@
 import React from "react";
 import styled from "styled-components";
-import { Checkbox, Icon, Text, Flex } from "../../../components";
+import { Icons } from "../../../assets";
+import { Flex, Icon, Text } from "../../../components";
 import { withTokens } from "../../libs";
 import { Address } from "../Address/Address";
+import { Checkbox } from "../Checkbox/Checkbox";
 import { Tag } from "../Tag/Tag";
+const ICON_BUTTONS_SIZE = "32px";
+// TODO a proper IconButton component that handles hover and pressed states.
+const IconButton = styled.button `
+  ${withTokens("colors-content-default-default")}
+
+  all: unset;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: ${ICON_BUTTONS_SIZE};
+  width: ${ICON_BUTTONS_SIZE};
+`;
 const Wrapper = styled.div `
   ${withTokens("spacing-xxxs", "spacing-xxs", "spacing-xs", "margin-s", "radius-s", "radius-m", "colors-content-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed", "colors-content-subdued-default-default", "colors-surface-transparent-subdued-default")}
 
@@ -83,7 +98,7 @@ const BalanceContainer = styled.div `
 `;
 export const AccountItem = ({ onClick, account, rightElement, showIcon = true, backgroundColor, }) => {
     const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
-    return (React.createElement(Wrapper, { onClick: onClick, backgroundColor: backgroundColor, isClickable: !!onClick },
+    return (React.createElement(Wrapper, { backgroundColor: backgroundColor, isClickable: Boolean(onClick), onClick: onClick },
         React.createElement(ContentContainer, null,
             React.createElement(AccountInfoContainer, null,
                 React.createElement(NameRow, null,
@@ -100,9 +115,16 @@ export const AccountItem = ({ onClick, account, rightElement, showIcon = true, b
             React.createElement(BalanceContainer, null,
                 fiatValue && React.createElement(Text, { fontSize: "14px" }, fiatValue),
                 balance && (React.createElement(Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance))),
-            rightElement && rightElement.type === "checkbox" && (React.createElement(Flex, { "data-testid": "right-element-checkbox" },
+            rightElement && rightElement.type === "checkbox" && (React.createElement(Flex, { "data-testid": "right-element-checkbox", "aria-label": "Checkbox account item" },
                 React.createElement(Checkbox, { ...rightElement.checkbox, size: 20 }))),
-            rightElement && rightElement.type === "arrow" && (React.createElement(Flex, { "data-testid": "right-element-arrow-icon" },
-                React.createElement(Icon, { name: "ChevronRight", size: 24 }))))));
+            rightElement && rightElement.type === "arrow" && (React.createElement(Flex, { "data-testid": "right-element-arrow-icon", "aria-label": "Arrow account item" },
+                React.createElement(Icon, { name: "ChevronRight", size: 24 }))),
+            rightElement && rightElement.type === "edit" && (React.createElement(IconButton, { "aria-label": "Edit account item", "data-testid": "right-element-edit-icon", onClick: e => {
+                    e.stopPropagation();
+                    if (rightElement?.type === "edit") {
+                        rightElement.onClick();
+                    }
+                } },
+                React.createElement(Icons.PenEdit, { size: "S", color: "var(--colors-content-default-default)" }))))));
 };
 //# sourceMappingURL=AccountItem.js.map

package/lib/pre-ldls/components/AccountItem/AccountItem.js.map

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

package/lib/pre-ldls/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export type CheckboxProps = {
+    isDisabled?: boolean;
+    isChecked: boolean;
+    name: string;
+    onChange: (value: boolean) => void;
+    size?: number;
+};
+export declare const Checkbox: ({ isDisabled, isChecked, name, onChange, size, }: CheckboxProps) => JSX.Element;
+//# sourceMappingURL=Checkbox.d.ts.map

package/lib/pre-ldls/components/Checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AA2DA,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,QAAQ,qDAMlB,aAAa,KAAG,WAiBlB,CAAC"}

package/lib/pre-ldls/components/Checkbox/Checkbox.js

@@ -0,0 +1,62 @@
+import React from "react";
+import styled from "styled-components";
+import CheckAloneMedium from "@ledgerhq/icons-ui/reactLegacy/CheckAloneMedium";
+import { renderToStaticMarkup } from "react-dom/server";
+import { withTokens } from "../../libs";
+const Icon = () => React.cloneElement(CheckAloneMedium({ size: 13, color: "currentColor" }), {
+    // the xmlns attribute is required to properly display the checkbox
+    xmlns: "http://www.w3.org/2000/svg",
+});
+const CheckMarkIcon = encodeURIComponent(renderToStaticMarkup(React.createElement(Icon, null)));
+const Input = styled.input `
+  background-color: transparent;
+
+  border-radius: ${p => `${p.theme.radii[1]}px`};
+  position: relative;
+
+  min-width: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};
+  height: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};
+  appearance: none;
+  border: 1px solid ${props => props.theme.colors.opacityDefault.c30};
+  box-shadow: none;
+
+  &:checked {
+    background-color: currentColor;
+    border-color: currentColor;
+  }
+
+  &:checked::after {
+    content: " ";
+    width: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};
+    height: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};
+    display: inline-block;
+    color: ${props => props.theme.colors.neutral.c00};
+
+    background-image: url("data:image/svg+xml,${CheckMarkIcon}");
+    background-position: center;
+    background-repeat: no-repeat;
+
+    /* Trick to center the check mark by taking into account the border */
+    position: absolute;
+    top: -1px;
+    left: -1px;
+  }
+`;
+const Container = styled.div `
+  ${withTokens("colors-background-active")}
+
+  color: var(--colors-background-active);
+
+  display: inline-flex;
+  column-gap: ${p => p.theme.space[5]}px;
+  align-items: center;
+  cursor: pointer;
+`;
+export const Checkbox = ({ isDisabled = false, isChecked, name, onChange, size, }) => (React.createElement(Container, { "data-disabled": isDisabled },
+    React.createElement(Input, { type: "checkbox", name: name, id: name, checked: isChecked, disabled: isDisabled, onChange: e => {
+            // TODO Checkbox should be an uncontrolled component that exposes the event onChange.
+            // (leave stopPropagation to the parent)
+            e.stopPropagation();
+            onChange(!isChecked);
+        }, size: size })));
+//# sourceMappingURL=Checkbox.js.map

package/lib/pre-ldls/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,gBAAgB,MAAM,iDAAiD,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,IAAI,GAAG,GAAG,EAAE,CAChB,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,EAAE;IACxE,mEAAmE;IACnE,KAAK,EAAE,4BAA4B;CACpC,CAAC,CAAC;AACL,MAAM,aAAa,GAAG,kBAAkB,CAAC,oBAAoB,CAAC,oBAAC,IAAI,OAAG,CAAC,CAAC,CAAC;AAEzE,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAmB;;;mBAG1B,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;;;eAGhC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;YAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;;sBAE7C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG;;;;;;;;;;aAUvD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;cACtD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;;aAExD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;gDAEJ,aAAa;;;;;;;;;CAS5D,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;IACxB,UAAU,CAAC,0BAA0B,CAAC;;;;;gBAK1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;CAGpC,CAAC;AAUF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,IAAI,GACU,EAAe,EAAE,CAAC,CAChC,oBAAC,SAAS,qBAAgB,UAAU;IAClC,oBAAC,KAAK,IACJ,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,IAAI,EACR,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,CAAC,CAAC,EAAE;YACZ,qFAAqF;YACrF,wCAAwC;YACxC,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;QACvB,CAAC,EACD,IAAI,EAAE,IAAI,GACV,CACQ,CACb,CAAC"}