npm - @ledgerhq/react-ui - Versions diffs - 0.37.0 → 0.38.0-nightly.0 - Mend

@ledgerhq/react-ui 0.37.0 → 0.38.0-nightly.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/lib/cjs/components/form/Radio/RadioElement.js CHANGED Viewed

@@ -196,7 +196,7 @@ const Element = ({
   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 = (0, import_react.useMemo)(() => context.currentValue === value, [context.currentValue]);
+  const isChecked = (0, import_react.useMemo)(() => context.currentValue == value, [context.currentValue, value]);
   const handleChange = (event) => {
     context.onChange(event.target.value);
   };

package/lib/cjs/components/form/Radio/RadioElement.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/Radio/RadioElement.tsx"],
-  "sourcesContent": ["import React, { InputHTMLAttributes, useContext, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { rgba } from \"../../../styles/helpers\";\nimport Text from \"../../asorted/Text\";\nimport { RadioContext } from \"./index\";\n\nconst Label = styled(Text)`\n  color: var(--ledger-ui-checkbox-color, ${p => p.theme.colors.neutral.c100});\n  width: 266px;\n`;\n\nconst Input = styled.input`\n  --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c50};\n  --ledger-ui-checkbox-size: 1.25rem;\n\n  position: relative;\n  appearance: none;\n  width: var(--ledger-ui-checkbox-size);\n  height: var(--ledger-ui-checkbox-size);\n  flex-shrink: 0;\n  border-radius: ${p => `${p.theme.radii[1]}px`};\n  border: 1px solid var(--ledger-ui-checkbox-color);\n  cursor: pointer;\n\n  &:checked::before {\n    position: absolute;\n    display: block;\n    content: \" \";\n    background-color: var(--ledger-ui-checkbox-color);\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    margin: auto;\n    border-radius: 2px;\n    width: calc(var(--ledger-ui-checkbox-size) / 2);\n    height: calc(var(--ledger-ui-checkbox-size) / 2);\n  }\n\n  &[data-variant=\"default\"] {\n    :hover {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c90};\n    }\n    :active {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c100};\n    }\n    :checked,\n    :focus {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c80};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.primary.c60, 0.48)};\n    }\n  }\n\n  &[data-variant=\"main\"] {\n    :hover {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c90};\n    }\n    :active,\n    :checked,\n    :focus {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c100};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.neutral.c60, 0.48)};\n    }\n  }\n\n  &[data-variant=\"success\"] {\n    :hover,\n    :checked:not([disabled]),\n    :checked:not([disabled]) + ${Label}, :focus {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.success.c50};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.success.c50, 0.48)};\n    }\n  }\n\n  &[data-variant=\"error\"] {\n    :hover,\n    :checked:not([disabled]),\n    :checked:not([disabled]) + ${Label}, :focus {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.error.c50};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.error.c50, 0.48)};\n    }\n  }\n\n  &[data-variant]:disabled {\n    --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c40};\n    cursor: unset;\n    background-color: ${p => p.theme.colors.neutral.c30};\n  }\n`;\n\nconst outlinedCSS = css`\n  padding: 20px;\n  border: 1px solid ${p => p.theme.colors.neutral.c50};\n  border-radius: ${p => p.theme.radii[2]}px;\n  &[data-variant=\"default\"] {\n    :hover {\n      border-color: ${p => p.theme.colors.primary.c90};\n    }\n    &[data-checked] :active {\n      border-color: ${p => p.theme.colors.primary.c100};\n    }\n    :focus {\n      border-color: ${p => p.theme.colors.primary.c80};\n    }\n  }\n\n  &[data-variant=\"main\"] {\n    :hover {\n      border-color: ${p => p.theme.colors.neutral.c90};\n    }\n    &[data-checked],\n    :active :focus {\n      border-color: ${p => p.theme.colors.neutral.c100};\n    }\n  }\n\n  &[data-variant=\"success\"] {\n    &[data-checked]:not([disabled]) {\n      border-color: ${p => p.theme.colors.success.c50};\n    }\n    :hover {\n      border-color: ${p => p.theme.colors.success.c50};\n    }\n  }\n\n  &[data-variant=\"error\"] {\n    &[data-checked]:not([disabled]) {\n      border-color: ${p => p.theme.colors.error.c50};\n    }\n    :hover {\n      border-color: ${p => p.theme.colors.error.c50};\n    }\n  }\n\n  &[data-variant]:disabled {\n    border-color: ${p => p.theme.colors.neutral.c40};\n    cursor: unset;\n  }\n`;\n\nconst RadioElement = styled.label.attrs({ tabIndex: -1 })<{\n  outlined?: boolean;\n}>`\n  display: inline-flex;\n  column-gap: 0.75rem;\n  align-items: center;\n  cursor: pointer;\n  &[data-variant]:disabled {\n    cursor: unset;\n  }\n  ${p => p.outlined && outlinedCSS}\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioElementProps = InputAttributes & {\n  variant?: \"default\" | \"main\" | \"success\" | \"error\";\n  label: string;\n  outlined?: boolean;\n};\n\nconst Element = ({\n  label,\n  value,\n  disabled,\n  outlined,\n  variant = \"default\",\n  ...props\n}: RadioElementProps): JSX.Element => {\n  const context = useContext(RadioContext);\n  if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const isChecked = useMemo(() => context.currentValue === value, [context.currentValue]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    context.onChange(event.target.value);\n  };\n\n  return (\n    <RadioElement\n      data-variant={variant}\n      {...(isChecked ? { \"data-checked\": true } : {})}\n      outlined={outlined}\n    >\n      <Input\n        type=\"radio\"\n        data-variant={variant}\n        checked={isChecked}\n        disabled={disabled}\n        onChange={handleChange}\n        value={value}\n        name={context.name}\n        {...props}\n      />\n      <Label variant=\"paragraph\">{label}</Label>\n    </RadioElement>\n  );\n};\n\nElement.displayName = \"Radio.Element\"; // For easy identification in the React devtools & in storybook\nElement.Label = Label;\n\nexport default Element;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { InputHTMLAttributes, useContext, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { rgba } from \"../../../styles/helpers\";\nimport Text from \"../../asorted/Text\";\nimport { RadioContext } from \"./index\";\n\nconst Label = styled(Text)`\n  color: var(--ledger-ui-checkbox-color, ${p => p.theme.colors.neutral.c100});\n  width: 266px;\n`;\n\nconst Input = styled.input`\n  --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c50};\n  --ledger-ui-checkbox-size: 1.25rem;\n\n  position: relative;\n  appearance: none;\n  width: var(--ledger-ui-checkbox-size);\n  height: var(--ledger-ui-checkbox-size);\n  flex-shrink: 0;\n  border-radius: ${p => `${p.theme.radii[1]}px`};\n  border: 1px solid var(--ledger-ui-checkbox-color);\n  cursor: pointer;\n\n  &:checked::before {\n    position: absolute;\n    display: block;\n    content: \" \";\n    background-color: var(--ledger-ui-checkbox-color);\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    margin: auto;\n    border-radius: 2px;\n    width: calc(var(--ledger-ui-checkbox-size) / 2);\n    height: calc(var(--ledger-ui-checkbox-size) / 2);\n  }\n\n  &[data-variant=\"default\"] {\n    :hover {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c90};\n    }\n    :active {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c100};\n    }\n    :checked,\n    :focus {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c80};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.primary.c60, 0.48)};\n    }\n  }\n\n  &[data-variant=\"main\"] {\n    :hover {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c90};\n    }\n    :active,\n    :checked,\n    :focus {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c100};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.neutral.c60, 0.48)};\n    }\n  }\n\n  &[data-variant=\"success\"] {\n    :hover,\n    :checked:not([disabled]),\n    :checked:not([disabled]) + ${Label}, :focus {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.success.c50};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.success.c50, 0.48)};\n    }\n  }\n\n  &[data-variant=\"error\"] {\n    :hover,\n    :checked:not([disabled]),\n    :checked:not([disabled]) + ${Label}, :focus {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.error.c50};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.error.c50, 0.48)};\n    }\n  }\n\n  &[data-variant]:disabled {\n    --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c40};\n    cursor: unset;\n    background-color: ${p => p.theme.colors.neutral.c30};\n  }\n`;\n\nconst outlinedCSS = css`\n  padding: 20px;\n  border: 1px solid ${p => p.theme.colors.neutral.c50};\n  border-radius: ${p => p.theme.radii[2]}px;\n  &[data-variant=\"default\"] {\n    :hover {\n      border-color: ${p => p.theme.colors.primary.c90};\n    }\n    &[data-checked] :active {\n      border-color: ${p => p.theme.colors.primary.c100};\n    }\n    :focus {\n      border-color: ${p => p.theme.colors.primary.c80};\n    }\n  }\n\n  &[data-variant=\"main\"] {\n    :hover {\n      border-color: ${p => p.theme.colors.neutral.c90};\n    }\n    &[data-checked],\n    :active :focus {\n      border-color: ${p => p.theme.colors.neutral.c100};\n    }\n  }\n\n  &[data-variant=\"success\"] {\n    &[data-checked]:not([disabled]) {\n      border-color: ${p => p.theme.colors.success.c50};\n    }\n    :hover {\n      border-color: ${p => p.theme.colors.success.c50};\n    }\n  }\n\n  &[data-variant=\"error\"] {\n    &[data-checked]:not([disabled]) {\n      border-color: ${p => p.theme.colors.error.c50};\n    }\n    :hover {\n      border-color: ${p => p.theme.colors.error.c50};\n    }\n  }\n\n  &[data-variant]:disabled {\n    border-color: ${p => p.theme.colors.neutral.c40};\n    cursor: unset;\n  }\n`;\n\nconst RadioElement = styled.label.attrs({ tabIndex: -1 })<{\n  outlined?: boolean;\n}>`\n  display: inline-flex;\n  column-gap: 0.75rem;\n  align-items: center;\n  cursor: pointer;\n  &[data-variant]:disabled {\n    cursor: unset;\n  }\n  ${p => p.outlined && outlinedCSS}\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioElementProps = InputAttributes & {\n  variant?: \"default\" | \"main\" | \"success\" | \"error\";\n  label: string;\n  outlined?: boolean;\n};\n\nconst Element = ({\n  label,\n  value,\n  disabled,\n  outlined,\n  variant = \"default\",\n  ...props\n}: RadioElementProps): 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 = useMemo(() => context.currentValue == value, [context.currentValue, value]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    context.onChange(event.target.value);\n  };\n\n  return (\n    <RadioElement\n      data-variant={variant}\n      {...(isChecked ? { \"data-checked\": true } : {})}\n      outlined={outlined}\n    >\n      <Input\n        type=\"radio\"\n        data-variant={variant}\n        checked={isChecked}\n        disabled={disabled}\n        onChange={handleChange}\n        value={value}\n        name={context.name}\n        {...props}\n      />\n      <Label variant=\"paragraph\">{label}</Label>\n    </RadioElement>\n  );\n};\n\nElement.displayName = \"Radio.Element\"; // For easy identification in the React devtools & in storybook\nElement.Label = Label;\n\nexport default Element;\n"],
+  "mappings": "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",
   "names": ["styled", "Text", "React"]
 }

package/lib/cjs/components/tabs/Chip/index.js CHANGED Viewed

@@ -56,6 +56,9 @@ const Item = (0, import_styled_components.default)(import_Flex.default).attrs({
 `;
 function BarTabs({ children, onTabChange, initialActiveIndex }) {
   const [activeIndex, setActiveIndex] = (0, import_react.useState)(initialActiveIndex);
+  (0, import_react.useEffect)(() => {
+    setActiveIndex(initialActiveIndex);
+  }, [initialActiveIndex]);
   return /* @__PURE__ */ import_react.default.createElement(Container, null, import_react.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ import_react.default.createElement(
     Item,
     {

package/lib/cjs/components/tabs/Chip/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/tabs/Chip/index.tsx"],
-  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n  /**\n   * An optional callback that will be called when the active tab changes.\n   */\n  onTabChange?: (activeIndex: number) => void;\n  /**\n   * The tab index to mark as active when rendering for the first time.\n   * If omitted, then initially no tabs will be selected.\n   */\n  initialActiveIndex?: number;\n}>;\ntype ItemProps = {\n  active: boolean;\n};\n\nconst Container = styled(Flex).attrs({\n  justifyContent: \"space-between\",\n  flex: 1,\n  columnGap: 1,\n})`\n  border: 1px solid ${p => p.theme.colors.opacityDefault.c10};\n  border-radius: 12px;\n  padding: 4px;\n`;\n\nconst Item = styled(Flex).attrs({\n  flex: 1,\n  justifyContent: \"center\",\n  alignItems: \"center\",\n})<ItemProps>`\n  cursor: pointer;\n  padding: 8px 12px 8px 12px;\n  border-radius: 10px;\n  color: ${p => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c50)};\n  background-color: ${p => (p.active ? p.theme.colors.opacityDefault.c10 : \"unset\")};\n`;\n\nexport default function BarTabs({ children, onTabChange, initialActiveIndex }: Props): JSX.Element {\n  const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n  return (\n    <Container>\n      {React.Children.toArray(children).map((child, index) => (\n        <Item\n          key={index}\n          active={index === activeIndex}\n          onClick={() => {\n            setActiveIndex(index);\n            onTabChange && onTabChange(index);\n          }}\n        >\n          {child}\n        </Item>\n      ))}\n    </Container>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EACnC,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,WAAW;AACb,CAAC;AAAA,sBACqB,OAAK,EAAE,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAK5D,MAAM,WAAO,yBAAAD,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AACd,CAAC;AAAA;AAAA;AAAA;AAAA,WAIU,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,OAAO,EAAE,MAAM,OAAO,QAAQ,GAAI;AAAA,sBAC/D,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,eAAe,MAAM,OAAQ;AAAA;AAGpE,SAAR,QAAyB,EAAE,UAAU,aAAa,mBAAmB,GAAuB;AACjG,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,kBAAkB;AACjE,SACE,6BAAAC,QAAA,cAAC,iBACE,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,UAC5C,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ,UAAU;AAAA,MAClB,SAAS,MAAM;AACb,uBAAe,KAAK;AACpB,uBAAe,YAAY,KAAK;AAAA,MAClC;AAAA;AAAA,IAEC;AAAA,EACH,CACD,CACH;AAEJ;",
+  "sourcesContent": ["import React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n  /**\n   * An optional callback that will be called when the active tab changes.\n   */\n  onTabChange?: (activeIndex: number) => void;\n  /**\n   * The tab index to mark as active when rendering for the first time.\n   * If omitted, then initially no tabs will be selected.\n   */\n  initialActiveIndex?: number;\n}>;\ntype ItemProps = {\n  active: boolean;\n};\n\nconst Container = styled(Flex).attrs({\n  justifyContent: \"space-between\",\n  flex: 1,\n  columnGap: 1,\n})`\n  border: 1px solid ${p => p.theme.colors.opacityDefault.c10};\n  border-radius: 12px;\n  padding: 4px;\n`;\n\nconst Item = styled(Flex).attrs({\n  flex: 1,\n  justifyContent: \"center\",\n  alignItems: \"center\",\n})<ItemProps>`\n  cursor: pointer;\n  padding: 8px 12px 8px 12px;\n  border-radius: 10px;\n  color: ${p => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c50)};\n  background-color: ${p => (p.active ? p.theme.colors.opacityDefault.c10 : \"unset\")};\n`;\n\nexport default function BarTabs({ children, onTabChange, initialActiveIndex }: Props): JSX.Element {\n  const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n\n  useEffect(() => {\n    setActiveIndex(initialActiveIndex);\n  }, [initialActiveIndex]);\n\n  return (\n    <Container>\n      {React.Children.toArray(children).map((child, index) => (\n        <Item\n          key={index}\n          active={index === activeIndex}\n          onClick={() => {\n            setActiveIndex(index);\n            onTabChange && onTabChange(index);\n          }}\n        >\n          {child}\n        </Item>\n      ))}\n    </Container>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAC3C,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EACnC,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,WAAW;AACb,CAAC;AAAA,sBACqB,OAAK,EAAE,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAK5D,MAAM,WAAO,yBAAAD,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AACd,CAAC;AAAA;AAAA;AAAA;AAAA,WAIU,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,OAAO,EAAE,MAAM,OAAO,QAAQ,GAAI;AAAA,sBAC/D,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,eAAe,MAAM,OAAQ;AAAA;AAGpE,SAAR,QAAyB,EAAE,UAAU,aAAa,mBAAmB,GAAuB;AACjG,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,kBAAkB;AAEjE,8BAAU,MAAM;AACd,mBAAe,kBAAkB;AAAA,EACnC,GAAG,CAAC,kBAAkB,CAAC;AAEvB,SACE,6BAAAC,QAAA,cAAC,iBACE,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,UAC5C,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ,UAAU;AAAA,MAClB,SAAS,MAAM;AACb,uBAAe,KAAK;AACpB,uBAAe,YAAY,KAAK;AAAA,MAClC;AAAA;AAAA,IAEC;AAAA,EACH,CACD,CACH;AAEJ;",
   "names": ["styled", "Flex", "React"]
 }

package/lib/cjs/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.js ADDED Viewed

@@ -0,0 +1,85 @@
+"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 MarketPercentIndicator_exports = {};
+__export(MarketPercentIndicator_exports, {
+  MarketPercentIndicator: () => MarketPercentIndicator
+});
+module.exports = __toCommonJS(MarketPercentIndicator_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("../../../components");
+var import_styled_components = __toESM(require("styled-components"));
+var import_libs = require("../../libs");
+const Wrapper = (0, import_styled_components.default)(import_components.Flex)`
+  ${(0, import_libs.withTokens)(
+  "colors-surface-status-success-default",
+  "colors-surface-status-success-strong-default",
+  "colors-surface-status-error-default",
+  "colors-surface-status-error-strong-default",
+  "colors-surface-transparent-hover",
+  "colors-content-default-default"
+)}
+`;
+const getPercentageDisplay = (percent) => {
+  if (percent > 0) {
+    return {
+      backgroundColor: "var(--colors-surface-status-success-default)",
+      color: "var(--colors-surface-status-success-strong-default)",
+      text: `+${percent}%`
+    };
+  }
+  if (percent < 0) {
+    return {
+      backgroundColor: "var(--colors-surface-status-error-default)",
+      color: "var(--colors-surface-status-error-strong-default)",
+      text: `-${Math.abs(percent)}%`
+    };
+  }
+  return {
+    backgroundColor: "var(--colors-surface-transparent-hover)",
+    color: "var(--colors-content-default-default)",
+    text: `${percent}%`
+  };
+};
+const MarketPercentIndicator = ({ percent }) => {
+  const percentageDisplay = getPercentageDisplay(percent);
+  return /* @__PURE__ */ import_react.default.createElement(
+    Wrapper,
+    {
+      "data-testid": "market-percent-indicator",
+      flexDirection: "column",
+      alignItems: "flex-end",
+      width: "fit-content",
+      p: "4px",
+      borderRadius: "4px",
+      backgroundColor: percentageDisplay.backgroundColor
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_components.Text, { color: percentageDisplay.color, fontSize: "12px" }, percentageDisplay.text)
+  );
+};
+//# sourceMappingURL=MarketPercentIndicator.js.map

package/lib/cjs/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { Flex, Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\nconst Wrapper = styled(Flex)`\n  ${withTokens(\n    \"colors-surface-status-success-default\",\n    \"colors-surface-status-success-strong-default\",\n    \"colors-surface-status-error-default\",\n    \"colors-surface-status-error-strong-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-content-default-default\",\n  )}\n`;\n\nconst getPercentageDisplay = (percent: number) => {\n  if (percent > 0) {\n    return {\n      backgroundColor: \"var(--colors-surface-status-success-default)\",\n      color: \"var(--colors-surface-status-success-strong-default)\",\n      text: `+${percent}%`,\n    };\n  }\n  if (percent < 0) {\n    return {\n      backgroundColor: \"var(--colors-surface-status-error-default)\",\n      color: \"var(--colors-surface-status-error-strong-default)\",\n      text: `-${Math.abs(percent)}%`,\n    };\n  }\n  return {\n    backgroundColor: \"var(--colors-surface-transparent-hover)\",\n    color: \"var(--colors-content-default-default)\",\n    text: `${percent}%`,\n  };\n};\n\nexport const MarketPercentIndicator = ({ percent }: { percent: number }) => {\n  const percentageDisplay = getPercentageDisplay(percent);\n\n  return (\n    <Wrapper\n      data-testid=\"market-percent-indicator\"\n      flexDirection=\"column\"\n      alignItems=\"flex-end\"\n      width=\"fit-content\"\n      p=\"4px\"\n      borderRadius=\"4px\"\n      backgroundColor={percentageDisplay.backgroundColor}\n    >\n      <Text color={percentageDisplay.color} fontSize=\"12px\">\n        {percentageDisplay.text}\n      </Text>\n    </Wrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAA2B;AAC3B,+BAAmB;AACnB,kBAA2B;AAE3B,MAAM,cAAU,yBAAAA,SAAO,sBAAI;AAAA,QACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAGH,MAAM,uBAAuB,CAAC,YAAoB;AAChD,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,MAAM,IAAI,OAAO;AAAA,IACnB;AAAA,EACF;AACA,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,MAAM,IAAI,KAAK,IAAI,OAAO,CAAC;AAAA,IAC7B;AAAA,EACF;AACA,SAAO;AAAA,IACL,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,MAAM,GAAG,OAAO;AAAA,EAClB;AACF;AAEO,MAAM,yBAAyB,CAAC,EAAE,QAAQ,MAA2B;AAC1E,QAAM,oBAAoB,qBAAqB,OAAO;AAEtD,SACE,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,eAAc;AAAA,MACd,YAAW;AAAA,MACX,OAAM;AAAA,MACN,GAAE;AAAA,MACF,cAAa;AAAA,MACb,iBAAiB,kBAAkB;AAAA;AAAA,IAEnC,6BAAAA,QAAA,cAAC,0BAAK,OAAO,kBAAkB,OAAO,UAAS,UAC5C,kBAAkB,IACrB;AAAA,EACF;AAEJ;",
+  "names": ["styled", "React"]
+}

package/lib/cjs/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.stories.js ADDED Viewed

@@ -0,0 +1,47 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MarketPercentIndicator_stories_exports = {};
+__export(MarketPercentIndicator_stories_exports, {
+  Negative: () => Negative,
+  Positive: () => Positive,
+  TestMarketPercentIndicator: () => TestMarketPercentIndicator,
+  Zero: () => Zero,
+  default: () => MarketPercentIndicator_stories_default
+});
+module.exports = __toCommonJS(MarketPercentIndicator_stories_exports);
+var import_MarketPercentIndicator = require("./MarketPercentIndicator");
+var import_test = require("@storybook/test");
+const meta = {
+  component: import_MarketPercentIndicator.MarketPercentIndicator,
+  title: "PreLdls/Components/MarketPercentIndicator",
+  tags: ["autodocs"],
+  args: { percent: 30 }
+};
+var MarketPercentIndicator_stories_default = meta;
+const Positive = { args: { percent: 30 } };
+const Negative = { args: { percent: -30 } };
+const Zero = { args: { percent: 0 } };
+const TestMarketPercentIndicator = {
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const input = canvas.getByTestId("market-percent-indicator");
+    await (0, import_test.expect)(input).toHaveTextContent("+30%");
+  }
+};
+//# sourceMappingURL=MarketPercentIndicator.stories.js.map

package/lib/cjs/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.stories.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.stories.ts"],
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { MarketPercentIndicator } from \"./MarketPercentIndicator\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof MarketPercentIndicator> = {\n  component: MarketPercentIndicator,\n  title: \"PreLdls/Components/MarketPercentIndicator\",\n  tags: [\"autodocs\"],\n  args: { percent: 30 },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof MarketPercentIndicator>;\n\nexport const Positive: Story = { args: { percent: 30 } };\nexport const Negative: Story = { args: { percent: -30 } };\nexport const Zero: Story = { args: { percent: 0 } };\n\nexport const TestMarketPercentIndicator: Story = {\n  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {\n    const canvas = within(canvasElement);\n    const input = canvas.getByTestId(\"market-percent-indicator\");\n    await expect(input).toHaveTextContent(\"+30%\");\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oCAAuC;AACvC,kBAA+B;AAE/B,MAAM,OAA4C;AAAA,EAChD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,SAAS,GAAG;AACtB;AACA,IAAO,yCAAQ;AAIR,MAAM,WAAkB,EAAE,MAAM,EAAE,SAAS,GAAG,EAAE;AAChD,MAAM,WAAkB,EAAE,MAAM,EAAE,SAAS,IAAI,EAAE;AACjD,MAAM,OAAc,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;AAE3C,MAAM,6BAAoC;AAAA,EAC/C,MAAM,OAAO,EAAE,cAAc,MAAsC;AACjE,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,QAAQ,OAAO,YAAY,0BAA0B;AAC3D,cAAM,oBAAO,KAAK,EAAE,kBAAkB,MAAM;AAAA,EAC9C;AACF;",
+  "names": []
+}

package/lib/cjs/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.js ADDED Viewed

@@ -0,0 +1,77 @@
+"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 MarketPriceIndicator_exports = {};
+__export(MarketPriceIndicator_exports, {
+  MarketPriceIndicator: () => MarketPriceIndicator
+});
+module.exports = __toCommonJS(MarketPriceIndicator_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("../../../components");
+var import_styled_components = __toESM(require("styled-components"));
+var import_libs = require("../../libs");
+const Wrapper = (0, import_styled_components.default)(import_components.Flex)`
+  ${(0, import_libs.withTokens)(
+  "colors-surface-status-success-strong-default",
+  "colors-surface-status-error-strong-default",
+  "colors-content-default-default"
+)}
+`;
+const getPercentageDisplay = (percent) => {
+  if (percent > 0) {
+    return {
+      color: "var(--colors-surface-status-success-strong-default)",
+      text: `+${percent}%`
+    };
+  }
+  if (percent < 0) {
+    return {
+      color: "var(--colors-surface-status-error-strong-default)",
+      text: `-${percent}%`
+    };
+  }
+  return {
+    color: "var(--colors-content-default-default)",
+    text: `${percent}%`
+  };
+};
+const MarketPriceIndicator = ({ percent, price }) => {
+  const percentageDisplay = getPercentageDisplay(percent);
+  return /* @__PURE__ */ import_react.default.createElement(
+    Wrapper,
+    {
+      "data-testid": "market-price-indicator",
+      flexDirection: "column",
+      alignItems: "flex-end",
+      width: "fit-content"
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_components.Text, { variant: "body", fontWeight: "semiBold", mb: "4px" }, price),
+    /* @__PURE__ */ import_react.default.createElement(import_components.Text, { color: percentageDisplay.color, fontSize: "12px" }, percentageDisplay.text)
+  );
+};
+//# sourceMappingURL=MarketPriceIndicator.js.map

package/lib/cjs/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { Flex, Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\nconst Wrapper = styled(Flex)`\n  ${withTokens(\n    \"colors-surface-status-success-strong-default\",\n    \"colors-surface-status-error-strong-default\",\n    \"colors-content-default-default\",\n  )}\n`;\n\nconst getPercentageDisplay = (percent: number) => {\n  if (percent > 0) {\n    return {\n      color: \"var(--colors-surface-status-success-strong-default)\",\n      text: `+${percent}%`,\n    };\n  }\n  if (percent < 0) {\n    return {\n      color: \"var(--colors-surface-status-error-strong-default)\",\n      text: `-${percent}%`,\n    };\n  }\n  return {\n    color: \"var(--colors-content-default-default)\",\n    text: `${percent}%`,\n  };\n};\n\nexport const MarketPriceIndicator = ({ percent, price }: { percent: number; price: string }) => {\n  const percentageDisplay = getPercentageDisplay(percent);\n\n  return (\n    <Wrapper\n      data-testid=\"market-price-indicator\"\n      flexDirection=\"column\"\n      alignItems=\"flex-end\"\n      width=\"fit-content\"\n    >\n      <Text variant=\"body\" fontWeight=\"semiBold\" mb=\"4px\">\n        {price}\n      </Text>\n      <Text color={percentageDisplay.color} fontSize=\"12px\">\n        {percentageDisplay.text}\n      </Text>\n    </Wrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAA2B;AAC3B,+BAAmB;AACnB,kBAA2B;AAE3B,MAAM,cAAU,yBAAAA,SAAO,sBAAI;AAAA,QACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAGH,MAAM,uBAAuB,CAAC,YAAoB;AAChD,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,MACL,OAAO;AAAA,MACP,MAAM,IAAI,OAAO;AAAA,IACnB;AAAA,EACF;AACA,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,MACL,OAAO;AAAA,MACP,MAAM,IAAI,OAAO;AAAA,IACnB;AAAA,EACF;AACA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,MAAM,GAAG,OAAO;AAAA,EAClB;AACF;AAEO,MAAM,uBAAuB,CAAC,EAAE,SAAS,MAAM,MAA0C;AAC9F,QAAM,oBAAoB,qBAAqB,OAAO;AAEtD,SACE,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,eAAc;AAAA,MACd,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEN,6BAAAA,QAAA,cAAC,0BAAK,SAAQ,QAAO,YAAW,YAAW,IAAG,SAC3C,KACH;AAAA,IACA,6BAAAA,QAAA,cAAC,0BAAK,OAAO,kBAAkB,OAAO,UAAS,UAC5C,kBAAkB,IACrB;AAAA,EACF;AAEJ;",
+  "names": ["styled", "React"]
+}

package/lib/cjs/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.stories.js ADDED Viewed

@@ -0,0 +1,47 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MarketPriceIndicator_stories_exports = {};
+__export(MarketPriceIndicator_stories_exports, {
+  Negative: () => Negative,
+  Positive: () => Positive,
+  TestMarketPriceIndicator: () => TestMarketPriceIndicator,
+  Zero: () => Zero,
+  default: () => MarketPriceIndicator_stories_default
+});
+module.exports = __toCommonJS(MarketPriceIndicator_stories_exports);
+var import_MarketPriceIndicator = require("./MarketPriceIndicator");
+var import_test = require("@storybook/test");
+const meta = {
+  component: import_MarketPriceIndicator.MarketPriceIndicator,
+  title: "PreLdls/Components/MarketPriceIndicator",
+  tags: ["autodocs"],
+  args: { percent: 30, price: "$100,000.00" }
+};
+var MarketPriceIndicator_stories_default = meta;
+const Positive = { args: { percent: 30, price: "$100,000.00" } };
+const Negative = { args: { percent: -30, price: "$100,000.00" } };
+const Zero = { args: { percent: 0, price: "$100,000.00" } };
+const TestMarketPriceIndicator = {
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const input = canvas.getByTestId("market-price-indicator");
+    await (0, import_test.expect)(input).toHaveTextContent("$100,000.00");
+  }
+};
+//# sourceMappingURL=MarketPriceIndicator.stories.js.map

package/lib/cjs/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.stories.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.stories.ts"],
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { MarketPriceIndicator } from \"./MarketPriceIndicator\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof MarketPriceIndicator> = {\n  component: MarketPriceIndicator,\n  title: \"PreLdls/Components/MarketPriceIndicator\",\n  tags: [\"autodocs\"],\n  args: { percent: 30, price: \"$100,000.00\" },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof MarketPriceIndicator>;\n\nexport const Positive: Story = { args: { percent: 30, price: \"$100,000.00\" } };\nexport const Negative: Story = { args: { percent: -30, price: \"$100,000.00\" } };\nexport const Zero: Story = { args: { percent: 0, price: \"$100,000.00\" } };\n\nexport const TestMarketPriceIndicator: Story = {\n  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {\n    const canvas = within(canvasElement);\n    const input = canvas.getByTestId(\"market-price-indicator\");\n    await expect(input).toHaveTextContent(\"$100,000.00\");\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kCAAqC;AACrC,kBAA+B;AAE/B,MAAM,OAA0C;AAAA,EAC9C,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,SAAS,IAAI,OAAO,cAAc;AAC5C;AACA,IAAO,uCAAQ;AAIR,MAAM,WAAkB,EAAE,MAAM,EAAE,SAAS,IAAI,OAAO,cAAc,EAAE;AACtE,MAAM,WAAkB,EAAE,MAAM,EAAE,SAAS,KAAK,OAAO,cAAc,EAAE;AACvE,MAAM,OAAc,EAAE,MAAM,EAAE,SAAS,GAAG,OAAO,cAAc,EAAE;AAEjE,MAAM,2BAAkC;AAAA,EAC7C,MAAM,OAAO,EAAE,cAAc,MAAsC;AACjE,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,QAAQ,OAAO,YAAY,wBAAwB;AACzD,cAAM,oBAAO,KAAK,EAAE,kBAAkB,aAAa;AAAA,EACrD;AACF;",
+  "names": []
+}

package/lib/cjs/pre-ldls/components/Search/Search.js CHANGED Viewed

@@ -35,9 +35,24 @@ var import_react = __toESM(require("react"));
 var import_assets = require("../../../assets");
 var import_hooks = require("../../hooks");
 var import__ = require("..");
-function Search({ onDebouncedChange, debounceTime = 500, onChange, ...props }) {
+function Search({
+  onDebouncedChange,
+  debounceTime = 500,
+  onChange,
+  autoFocus = true,
+  ...props
+}) {
   const initialValue = props.value ?? props.defaultValue ?? "";
   const prevValue = (0, import_react.useRef)(String(initialValue));
+  const searchInputRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (autoFocus && searchInputRef.current) {
+      setTimeout(() => {
+        var _a;
+        (_a = searchInputRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+      }, 0);
+    }
+  }, [autoFocus]);
   const handleDebouncedChange = (0, import_hooks.useDebouncedCallback)(
     (0, import_react.useMemo)(() => {
       if (!onDebouncedChange)
@@ -58,6 +73,14 @@ function Search({ onDebouncedChange, debounceTime = 500, onChange, ...props }) {
       handleDebouncedChange == null ? void 0 : handleDebouncedChange(event);
     };
   }, [handleDebouncedChange, onChange]);
-  return /* @__PURE__ */ import_react.default.createElement(import__.Input, { ...props, icon: /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.Search, { size: "S" }), onChange: handleChange });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import__.Input,
+    {
+      ...props,
+      ref: searchInputRef,
+      icon: /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.Search, { size: "S" }),
+      onChange: handleChange
+    }
+  );
 }
 //# sourceMappingURL=Search.js.map

package/lib/cjs/pre-ldls/components/Search/Search.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/Search/Search.tsx"],
-  "sourcesContent": ["import React, { ChangeEvent, useMemo, useRef } from \"react\";\nimport { Icons } from \"../../../assets\";\nimport { useDebouncedCallback } from \"../../hooks\";\nimport { Input } from \"..\";\n\ntype InputProps = React.ComponentProps<\"input\">;\ntype Props = Readonly<\n  InputProps & {\n    onDebouncedChange?: (current: string, prev: string) => void;\n    debounceTime?: number;\n  }\n>;\n\nexport function Search({ onDebouncedChange, debounceTime = 500, onChange, ...props }: Props) {\n  const initialValue = props.value ?? props.defaultValue ?? \"\";\n  const prevValue = useRef(String(initialValue));\n\n  const handleDebouncedChange = useDebouncedCallback(\n    useMemo(() => {\n      if (!onDebouncedChange) return;\n      return (event: ChangeEvent<HTMLInputElement>) => {\n        const current = event.target.value;\n        onDebouncedChange(current, prevValue.current);\n        prevValue.current = current;\n      };\n    }, [onDebouncedChange]),\n    debounceTime,\n  );\n\n  const handleChange = useMemo(() => {\n    if (!handleDebouncedChange && !onChange) return;\n    return (event: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event);\n      handleDebouncedChange?.(event);\n    };\n  }, [handleDebouncedChange, onChange]);\n\n  return <Input {...props} icon={<Icons.Search size=\"S\" />} onChange={handleChange} />;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAoD;AACpD,oBAAsB;AACtB,mBAAqC;AACrC,eAAsB;AAUf,SAAS,OAAO,EAAE,mBAAmB,eAAe,KAAK,UAAU,GAAG,MAAM,GAAU;AAC3F,QAAM,eAAe,MAAM,SAAS,MAAM,gBAAgB;AAC1D,QAAM,gBAAY,qBAAO,OAAO,YAAY,CAAC;AAE7C,QAAM,4BAAwB;AAAA,QAC5B,sBAAQ,MAAM;AACZ,UAAI,CAAC;AAAmB;AACxB,aAAO,CAAC,UAAyC;AAC/C,cAAM,UAAU,MAAM,OAAO;AAC7B,0BAAkB,SAAS,UAAU,OAAO;AAC5C,kBAAU,UAAU;AAAA,MACtB;AAAA,IACF,GAAG,CAAC,iBAAiB,CAAC;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,CAAC,yBAAyB,CAAC;AAAU;AACzC,WAAO,CAAC,UAAyC;AAC/C,2CAAW;AACX,qEAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,uBAAuB,QAAQ,CAAC;AAEpC,SAAO,6BAAAA,QAAA,cAAC,kBAAO,GAAG,OAAO,MAAM,6BAAAA,QAAA,cAAC,oBAAM,QAAN,EAAa,MAAK,KAAI,GAAI,UAAU,cAAc;AACpF;",
+  "sourcesContent": ["import React, { ChangeEvent, useEffect, useMemo, useRef } from \"react\";\nimport { Icons } from \"../../../assets\";\nimport { useDebouncedCallback } from \"../../hooks\";\nimport { Input } from \"..\";\n\ntype InputProps = React.ComponentProps<\"input\">;\ntype Props = Readonly<\n  InputProps & {\n    onDebouncedChange?: (current: string, prev: string) => void;\n    debounceTime?: number;\n    autoFocus?: boolean;\n  }\n>;\n\nexport function Search({\n  onDebouncedChange,\n  debounceTime = 500,\n  onChange,\n  autoFocus = true,\n  ...props\n}: Props) {\n  const initialValue = props.value ?? props.defaultValue ?? \"\";\n  const prevValue = useRef(String(initialValue));\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (autoFocus && searchInputRef.current) {\n      // Delay focus to prevent layout shifts\n      setTimeout(() => {\n        searchInputRef.current?.focus({ preventScroll: true });\n      }, 0);\n    }\n  }, [autoFocus]);\n\n  const handleDebouncedChange = useDebouncedCallback(\n    useMemo(() => {\n      if (!onDebouncedChange) return;\n      return (event: ChangeEvent<HTMLInputElement>) => {\n        const current = event.target.value;\n        onDebouncedChange(current, prevValue.current);\n        prevValue.current = current;\n      };\n    }, [onDebouncedChange]),\n    debounceTime,\n  );\n\n  const handleChange = useMemo(() => {\n    if (!handleDebouncedChange && !onChange) return;\n    return (event: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event);\n      handleDebouncedChange?.(event);\n    };\n  }, [handleDebouncedChange, onChange]);\n\n  return (\n    <Input\n      {...props}\n      ref={searchInputRef}\n      icon={<Icons.Search size=\"S\" />}\n      onChange={handleChange}\n    />\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+D;AAC/D,oBAAsB;AACtB,mBAAqC;AACrC,eAAsB;AAWf,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAU;AACR,QAAM,eAAe,MAAM,SAAS,MAAM,gBAAgB;AAC1D,QAAM,gBAAY,qBAAO,OAAO,YAAY,CAAC;AAC7C,QAAM,qBAAiB,qBAAyB,IAAI;AAEpD,8BAAU,MAAM;AACd,QAAI,aAAa,eAAe,SAAS;AAEvC,iBAAW,MAAM;AA5BvB;AA6BQ,6BAAe,YAAf,mBAAwB,MAAM,EAAE,eAAe,KAAK;AAAA,MACtD,GAAG,CAAC;AAAA,IACN;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,4BAAwB;AAAA,QAC5B,sBAAQ,MAAM;AACZ,UAAI,CAAC;AAAmB;AACxB,aAAO,CAAC,UAAyC;AAC/C,cAAM,UAAU,MAAM,OAAO;AAC7B,0BAAkB,SAAS,UAAU,OAAO;AAC5C,kBAAU,UAAU;AAAA,MACtB;AAAA,IACF,GAAG,CAAC,iBAAiB,CAAC;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,CAAC,yBAAyB,CAAC;AAAU;AACzC,WAAO,CAAC,UAAyC;AAC/C,2CAAW;AACX,qEAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,uBAAuB,QAAQ,CAAC;AAEpC,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAM,6BAAAA,QAAA,cAAC,oBAAM,QAAN,EAAa,MAAK,KAAI;AAAA,MAC7B,UAAU;AAAA;AAAA,EACZ;AAEJ;",
   "names": ["React"]
 }

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

@@ -22,6 +22,8 @@ __reExport(components_exports, require("./AssetItem/AssetItem"), module.exports)
 __reExport(components_exports, require("./AssetList/AssetList"), module.exports);
 __reExport(components_exports, require("./CardButton/CardButton"), module.exports);
 __reExport(components_exports, require("./ApyIndicator/ApyIndicator"), module.exports);
+__reExport(components_exports, require("./MarketPriceIndicator/MarketPriceIndicator"), module.exports);
+__reExport(components_exports, require("./MarketPercentIndicator/MarketPercentIndicator"), module.exports);
 __reExport(components_exports, require("./Input/Input"), module.exports);
 __reExport(components_exports, require("./NetworkItem/NetworkItem"), module.exports);
 __reExport(components_exports, require("./NetworkList/NetworkList"), module.exports);

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

@@ -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 \"./ApyIndicator/ApyIndicator\";\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,wCANd;AAOA,+BAAc,0BAPd;AAQA,+BAAc,sCARd;AASA,+BAAc,sCATd;AAUA,+BAAc,4BAVd;AAWA,+BAAc,sBAXd;AAYA,+BAAc,kCAZd;AAaA,+BAAc,sCAbd;",
+  "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 \"./ApyIndicator/ApyIndicator\";\nexport * from \"./MarketPriceIndicator/MarketPriceIndicator\";\nexport * from \"./MarketPercentIndicator/MarketPercentIndicator\";\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,wCANd;AAOA,+BAAc,wDAPd;AAQA,+BAAc,4DARd;AASA,+BAAc,0BATd;AAUA,+BAAc,sCAVd;AAWA,+BAAc,sCAXd;AAYA,+BAAc,4BAZd;AAaA,+BAAc,sBAbd;AAcA,+BAAc,kCAdd;AAeA,+BAAc,sCAfd;",
   "names": []
 }

package/lib/components/form/Radio/RadioElement.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioElement.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Radio/RadioElement.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,mBAAmB,EAAuB,MAAM,OAAO,CAAC;AAkKxE,KAAK,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAEjG,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAAG;IAChD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,OAAO;8DAOV,iBAAiB,GAAG,WAAW;;;~~CA8BjC~~,CAAC;AAKF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"RadioElement.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Radio/RadioElement.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,mBAAmB,EAAuB,MAAM,OAAO,CAAC;AAkKxE,KAAK,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAEjG,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAAG;IAChD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,OAAO;8DAOV,iBAAiB,GAAG,WAAW;;;CA6BjC,CAAC;AAKF,eAAe,OAAO,CAAC"}

package/lib/components/form/Radio/RadioElement.js CHANGED Viewed

@@ -156,8 +156,7 @@ const Element = ({ label, value, disabled, outlined, variant = "default", ...pro
     const context = useContext(RadioContext);
     if (context === undefined)
         throw new Error("RadioElement must be used within a RadioProvider");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const isChecked = useMemo(() => context.currentValue === value, [context.currentValue]);
+    const isChecked = useMemo(() => context.currentValue == value, [context.currentValue, value]);
     const handleChange = (event) => {
         context.onChange(event.target.value);
     };

package/lib/components/form/Radio/RadioElement.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../../../src/components/form/Radio/RadioElement.tsx"],"names":[],"mappings":"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~~uDAAuD;IACvD,~~MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,YAAY,~~KAAK~~,KAAK,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC;~~IAExF~~,MAAM,YAAY,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,YAAY,oBACG,OAAO,KACjB,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC/C,QAAQ,EAAE,QAAQ;QAElB,oBAAC,KAAK,IACJ,IAAI,EAAC,OAAO,kBACE,OAAO,EACrB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,OAAO,CAAC,IAAI,KACd,KAAK,GACT;QACF,oBAAC,KAAK,IAAC,OAAO,EAAC,WAAW,IAAE,KAAK,CAAS,CAC7B,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,eAAe,CAAC,CAAC,+DAA+D;AACtG,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;AAEtB,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../../../src/components/form/Radio/RadioElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuB,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;2CACiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;CAE1E,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;gCACM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;;;;;;mBAQ5C,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;oCAqBX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;oCAG/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;;oCAIhC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;oCAG/B,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC;;;;;;oCAM3C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;;;oCAK/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;oCAGhC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC;;;;;;;iCAO9C,KAAK;oCACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;oCAG/B,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC;;;;;;;iCAO9C,KAAK;oCACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG;;;oCAG7B,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC;;;;;kCAK3C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;wBAEzC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;CAEtD,CAAC;AAEF,MAAM,WAAW,GAAG,GAAG,CAAA;;sBAED,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;mBAClC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;sBAGlB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;sBAG/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;sBAGhC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;;;;sBAM/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;;sBAI/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;;;;sBAMhC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;sBAG/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;;;;sBAM/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG;;;sBAG7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG;;;;;oBAK/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;CAGlD,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAEvD;;;;;;;;IAQE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,WAAW;CACjC,CAAC;AAUF,MAAM,OAAO,GAAG,CAAC,EACf,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACU,EAAe,EAAE;IACnC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,IAAI,OAAO,KAAK,SAAS;QAAE,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;IAE/F,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,YAAY,IAAI,KAAK,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;IAE9F,MAAM,YAAY,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,YAAY,oBACG,OAAO,KACjB,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC/C,QAAQ,EAAE,QAAQ;QAElB,oBAAC,KAAK,IACJ,IAAI,EAAC,OAAO,kBACE,OAAO,EACrB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,OAAO,CAAC,IAAI,KACd,KAAK,GACT;QACF,oBAAC,KAAK,IAAC,OAAO,EAAC,WAAW,IAAE,KAAK,CAAS,CAC7B,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,eAAe,CAAC,CAAC,+DAA+D;AACtG,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;AAEtB,eAAe,OAAO,CAAC"}

package/lib/components/tabs/Chip/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,~~KAAmB~~,MAAM,OAAO,CAAC;~~AAIxC~~,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC,CAAC;AA2BH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,~~CAkBjG~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC,CAAC;AA2BH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuBjG"}

package/lib/components/tabs/Chip/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import Flex from "../../layout/Flex";
 const Container = styled(Flex).attrs({
@@ -23,6 +23,9 @@ const Item = styled(Flex).attrs({
 `;
 export default function BarTabs({ children, onTabChange, initialActiveIndex }) {
     const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
+    useEffect(() => {
+        setActiveIndex(initialActiveIndex);
+    }, [initialActiveIndex]);
     return (React.createElement(Container, null, React.Children.toArray(children).map((child, index) => (React.createElement(Item, { key: index, active: index === activeIndex, onClick: () => {
             setActiveIndex(index);
             onTabChange && onTabChange(index);

package/lib/components/tabs/Chip/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AACxC~~,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAiBrC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IACnC,cAAc,EAAE,eAAe;IAC/B,IAAI,EAAE,CAAC;IACP,SAAS,EAAE,CAAC;CACb,CAAC,CAAA;sBACoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG;;;CAG3D,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IAC9B,IAAI,EAAE,CAAC;IACP,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAW;;;;WAIF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;sBAC/D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;CAClF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAS;IAClF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;~~IACnE~~,OAAO,CACL,oBAAC,SAAS,QACP,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACtD,oBAAC,IAAI,IACH,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,KAAK,KAAK,WAAW,EAC7B,OAAO,EAAE,GAAG,EAAE;YACZ,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,IAEA,KAAK,CACD,CACR,CAAC,CACQ,CACb,CAAC;AACJ,CAAC"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAiBrC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IACnC,cAAc,EAAE,eAAe;IAC/B,IAAI,EAAE,CAAC;IACP,SAAS,EAAE,CAAC;CACb,CAAC,CAAA;sBACoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG;;;CAG3D,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IAC9B,IAAI,EAAE,CAAC;IACP,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAW;;;;WAIF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;sBAC/D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;CAClF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAS;IAClF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,kBAAkB,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,oBAAC,SAAS,QACP,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACtD,oBAAC,IAAI,IACH,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,KAAK,KAAK,WAAW,EAC7B,OAAO,EAAE,GAAG,EAAE;YACZ,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,IAEA,KAAK,CACD,CACR,CAAC,CACQ,CACb,CAAC;AACJ,CAAC"}

package/lib/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const MarketPercentIndicator: ({ percent }: {
+    percent: number;
+}) => React.JSX.Element;
+//# sourceMappingURL=MarketPercentIndicator.d.ts.map

package/lib/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"MarketPercentIndicator.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsC1B,eAAO,MAAM,sBAAsB;aAA4B,MAAM;uBAkBpE,CAAC"}

package/lib/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.js ADDED Viewed

@@ -0,0 +1,34 @@
+import React from "react";
+import { Flex, Text } from "../../../components";
+import styled from "styled-components";
+import { withTokens } from "../../libs";
+const Wrapper = styled(Flex) `
+  ${withTokens("colors-surface-status-success-default", "colors-surface-status-success-strong-default", "colors-surface-status-error-default", "colors-surface-status-error-strong-default", "colors-surface-transparent-hover", "colors-content-default-default")}
+`;
+const getPercentageDisplay = (percent) => {
+    if (percent > 0) {
+        return {
+            backgroundColor: "var(--colors-surface-status-success-default)",
+            color: "var(--colors-surface-status-success-strong-default)",
+            text: `+${percent}%`,
+        };
+    }
+    if (percent < 0) {
+        return {
+            backgroundColor: "var(--colors-surface-status-error-default)",
+            color: "var(--colors-surface-status-error-strong-default)",
+            text: `-${Math.abs(percent)}%`,
+        };
+    }
+    return {
+        backgroundColor: "var(--colors-surface-transparent-hover)",
+        color: "var(--colors-content-default-default)",
+        text: `${percent}%`,
+    };
+};
+export const MarketPercentIndicator = ({ percent }) => {
+    const percentageDisplay = getPercentageDisplay(percent);
+    return (React.createElement(Wrapper, { "data-testid": "market-percent-indicator", flexDirection: "column", alignItems: "flex-end", width: "fit-content", p: "4px", borderRadius: "4px", backgroundColor: percentageDisplay.backgroundColor },
+        React.createElement(Text, { color: percentageDisplay.color, fontSize: "12px" }, percentageDisplay.text)));
+};
+//# sourceMappingURL=MarketPercentIndicator.js.map

package/lib/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MarketPercentIndicator.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IACxB,UAAU,CACV,uCAAuC,EACvC,8CAA8C,EAC9C,qCAAqC,EACrC,4CAA4C,EAC5C,kCAAkC,EAClC,gCAAgC,CACjC;CACF,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAAe,EAAE,EAAE;IAC/C,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,OAAO;YACL,eAAe,EAAE,8CAA8C;YAC/D,KAAK,EAAE,qDAAqD;YAC5D,IAAI,EAAE,IAAI,OAAO,GAAG;SACrB,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,OAAO;YACL,eAAe,EAAE,4CAA4C;YAC7D,KAAK,EAAE,mDAAmD;YAC1D,IAAI,EAAE,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG;SAC/B,CAAC;IACJ,CAAC;IACD,OAAO;QACL,eAAe,EAAE,yCAAyC;QAC1D,KAAK,EAAE,uCAAuC;QAC9C,IAAI,EAAE,GAAG,OAAO,GAAG;KACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EAAE,OAAO,EAAuB,EAAE,EAAE;IACzE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAExD,OAAO,CACL,oBAAC,OAAO,mBACM,0BAA0B,EACtC,aAAa,EAAC,QAAQ,EACtB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,KAAK,EACP,YAAY,EAAC,KAAK,EAClB,eAAe,EAAE,iBAAiB,CAAC,eAAe;QAElD,oBAAC,IAAI,IAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,EAAE,QAAQ,EAAC,MAAM,IAClD,iBAAiB,CAAC,IAAI,CAClB,CACC,CACX,CAAC;AACJ,CAAC,CAAC"}

package/lib/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.stories.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MarketPercentIndicator } from "./MarketPercentIndicator";
+declare const meta: Meta<typeof MarketPercentIndicator>;
+export default meta;
+type Story = StoryObj<typeof MarketPercentIndicator>;
+export declare const Positive: Story;
+export declare const Negative: Story;
+export declare const Zero: Story;
+export declare const TestMarketPercentIndicator: Story;
+//# sourceMappingURL=MarketPercentIndicator.stories.d.ts.map

package/lib/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.stories.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MarketPercentIndicator.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,sBAAsB,CAK7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAErD,eAAO,MAAM,QAAQ,EAAE,KAAiC,CAAC;AACzD,eAAO,MAAM,QAAQ,EAAE,KAAkC,CAAC;AAC1D,eAAO,MAAM,IAAI,EAAE,KAAgC,CAAC;AAEpD,eAAO,MAAM,0BAA0B,EAAE,KAMxC,CAAC"}

package/lib/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.stories.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { MarketPercentIndicator } from "./MarketPercentIndicator";
+import { expect, within } from "@storybook/test";
+const meta = {
+    component: MarketPercentIndicator,
+    title: "PreLdls/Components/MarketPercentIndicator",
+    tags: ["autodocs"],
+    args: { percent: 30 },
+};
+export default meta;
+export const Positive = { args: { percent: 30 } };
+export const Negative = { args: { percent: -30 } };
+export const Zero = { args: { percent: 0 } };
+export const TestMarketPercentIndicator = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const input = canvas.getByTestId("market-percent-indicator");
+        await expect(input).toHaveTextContent("+30%");
+    },
+};
+//# sourceMappingURL=MarketPercentIndicator.stories.js.map

package/lib/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MarketPercentIndicator.stories.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,IAAI,GAAwC;IAChD,SAAS,EAAE,sBAAsB;IACjC,KAAK,EAAE,2CAA2C;IAClD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;CACtB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,QAAQ,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;AAC1D,MAAM,CAAC,MAAM,IAAI,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,0BAA0B,GAAU;IAC/C,IAAI,EAAE,KAAK,EAAE,EAAE,aAAa,EAAkC,EAAE,EAAE;QAChE,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;QACrC,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,0BAA0B,CAAC,CAAC;QAC7D,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAChD,CAAC;CACF,CAAC"}

package/lib/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const MarketPriceIndicator: ({ percent, price }: {
+    percent: number;
+    price: string;
+}) => React.JSX.Element;
+//# sourceMappingURL=MarketPriceIndicator.d.ts.map

package/lib/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"MarketPriceIndicator.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B,eAAO,MAAM,oBAAoB;aAAmC,MAAM;WAAS,MAAM;uBAkBxF,CAAC"}

package/lib/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.js ADDED Viewed

@@ -0,0 +1,32 @@
+import React from "react";
+import { Flex, Text } from "../../../components";
+import styled from "styled-components";
+import { withTokens } from "../../libs";
+const Wrapper = styled(Flex) `
+  ${withTokens("colors-surface-status-success-strong-default", "colors-surface-status-error-strong-default", "colors-content-default-default")}
+`;
+const getPercentageDisplay = (percent) => {
+    if (percent > 0) {
+        return {
+            color: "var(--colors-surface-status-success-strong-default)",
+            text: `+${percent}%`,
+        };
+    }
+    if (percent < 0) {
+        return {
+            color: "var(--colors-surface-status-error-strong-default)",
+            text: `-${percent}%`,
+        };
+    }
+    return {
+        color: "var(--colors-content-default-default)",
+        text: `${percent}%`,
+    };
+};
+export const MarketPriceIndicator = ({ percent, price }) => {
+    const percentageDisplay = getPercentageDisplay(percent);
+    return (React.createElement(Wrapper, { "data-testid": "market-price-indicator", flexDirection: "column", alignItems: "flex-end", width: "fit-content" },
+        React.createElement(Text, { variant: "body", fontWeight: "semiBold", mb: "4px" }, price),
+        React.createElement(Text, { color: percentageDisplay.color, fontSize: "12px" }, percentageDisplay.text)));
+};
+//# sourceMappingURL=MarketPriceIndicator.js.map

package/lib/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MarketPriceIndicator.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IACxB,UAAU,CACV,8CAA8C,EAC9C,4CAA4C,EAC5C,gCAAgC,CACjC;CACF,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAAe,EAAE,EAAE;IAC/C,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,OAAO;YACL,KAAK,EAAE,qDAAqD;YAC5D,IAAI,EAAE,IAAI,OAAO,GAAG;SACrB,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,OAAO;YACL,KAAK,EAAE,mDAAmD;YAC1D,IAAI,EAAE,IAAI,OAAO,GAAG;SACrB,CAAC;IACJ,CAAC;IACD,OAAO;QACL,KAAK,EAAE,uCAAuC;QAC9C,IAAI,EAAE,GAAG,OAAO,GAAG;KACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAsC,EAAE,EAAE;IAC7F,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAExD,OAAO,CACL,oBAAC,OAAO,mBACM,wBAAwB,EACpC,aAAa,EAAC,QAAQ,EACtB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,aAAa;QAEnB,oBAAC,IAAI,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,UAAU,EAAC,EAAE,EAAC,KAAK,IAChD,KAAK,CACD;QACP,oBAAC,IAAI,IAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,EAAE,QAAQ,EAAC,MAAM,IAClD,iBAAiB,CAAC,IAAI,CAClB,CACC,CACX,CAAC;AACJ,CAAC,CAAC"}

package/lib/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.stories.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MarketPriceIndicator } from "./MarketPriceIndicator";
+declare const meta: Meta<typeof MarketPriceIndicator>;
+export default meta;
+type Story = StoryObj<typeof MarketPriceIndicator>;
+export declare const Positive: Story;
+export declare const Negative: Story;
+export declare const Zero: Story;
+export declare const TestMarketPriceIndicator: Story;
+//# sourceMappingURL=MarketPriceIndicator.stories.d.ts.map

package/lib/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.stories.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MarketPriceIndicator.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAK3C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAEnD,eAAO,MAAM,QAAQ,EAAE,KAAuD,CAAC;AAC/E,eAAO,MAAM,QAAQ,EAAE,KAAwD,CAAC;AAChF,eAAO,MAAM,IAAI,EAAE,KAAsD,CAAC;AAE1E,eAAO,MAAM,wBAAwB,EAAE,KAMtC,CAAC"}

package/lib/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.stories.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { MarketPriceIndicator } from "./MarketPriceIndicator";
+import { expect, within } from "@storybook/test";
+const meta = {
+    component: MarketPriceIndicator,
+    title: "PreLdls/Components/MarketPriceIndicator",
+    tags: ["autodocs"],
+    args: { percent: 30, price: "$100,000.00" },
+};
+export default meta;
+export const Positive = { args: { percent: 30, price: "$100,000.00" } };
+export const Negative = { args: { percent: -30, price: "$100,000.00" } };
+export const Zero = { args: { percent: 0, price: "$100,000.00" } };
+export const TestMarketPriceIndicator = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const input = canvas.getByTestId("market-price-indicator");
+        await expect(input).toHaveTextContent("$100,000.00");
+    },
+};
+//# sourceMappingURL=MarketPriceIndicator.stories.js.map

package/lib/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MarketPriceIndicator.stories.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,IAAI,GAAsC;IAC9C,SAAS,EAAE,oBAAoB;IAC/B,KAAK,EAAE,yCAAyC;IAChD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE;CAC5C,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,QAAQ,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,CAAC;AAC/E,MAAM,CAAC,MAAM,QAAQ,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,CAAC;AAChF,MAAM,CAAC,MAAM,IAAI,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,CAAC;AAE1E,MAAM,CAAC,MAAM,wBAAwB,GAAU;IAC7C,IAAI,EAAE,KAAK,EAAE,EAAE,aAAa,EAAkC,EAAE,EAAE;QAChE,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;QACrC,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,wBAAwB,CAAC,CAAC;QAC3D,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC;IACvD,CAAC;CACF,CAAC"}

package/lib/pre-ldls/components/Search/Search.d.ts CHANGED Viewed

@@ -3,7 +3,8 @@ type InputProps = React.ComponentProps<"input">;
 type Props = Readonly<InputProps & {
     onDebouncedChange?: (current: string, prev: string) => void;
     debounceTime?: number;
+    autoFocus?: boolean;
 }>;
-export declare function Search({ onDebouncedChange, debounceTime, onChange, ...props }: Props): React.JSX.Element;
+export declare function Search({ onDebouncedChange, debounceTime, onChange, autoFocus, ...props }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=Search.d.ts.map

package/lib/pre-ldls/components/Search/Search.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,~~KAAuC~~,MAAM,OAAO,CAAC;~~AAK5D~~,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAChD,KAAK,KAAK,GAAG,QAAQ,CACnB,UAAU,GAAG;IACX,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;~~CACvB~~,CACF,CAAC;AAEF,wBAAgB,MAAM,CAAC,~~EAAE~~,iBAAiB,~~EAAE~~,YAAkB,~~EAAE~~,QAAQ,~~EAAE~~,GAAG,KAAK,~~EAAE~~,EAAE,KAAK,~~qBAyB1F~~"}
1	+ {"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAChD,KAAK,KAAK,GAAG,QAAQ,CACnB,UAAU,GAAG;IACX,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CACF,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,iBAAiB,EACjB,YAAkB,EAClB,QAAQ,EACR,SAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,qBA0CP"}

package/lib/pre-ldls/components/Search/Search.js CHANGED Viewed

@@ -1,10 +1,19 @@
-import React, { useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { Icons } from "../../../assets";
 import { useDebouncedCallback } from "../../hooks";
 import { Input } from "..";
-export function Search({ onDebouncedChange, debounceTime = 500, onChange, ...props }) {
+export function Search({ onDebouncedChange, debounceTime = 500, onChange, autoFocus = true, ...props }) {
     const initialValue = props.value ?? props.defaultValue ?? "";
     const prevValue = useRef(String(initialValue));
+    const searchInputRef = useRef(null);
+    useEffect(() => {
+        if (autoFocus && searchInputRef.current) {
+            // Delay focus to prevent layout shifts
+            setTimeout(() => {
+                searchInputRef.current?.focus({ preventScroll: true });
+            }, 0);
+        }
+    }, [autoFocus]);
     const handleDebouncedChange = useDebouncedCallback(useMemo(() => {
         if (!onDebouncedChange)
             return;
@@ -22,6 +31,6 @@ export function Search({ onDebouncedChange, debounceTime = 500, onChange, ...pro
             handleDebouncedChange?.(event);
         };
     }, [handleDebouncedChange, onChange]);
-    return React.createElement(Input, { ...props, icon: React.createElement(Icons.Search, { size: "S" }), onChange: handleChange });
+    return (React.createElement(Input, { ...props, ref: searchInputRef, icon: React.createElement(Icons.Search, { size: "S" }), onChange: handleChange }));
 }
 //# sourceMappingURL=Search.js.map

package/lib/pre-ldls/components/Search/Search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;~~AAC5D~~,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;~~AAU3B~~,MAAM,UAAU,MAAM,CAAC,~~EAAE~~,iBAAiB,~~EAAE~~,YAAY,GAAG,GAAG,~~EAAE~~,QAAQ,~~EAAE~~,GAAG,KAAK,~~EAAS~~;~~IACzF~~,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;IAC7D,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;~~IAE~~/C,MAAM,qBAAqB,GAAG,oBAAoB,CAChD,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,iBAAiB;YAAE,OAAO;QAC/B,OAAO,CAAC,KAAoC,EAAE,EAAE;YAC9C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACnC,iBAAiB,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;YAC9C,SAAS,CAAC,OAAO,GAAG,OAAO,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,EACvB,YAAY,CACb,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,qBAAqB,IAAI,CAAC,QAAQ;YAAE,OAAO;QAChD,OAAO,CAAC,KAAoC,EAAE,EAAE;YAC9C,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;YAClB,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,OAAO,oBAAC,KAAK,~~OAAK~~,KAAK,EAAE,IAAI,EAAE,oBAAC,KAAK,CAAC,MAAM,IAAC,IAAI,EAAC,GAAG,GAAG,~~EAAE~~,QAAQ,EAAE,YAAY,~~GAAI~~,CAAC;~~AACvF~~,CAAC"}
1	+ {"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAW3B,MAAM,UAAU,MAAM,CAAC,EACrB,iBAAiB,EACjB,YAAY,GAAG,GAAG,EAClB,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,GAAG,KAAK,EACF;IACN,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;IAC7D,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/C,MAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;YACxC,uCAAuC;YACvC,UAAU,CAAC,GAAG,EAAE;gBACd,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YACzD,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,qBAAqB,GAAG,oBAAoB,CAChD,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,iBAAiB;YAAE,OAAO;QAC/B,OAAO,CAAC,KAAoC,EAAE,EAAE;YAC9C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACnC,iBAAiB,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;YAC9C,SAAS,CAAC,OAAO,GAAG,OAAO,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,EACvB,YAAY,CACb,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,qBAAqB,IAAI,CAAC,QAAQ;YAAE,OAAO;QAChD,OAAO,CAAC,KAAoC,EAAE,EAAE;YAC9C,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;YAClB,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,OAAO,CACL,oBAAC,KAAK,OACA,KAAK,EACT,GAAG,EAAE,cAAc,EACnB,IAAI,EAAE,oBAAC,KAAK,CAAC,MAAM,IAAC,IAAI,EAAC,GAAG,GAAG,EAC/B,QAAQ,EAAE,YAAY,GACtB,CACH,CAAC;AACJ,CAAC"}

package/lib/pre-ldls/components/index.d.ts CHANGED Viewed

@@ -5,6 +5,8 @@ export * from "./AssetItem/AssetItem";
 export * from "./AssetList/AssetList";
 export * from "./CardButton/CardButton";
 export * from "./ApyIndicator/ApyIndicator";
+export * from "./MarketPriceIndicator/MarketPriceIndicator";
+export * from "./MarketPercentIndicator/MarketPercentIndicator";
 export * from "./Input/Input";
 export * from "./NetworkItem/NetworkItem";
 export * from "./NetworkList/NetworkList";

package/lib/pre-ldls/components/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iDAAiD,CAAC;AAChE,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC"}

package/lib/pre-ldls/components/index.js CHANGED Viewed

@@ -5,6 +5,8 @@ export * from "./AssetItem/AssetItem";
 export * from "./AssetList/AssetList";
 export * from "./CardButton/CardButton";
 export * from "./ApyIndicator/ApyIndicator";
+export * from "./MarketPriceIndicator/MarketPriceIndicator";
+export * from "./MarketPercentIndicator/MarketPercentIndicator";
 export * from "./Input/Input";
 export * from "./NetworkItem/NetworkItem";
 export * from "./NetworkList/NetworkList";

package/lib/pre-ldls/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iDAAiD,CAAC;AAChE,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.37.0",
+  "version": "0.38.0-nightly.0",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {
@@ -75,8 +75,8 @@
     "react-transition-group": "^4.4.2",
     "react-window": "^1.8.6",
     "styled-system": "^5.1.5",
-    "@ledgerhq/crypto-icons-ui": "^1.18.0",
-    "@ledgerhq/icons-ui": "^0.13.0",
+    "@ledgerhq/crypto-icons-ui": "^1.19.0-nightly.1",
+    "@ledgerhq/icons-ui": "^0.14.0-nightly.0",
     "@ledgerhq/ui-shared": "^0.4.0"
   },
   "peerDependencies": {