@ledgerhq/react-ui 0.7.6 → 0.7.7-nightly.0

package/lib/cjs/components/form/Radio/RadioListElement.js

@@ -0,0 +1,95 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  Label: () => Label,
+  default: () => RadioListElement_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+var import_helpers = __toModule(require("../../../styles/helpers"));
+var import_index = __toModule(require("./index"));
+const Label = (0, import_styled_components.default)(import_Text.default)`
+  color: ${(p) => p.disabled ? p.theme.colors.neutral.c50 : p.checked ? p.theme.colors.primary.c90 : p.theme.colors.neutral.c100};
+`;
+const Container = (0, import_styled_components.default)(import_Flex.default)`
+  cursor: ${(p) => p.disabled ? "" : "pointer"};
+  justify-content: center;
+  align-items: center;
+  background-color: ${(p) => p.checked ? p.theme.colors.primary.c20 : ""};
+  border: 1px solid ${(p) => p.checked ? p.theme.colors.primary.c50 : p.theme.colors.neutral.c40};
+  border-radius: ${(p) => `${p.theme.radii[2]}px`};
+  padding: ${(p) => p.theme.space[6]}px;
+
+  :hover {
+    border-color: ${(p) => p.disabled || p.checked ? "" : p.theme.colors.primary.c80};
+  }
+`;
+const Input = import_styled_components.default.input`
+  position: relative;
+  appearance: none;
+  &:focus ~ ${Container} {
+    box-shadow: 0px 0px 0px 4px ${(p) => (0, import_helpers.rgba)(p.theme.colors.primary.c60, 0.48)};
+  }
+`;
+const RadioListElement = import_styled_components.default.label.attrs({ tabIndex: -1 })`
+  display: inline-flex;
+  align-items: center;
+`;
+const ListElement = ({
+  label,
+  value,
+  disabled,
+  containerProps,
+  ...props
+}) => {
+  const context = (0, import_react.useContext)(import_index.RadioContext);
+  if (context === void 0)
+    throw new Error("RadioElement must be used within a RadioProvider");
+  const isChecked = context.currentValue === value;
+  const handleChange = (event) => {
+    context.onChange(event.target.value);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(RadioListElement, null, /* @__PURE__ */ import_react.default.createElement(Input, {
+    type: "radio",
+    checked: isChecked,
+    disabled,
+    onChange: handleChange,
+    value,
+    name: context.name,
+    ...props
+  }), /* @__PURE__ */ import_react.default.createElement(Container, {
+    checked: isChecked,
+    disabled,
+    ...containerProps
+  }, typeof label === "string" ? /* @__PURE__ */ import_react.default.createElement(Label, {
+    checked: isChecked,
+    disabled,
+    variant: "paragraph"
+  }, label) : import_react.default.createElement(label, { checked: isChecked, disabled })));
+};
+ListElement.displayName = "Radio.ListElement";
+var RadioListElement_default = ListElement;
+//# sourceMappingURL=RadioListElement.js.map

package/lib/cjs/components/form/Radio/RadioListElement.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/Radio/RadioListElement.tsx"],
+  "sourcesContent": ["import React, { InputHTMLAttributes, useContext } from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex, { FlexBoxProps } from \"../../layout/Flex\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { RadioContext } from \"./index\";\n\ntype ElementState = {\n  checked: boolean;\n  disabled: boolean | undefined;\n};\n\nexport const Label = styled(Text)<ElementState>`\n  color: ${(p) =>\n    p.disabled\n      ? p.theme.colors.neutral.c50\n      : p.checked\n      ? p.theme.colors.primary.c90\n      : p.theme.colors.neutral.c100};\n`;\n\nconst Container = styled(Flex)<ElementState>`\n  cursor: ${(p) => (p.disabled ? \"\" : \"pointer\")};\n  justify-content: center;\n  align-items: center;\n  background-color: ${(p) => (p.checked ? p.theme.colors.primary.c20 : \"\")};\n  border: 1px solid ${(p) => (p.checked ? p.theme.colors.primary.c50 : p.theme.colors.neutral.c40)};\n  border-radius: ${(p) => `${p.theme.radii[2]}px`};\n  padding: ${(p) => p.theme.space[6]}px;\n\n  :hover {\n    border-color: ${(p) => (p.disabled || p.checked ? \"\" : p.theme.colors.primary.c80)};\n  }\n`;\n\nconst Input = styled.input`\n  position: relative;\n  appearance: none;\n  &:focus ~ ${Container} {\n    box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};\n  }\n`;\n\nconst RadioListElement = styled.label.attrs({ tabIndex: -1 })`\n  display: inline-flex;\n  align-items: center;\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioListElementProps = InputAttributes & {\n  /**\n   * The string or component that will be rendered as label of this radio element\n   * If it's a component, it's rendered with these props: { checked:boolean; disabled:boolean }\n   * */\n  label: string | React.ComponentType<ElementState> | ((arg1: ElementState) => JSX.Element);\n  /** Flex props to pass to the container */\n  containerProps?: FlexBoxProps;\n};\n\nconst ListElement = ({\n  label,\n  value,\n  disabled,\n  containerProps,\n  ...props\n}: RadioListElementProps): JSX.Element => {\n  const context = useContext(RadioContext);\n  if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n  const isChecked = context.currentValue === value;\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    context.onChange(event.target.value);\n  };\n\n  return (\n    <RadioListElement>\n      <Input\n        type=\"radio\"\n        checked={isChecked}\n        disabled={disabled}\n        onChange={handleChange}\n        value={value}\n        name={context.name}\n        {...props}\n      />\n      <Container checked={isChecked} disabled={disabled} {...containerProps}>\n        {typeof label === \"string\" ? (\n          <Label checked={isChecked} disabled={disabled} variant=\"paragraph\">\n            {label}\n          </Label>\n        ) : (\n          React.createElement(label, { checked: isChecked, disabled })\n        )}\n      </Container>\n    </RadioListElement>\n  );\n};\n\nListElement.displayName = \"Radio.ListElement\"; // For easy identification in the React devtools & in storybook\n\nexport default ListElement;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuD;AACvD,+BAAmB;AACnB,kBAAiB;AACjB,kBAAmC;AACnC,qBAAqB;AACrB,mBAA6B;AAOtB,MAAM,QAAQ,sCAAO;AAAA,WACjB,CAAC,MACR,EAAE,WACE,EAAE,MAAM,OAAO,QAAQ,MACvB,EAAE,UACF,EAAE,MAAM,OAAO,QAAQ,MACvB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAG/B,MAAM,YAAY,sCAAO;AAAA,YACb,CAAC,MAAO,EAAE,WAAW,KAAK;AAAA;AAAA;AAAA,sBAGhB,CAAC,MAAO,EAAE,UAAU,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA,sBACjD,CAAC,MAAO,EAAE,UAAU,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC3E,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA,aAC9B,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA,oBAGd,CAAC,MAAO,EAAE,YAAY,EAAE,UAAU,KAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIlF,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA,cAGP;AAAA,kCACoB,CAAC,MAAM,yBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAI1E,MAAM,mBAAmB,iCAAO,MAAM,MAAM,EAAE,UAAU;AAAA;AAAA;AAAA;AAiBxD,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,MACqC;AACxC,QAAM,UAAU,6BAAW;AAC3B,MAAI,YAAY;AAAW,UAAM,IAAI,MAAM;AAE3C,QAAM,YAAY,QAAQ,iBAAiB;AAE3C,QAAM,eAAe,CAAC,UAA+C;AACnE,YAAQ,SAAS,MAAM,OAAO;AAAA;AAGhC,SACE,mDAAC,kBAAD,MACE,mDAAC,OAAD;AAAA,IACE,MAAK;AAAA,IACL,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,MAAM,QAAQ;AAAA,OACV;AAAA,MAEN,mDAAC,WAAD;AAAA,IAAW,SAAS;AAAA,IAAW;AAAA,OAAwB;AAAA,KACpD,OAAO,UAAU,WAChB,mDAAC,OAAD;AAAA,IAAO,SAAS;AAAA,IAAW;AAAA,IAAoB,SAAQ;AAAA,KACpD,SAGH,qBAAM,cAAc,OAAO,EAAE,SAAS,WAAW;AAAA;AAO3D,YAAY,cAAc;AAE1B,IAAO,2BAAQ;",
+  "names": []
+}

package/lib/cjs/components/form/Radio/RadioListElement.stories.js

@@ -0,0 +1,52 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  RadioListElement: () => RadioListElement,
+  default: () => RadioListElement_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+var RadioListElement_stories_default = {
+  title: "Form/Radio"
+};
+const Template = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    currentValue: "first",
+    name: "radioListElement",
+    onChange: () => {
+    }
+  }, /* @__PURE__ */ import_react.default.createElement(import_index.default.ListElement, {
+    label: "Selected",
+    value: "first"
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.ListElement, {
+    label: "Unselected",
+    value: "second"
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.ListElement, {
+    label: "Disabled",
+    value: "third",
+    disabled: true
+  }));
+};
+const RadioListElement = Template.bind({});
+//# sourceMappingURL=RadioListElement.stories.js.map

package/lib/cjs/components/form/Radio/RadioListElement.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/Radio/RadioListElement.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\n\nimport Radio from \"./index\";\n\nexport default {\n  title: \"Form/Radio\",\n};\n\nconst Template = () => {\n  return (\n    <Radio currentValue=\"first\" name=\"radioListElement\" onChange={() => {}}>\n      <Radio.ListElement label=\"Selected\" value=\"first\" />\n      <Radio.ListElement label=\"Unselected\" value=\"second\" />\n      <Radio.ListElement label=\"Disabled\" value=\"third\" disabled />\n    </Radio>\n  );\n};\n\nexport const RadioListElement = Template.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,mBAAkB;AAElB,IAAO,mCAAQ;AAAA,EACb,OAAO;AAAA;AAGT,MAAM,WAAW,MAAM;AACrB,SACE,mDAAC,sBAAD;AAAA,IAAO,cAAa;AAAA,IAAQ,MAAK;AAAA,IAAmB,UAAU,MAAM;AAAA;AAAA,KAClE,mDAAC,qBAAM,aAAP;AAAA,IAAmB,OAAM;AAAA,IAAW,OAAM;AAAA,MAC1C,mDAAC,qBAAM,aAAP;AAAA,IAAmB,OAAM;AAAA,IAAa,OAAM;AAAA,MAC5C,mDAAC,qBAAM,aAAP;AAAA,IAAmB,OAAM;AAAA,IAAW,OAAM;AAAA,IAAQ,UAAQ;AAAA;AAAA;AAKzD,MAAM,mBAAmB,SAAS,KAAK;",
+  "names": []
+}

package/lib/cjs/components/form/Radio/index.js

@@ -0,0 +1,54 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  RadioContext: () => RadioContext,
+  default: () => Radio_default
+});
+var import_react = __toModule(require("react"));
+var import_RadioElement = __toModule(require("./RadioElement"));
+var import_RadioListElement = __toModule(require("./RadioListElement"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+const RadioContext = import_react.default.createContext({
+  name: "",
+  onChange: () => {
+  }
+});
+const Radio = ({
+  currentValue,
+  name,
+  onChange,
+  children,
+  containerProps
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    columnGap: "1.5rem",
+    ...containerProps
+  }, /* @__PURE__ */ import_react.default.createElement(RadioContext.Provider, {
+    value: { currentValue, name, onChange }
+  }, children));
+};
+Radio.Element = import_RadioElement.default;
+Radio.ListElement = import_RadioListElement.default;
+var Radio_default = Radio;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/form/Radio/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/Radio/index.tsx"],
+  "sourcesContent": ["import React, { InputHTMLAttributes } from \"react\";\n\nimport RadioElement from \"./RadioElement\";\nimport RadioListElement from \"./RadioListElement\";\nimport Flex from \"../../layout/Flex\";\nimport { FlexBoxProps } from \"../../layout/Flex\";\n\nexport type RadioProps = {\n  currentValue?: InputHTMLAttributes<HTMLInputElement>[\"value\"];\n  onChange: (value: InputHTMLAttributes<HTMLInputElement>[\"value\"]) => void;\n  children: React.ReactNode;\n  name: string;\n  containerProps?: FlexBoxProps;\n};\n\nexport const RadioContext = React.createContext<Omit<RadioProps, \"children\" | \"containerProps\">>({\n  name: \"\",\n  onChange: () => {},\n});\n\nconst Radio = ({\n  currentValue,\n  name,\n  onChange,\n  children,\n  containerProps,\n}: RadioProps): JSX.Element => {\n  return (\n    <Flex columnGap=\"1.5rem\" {...containerProps}>\n      <RadioContext.Provider value={{ currentValue, name, onChange }}>\n        {children}\n      </RadioContext.Provider>\n    </Flex>\n  );\n};\n\nRadio.Element = RadioElement;\nRadio.ListElement = RadioListElement;\n\nexport default Radio;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAE3C,0BAAyB;AACzB,8BAA6B;AAC7B,kBAAiB;AAWV,MAAM,eAAe,qBAAM,cAA+D;AAAA,EAC/F,MAAM;AAAA,EACN,UAAU,MAAM;AAAA;AAAA;AAGlB,MAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC6B;AAC7B,SACE,mDAAC,qBAAD;AAAA,IAAM,WAAU;AAAA,OAAa;AAAA,KAC3B,mDAAC,aAAa,UAAd;AAAA,IAAuB,OAAO,EAAE,cAAc,MAAM;AAAA,KACjD;AAAA;AAMT,MAAM,UAAU;AAChB,MAAM,cAAc;AAEpB,IAAO,gBAAQ;",
+  "names": []
+}

package/lib/cjs/components/form/SearchInput/Input.stories.js

@@ -0,0 +1,52 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  Search: () => Search,
+  default: () => Input_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+var Input_stories_default = {
+  title: "Form/Input/Search",
+  argTypes: {
+    disabled: {
+      type: "boolean",
+      defaultValue: false
+    },
+    error: {
+      type: "string",
+      defaultValue: void 0
+    }
+  }
+};
+const Search = (args) => {
+  const [value, setValue] = import_react.default.useState("");
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    value,
+    onChange: setValue,
+    placeholder: "Placeholder"
+  });
+};
+//# sourceMappingURL=Input.stories.js.map

package/lib/cjs/components/form/SearchInput/Input.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/SearchInput/Input.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport SearchInput from \"./index\";\nimport { InputProps } from \"../BaseInput\";\n\nexport default {\n  title: \"Form/Input/Search\",\n  argTypes: {\n    disabled: {\n      type: \"boolean\",\n      defaultValue: false,\n    },\n    error: {\n      type: \"string\",\n      defaultValue: undefined,\n    },\n  },\n};\n\nexport const Search = (args: InputProps): JSX.Element => {\n  const [value, setValue] = React.useState(\"\");\n\n  return <SearchInput {...args} value={value} onChange={setValue} placeholder={\"Placeholder\"} />;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAwB;AAGxB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,MACN,cAAc;AAAA;AAAA,IAEhB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,cAAc;AAAA;AAAA;AAAA;AAKb,MAAM,SAAS,CAAC,SAAkC;AACvD,QAAM,CAAC,OAAO,YAAY,qBAAM,SAAS;AAEzC,SAAO,mDAAC,sBAAD;AAAA,OAAiB;AAAA,IAAM;AAAA,IAAc,UAAU;AAAA,IAAU,aAAa;AAAA;AAAA;",
+  "names": []
+}

package/lib/cjs/components/form/SearchInput/index.js

@@ -0,0 +1,42 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  default: () => SearchInput_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_BaseInput = __toModule(require("../BaseInput"));
+var import_SearchMedium = __toModule(require("@ledgerhq/icons-ui/react/SearchMedium"));
+function SearchInput(props, ref) {
+  const theme = (0, import_styled_components.useTheme)();
+  return /* @__PURE__ */ import_react.default.createElement(import_BaseInput.default, {
+    ref,
+    ...props,
+    renderLeft: /* @__PURE__ */ import_react.default.createElement(import_BaseInput.InputRenderLeftContainer, null, /* @__PURE__ */ import_react.default.createElement(import_SearchMedium.default, {
+      color: props.disabled ? theme.colors.neutral.c50 : theme.colors.neutral.c70
+    }))
+  });
+}
+var SearchInput_default = import_react.default.forwardRef(SearchInput);
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/form/SearchInput/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/SearchInput/index.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport Input, { InputProps, InputRenderLeftContainer } from \"../BaseInput\";\nimport SearchMedium from \"@ledgerhq/icons-ui/react/SearchMedium\";\n\nfunction SearchInput(props: InputProps, ref?: React.ForwardedRef<HTMLInputElement>): JSX.Element {\n  const theme = useTheme();\n\n  return (\n    <Input\n      ref={ref}\n      {...props}\n      renderLeft={\n        <InputRenderLeftContainer>\n          <SearchMedium\n            color={props.disabled ? theme.colors.neutral.c50 : theme.colors.neutral.c70}\n          />\n        </InputRenderLeftContainer>\n      }\n    />\n  );\n}\n\nexport default React.forwardRef(SearchInput);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAyB;AACzB,uBAA4D;AAC5D,0BAAyB;AAEzB,qBAAqB,OAAmB,KAAyD;AAC/F,QAAM,QAAQ;AAEd,SACE,mDAAC,0BAAD;AAAA,IACE;AAAA,OACI;AAAA,IACJ,YACE,mDAAC,2CAAD,MACE,mDAAC,6BAAD;AAAA,MACE,OAAO,MAAM,WAAW,MAAM,OAAO,QAAQ,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAQpF,IAAO,sBAAQ,qBAAM,WAAW;",
+  "names": []
+}

package/lib/cjs/components/form/SelectInput/Control.js

@@ -0,0 +1,55 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  Control: () => Control,
+  getStyles: () => getStyles
+});
+var import_react = __toModule(require("react"));
+var import_react_select = __toModule(require("react-select"));
+var import_BaseInput = __toModule(require("../BaseInput"));
+function getStyles(theme) {
+  return (provided) => ({
+    ...provided,
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    border: 0,
+    padding: `0px ${theme.space[7]}px`,
+    boxShadow: "none",
+    borderRadius: "inherit",
+    background: "transparent"
+  });
+}
+function Control(props) {
+  const { isFocused, selectProps, children } = props;
+  const { isDisabled, error, renderLeft } = selectProps;
+  return /* @__PURE__ */ import_react.default.createElement(import_BaseInput.InputContainer, {
+    disabled: isDisabled,
+    error,
+    focus: isFocused
+  }, /* @__PURE__ */ import_react.default.createElement(import_react_select.components.Control, {
+    ...props
+  }, renderLeft ? renderLeft(props) : null, children));
+}
+//# sourceMappingURL=Control.js.map

package/lib/cjs/components/form/SelectInput/Control.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/SelectInput/Control.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, ControlProps } from \"react-select\";\nimport { DefaultTheme } from \"styled-components\";\nimport { InputContainer } from \"../BaseInput\";\nimport { Props as SelectProps } from \"./index\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(theme: DefaultTheme): NonNullable<StylesConfig<O, M, G>[\"control\"]> {\n  return (provided) => ({\n    ...provided,\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    border: 0,\n    padding: `0px ${theme.space[7]}px`,\n    boxShadow: \"none\",\n    borderRadius: \"inherit\",\n    background: \"transparent\",\n  });\n}\n\nexport function Control<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: ControlProps<O, M, G>): JSX.Element {\n  const { isFocused, selectProps, children } = props;\n\n  const { isDisabled, error, renderLeft } = selectProps as SelectProps<O, M, G>;\n\n  return (\n    <InputContainer disabled={isDisabled} error={error} focus={isFocused}>\n      <components.Control {...props}>\n        {renderLeft ? renderLeft(props) : null}\n        {children}\n      </components.Control>\n    </InputContainer>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAkE;AAElE,uBAA+B;AAGxB,mBAIL,OAAoE;AACpE,SAAO,CAAC,aAAc;AAAA,OACjB;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,OAAO,MAAM,MAAM;AAAA,IAC5B,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA;AAAA;AAIT,iBAIL,OAA2C;AAC3C,QAAM,EAAE,WAAW,aAAa,aAAa;AAE7C,QAAM,EAAE,YAAY,OAAO,eAAe;AAE1C,SACE,mDAAC,iCAAD;AAAA,IAAgB,UAAU;AAAA,IAAY;AAAA,IAAc,OAAO;AAAA,KACzD,mDAAC,+BAAW,SAAZ;AAAA,OAAwB;AAAA,KACrB,aAAa,WAAW,SAAS,MACjC;AAAA;",
+  "names": []
+}

package/lib/cjs/components/form/SelectInput/DropdownIndicator.js

@@ -0,0 +1,54 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  DropdownIndicator: () => DropdownIndicator,
+  getStyles: () => getStyles
+});
+var import_react = __toModule(require("react"));
+var import_react_select = __toModule(require("react-select"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var import_react2 = __toModule(require("@ledgerhq/icons-ui/react"));
+function getStyles() {
+  return (provided) => ({
+    ...provided,
+    padding: 0
+  });
+}
+function DropdownIndicator(props) {
+  const theme = (0, import_styled_components.useTheme)();
+  const { isDisabled } = props.selectProps;
+  const ChevronIcon = props.selectProps.menuIsOpen ? import_react2.ChevronTopMedium : import_react2.ChevronBottomMedium;
+  const color = isDisabled ? theme.colors.neutral.c60 : theme.colors.neutral.c100;
+  return /* @__PURE__ */ import_react.default.createElement(import_react_select.components.DropdownIndicator, {
+    ...props
+  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    as: "div",
+    color,
+    style: { display: "flex" }
+  }, /* @__PURE__ */ import_react.default.createElement(ChevronIcon, {
+    size: 12
+  })));
+}
+//# sourceMappingURL=DropdownIndicator.js.map

package/lib/cjs/components/form/SelectInput/DropdownIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/SelectInput/DropdownIndicator.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, DropdownIndicatorProps } from \"react-select\";\nimport { useTheme } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { ChevronBottomMedium, ChevronTopMedium } from \"@ledgerhq/icons-ui/react\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(): NonNullable<StylesConfig<O, M, G>[\"dropdownIndicator\"]> {\n  return (provided) => ({\n    ...provided,\n    padding: 0,\n  });\n}\n\nexport function DropdownIndicator<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: DropdownIndicatorProps<O, M, G>): JSX.Element {\n  const theme = useTheme();\n  const { isDisabled } = props.selectProps;\n\n  const ChevronIcon = props.selectProps.menuIsOpen ? ChevronTopMedium : ChevronBottomMedium;\n  const color = isDisabled ? theme.colors.neutral.c60 : theme.colors.neutral.c100;\n\n  return (\n    <components.DropdownIndicator {...props}>\n      <Text as=\"div\" color={color} style={{ display: \"flex\" }}>\n        <ChevronIcon size={12} />\n      </Text>\n    </components.DropdownIndicator>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAA4E;AAC5E,+BAAyB;AACzB,kBAAiB;AACjB,oBAAsD;AAE/C,qBAIsD;AAC3D,SAAO,CAAC,aAAc;AAAA,OACjB;AAAA,IACH,SAAS;AAAA;AAAA;AAIN,2BAIL,OAAqD;AACrD,QAAM,QAAQ;AACd,QAAM,EAAE,eAAe,MAAM;AAE7B,QAAM,cAAc,MAAM,YAAY,aAAa,iCAAmB;AACtE,QAAM,QAAQ,aAAa,MAAM,OAAO,QAAQ,MAAM,MAAM,OAAO,QAAQ;AAE3E,SACE,mDAAC,+BAAW,mBAAZ;AAAA,OAAkC;AAAA,KAChC,mDAAC,qBAAD;AAAA,IAAM,IAAG;AAAA,IAAM;AAAA,IAAc,OAAO,EAAE,SAAS;AAAA,KAC7C,mDAAC,aAAD;AAAA,IAAa,MAAM;AAAA;AAAA;",
+  "names": []
+}

package/lib/cjs/components/form/SelectInput/IndicatorsContainer.js

@@ -0,0 +1,38 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  IndicatorsContainer: () => IndicatorsContainer
+});
+var import_react = __toModule(require("react"));
+var import_react_select = __toModule(require("react-select"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+function IndicatorsContainer(props) {
+  const { renderRight } = props.selectProps;
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    alignItems: "center"
+  }, renderRight ? renderRight(props) : null, /* @__PURE__ */ import_react.default.createElement(import_react_select.components.IndicatorsContainer, {
+    ...props
+  }));
+}
+//# sourceMappingURL=IndicatorsContainer.js.map

package/lib/cjs/components/form/SelectInput/IndicatorsContainer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/SelectInput/IndicatorsContainer.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, IndicatorsContainerProps } from \"react-select\";\nimport FlexBox from \"../../layout/Flex\";\nimport { Props as SelectProps } from \"./index\";\n\nexport function IndicatorsContainer<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: IndicatorsContainerProps<O, M, G>): JSX.Element {\n  const { renderRight } = props.selectProps as SelectProps<O, M, G>;\n\n  return (\n    <FlexBox alignItems=\"center\">\n      {renderRight ? renderRight(props) : null}\n      <components.IndicatorsContainer {...props} />\n    </FlexBox>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAgE;AAChE,kBAAoB;AAGb,6BAIL,OAAuD;AACvD,QAAM,EAAE,gBAAgB,MAAM;AAE9B,SACE,mDAAC,qBAAD;AAAA,IAAS,YAAW;AAAA,KACjB,cAAc,YAAY,SAAS,MACpC,mDAAC,+BAAW,qBAAZ;AAAA,OAAoC;AAAA;AAAA;",
+  "names": []
+}

package/lib/cjs/components/form/SelectInput/MenuList.js

@@ -0,0 +1,50 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  MenuList: () => MenuList,
+  getStyles: () => getStyles
+});
+var import_react = __toModule(require("react"));
+var import_react_select = __toModule(require("react-select"));
+function getStyles(theme) {
+  const isLight = theme.colors.type === "light";
+  return (provided) => ({
+    ...provided,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.space[2],
+    padding: theme.space[3],
+    border: `1px solid ${theme.colors.neutral[isLight ? "c20" : "c30"]}`,
+    borderRadius: "8px",
+    boxShadow: `0px 6px 12px rgba(0, 0, 0, ${isLight ? 0.04 : 0.08})`,
+    background: theme.colors.neutral[isLight ? "c00" : "c20"],
+    color: theme.colors.neutral.c80
+  });
+}
+function MenuList(props) {
+  return /* @__PURE__ */ import_react.default.createElement(import_react_select.components.MenuList, {
+    ...props
+  }, props.children);
+}
+//# sourceMappingURL=MenuList.js.map

package/lib/cjs/components/form/SelectInput/MenuList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/SelectInput/MenuList.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, MenuListProps } from \"react-select\";\nimport { DefaultTheme } from \"styled-components\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(theme: DefaultTheme): NonNullable<StylesConfig<O, M, G>[\"menuList\"]> {\n  const isLight = theme.colors.type === \"light\";\n  return (provided) => ({\n    ...provided,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space[2],\n    padding: theme.space[3],\n    border: `1px solid ${theme.colors.neutral[isLight ? \"c20\" : \"c30\"]}`,\n    borderRadius: \"8px\",\n    boxShadow: `0px 6px 12px rgba(0, 0, 0, ${isLight ? 0.04 : 0.08})`,\n    background: theme.colors.neutral[isLight ? \"c00\" : \"c20\"],\n    color: theme.colors.neutral.c80,\n  });\n}\n\nexport function MenuList<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: MenuListProps<O, M, G>): JSX.Element {\n  return <components.MenuList {...props}>{props.children}</components.MenuList>;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAmE;AAG5D,mBAIL,OAAqE;AACrE,QAAM,UAAU,MAAM,OAAO,SAAS;AACtC,SAAO,CAAC,aAAc;AAAA,OACjB;AAAA,IACH,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,IACjB,SAAS,MAAM,MAAM;AAAA,IACrB,QAAQ,aAAa,MAAM,OAAO,QAAQ,UAAU,QAAQ;AAAA,IAC5D,cAAc;AAAA,IACd,WAAW,8BAA8B,UAAU,OAAO;AAAA,IAC1D,YAAY,MAAM,OAAO,QAAQ,UAAU,QAAQ;AAAA,IACnD,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIzB,kBAIL,OAA4C;AAC5C,SAAO,mDAAC,+BAAW,UAAZ;AAAA,OAAyB;AAAA,KAAQ,MAAM;AAAA;",
+  "names": []
+}