@metamask/snaps-sdk - npm Package Compare versions

Comparing version 6.2.1 to 6.3.0

CHANGELOG.md

@@ -9,2 +9,11 @@ # Changelog
 
+## [6.3.0]
+### Added
+- Add `Selector` component ([#2645](https://github.com/MetaMask/snaps/pull/2645))
+- Add `Icon` component ([#2638](https://github.com/MetaMask/snaps/pull/2638))
+- Add `color` prop to `Text` component ([#2660](https://github.com/MetaMask/snaps/pull/2660))
+
+### Changed
+- `Button` children are now allowed to be `Image` and `Icon` ([#2641](https://github.com/MetaMask/snaps/pull/2641))
+
 ## [6.2.1]
@@ -219,3 +228,4 @@ ### Fixed
 
-[Unreleased]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@6.2.1...HEAD
+[Unreleased]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@6.3.0...HEAD
+[6.3.0]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@6.2.1...@metamask/snaps-sdk@6.3.0
 [6.2.1]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@6.2.0...@metamask/snaps-sdk@6.2.1
@@ -222,0 +232,0 @@ [6.2.0]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@6.1.1...@metamask/snaps-sdk@6.2.0

dist/index.js

@@ -849,2 +849,183 @@ "use strict";
 
+// src/jsx/component.ts
+function removeUndefinedProps(props) {
+  return Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== void 0)
+  );
+}
+function createSnapComponent(type) {
+  return (props) => {
+    const { key = null, ...rest } = props;
+    return {
+      type,
+      props: removeUndefinedProps(rest),
+      key
+    };
+  };
+}
+
+// src/jsx/components/Icon.ts
+var IconName = /* @__PURE__ */ ((IconName2) => {
+  IconName2["AddSquare"] = "add-square";
+  IconName2["Add"] = "add";
+  IconName2["Arrow2Down"] = "arrow-2-down";
+  IconName2["Arrow2Left"] = "arrow-2-left";
+  IconName2["Arrow2Right"] = "arrow-2-right";
+  IconName2["Arrow2Up"] = "arrow-2-up";
+  IconName2["Arrow2UpRight"] = "arrow-2-up-right";
+  IconName2["ArrowDoubleLeft"] = "arrow-double-left";
+  IconName2["ArrowDoubleRight"] = "arrow-double-right";
+  IconName2["ArrowDown"] = "arrow-down";
+  IconName2["ArrowLeft"] = "arrow-left";
+  IconName2["ArrowRight"] = "arrow-right";
+  IconName2["ArrowUp"] = "arrow-up";
+  IconName2["BankToken"] = "bank-token";
+  IconName2["Bank"] = "bank";
+  IconName2["Book"] = "book";
+  IconName2["Bookmark"] = "bookmark";
+  IconName2["Bridge"] = "bridge";
+  IconName2["Calculator"] = "calculator";
+  IconName2["CardPos"] = "card-pos";
+  IconName2["CardToken"] = "card-token";
+  IconName2["Card"] = "card";
+  IconName2["Category"] = "category";
+  IconName2["Chart"] = "chart";
+  IconName2["CheckBold"] = "check-bold";
+  IconName2["Check"] = "check";
+  IconName2["Clock"] = "clock";
+  IconName2["Close"] = "close";
+  IconName2["CodeCircle"] = "code-circle";
+  IconName2["Coin"] = "coin";
+  IconName2["Confirmation"] = "confirmation";
+  IconName2["Connect"] = "connect";
+  IconName2["CopySuccess"] = "copy-success";
+  IconName2["Copy"] = "copy";
+  IconName2["Customize"] = "customize";
+  IconName2["Danger"] = "danger";
+  IconName2["Dark"] = "dark";
+  IconName2["Data"] = "data";
+  IconName2["Diagram"] = "diagram";
+  IconName2["DocumentCode"] = "document-code";
+  IconName2["DragDrop"] = "drag-drop";
+  IconName2["DraggingAnimation"] = "dragging-animation";
+  IconName2["PinningAnimation"] = "pinning-animation";
+  IconName2["Edit"] = "edit";
+  IconName2["Eraser"] = "eraser";
+  IconName2["Ethereum"] = "ethereum";
+  IconName2["Expand"] = "expand";
+  IconName2["Explore"] = "explore";
+  IconName2["Export"] = "export";
+  IconName2["EyeSlash"] = "eye-slash";
+  IconName2["Eye"] = "eye";
+  IconName2["Filter"] = "filter";
+  IconName2["Flag"] = "flag";
+  IconName2["FlashSlash"] = "flash-slash";
+  IconName2["Flash"] = "flash";
+  IconName2["FullCircle"] = "full-circle";
+  IconName2["Gas"] = "gas";
+  IconName2["GlobalSearch"] = "global-search";
+  IconName2["Global"] = "global";
+  IconName2["Graph"] = "graph";
+  IconName2["Hardware"] = "hardware";
+  IconName2["Heart"] = "heart";
+  IconName2["Hierarchy"] = "hierarchy";
+  IconName2["Home"] = "home";
+  IconName2["Import"] = "import";
+  IconName2["Info"] = "info";
+  IconName2["Key"] = "key";
+  IconName2["Light"] = "light";
+  IconName2["Link"] = "link";
+  IconName2["Loading"] = "loading";
+  IconName2["LockCircle"] = "lock-circle";
+  IconName2["LockSlash"] = "lock-slash";
+  IconName2["Lock"] = "lock";
+  IconName2["Login"] = "login";
+  IconName2["Logout"] = "logout";
+  IconName2["Menu"] = "menu";
+  IconName2["MessageQuestion"] = "message-question";
+  IconName2["Messages"] = "messages";
+  IconName2["MinusBold"] = "minus-bold";
+  IconName2["MinusSquare"] = "minus-square";
+  IconName2["Minus"] = "minus";
+  IconName2["Mobile"] = "mobile";
+  IconName2["Money"] = "money";
+  IconName2["Monitor"] = "monitor";
+  IconName2["MoreHorizontal"] = "more-horizontal";
+  IconName2["MoreVertical"] = "more-vertical";
+  IconName2["NotificationCircle"] = "notification-circle";
+  IconName2["Notification"] = "notification";
+  IconName2["PasswordCheck"] = "password-check";
+  IconName2["People"] = "people";
+  IconName2["Pin"] = "pin";
+  IconName2["ProgrammingArrows"] = "programming-arrows";
+  IconName2["Custody"] = "custody";
+  IconName2["Question"] = "question";
+  IconName2["Received"] = "received";
+  IconName2["Refresh"] = "refresh";
+  IconName2["Save"] = "save";
+  IconName2["ScanBarcode"] = "scan-barcode";
+  IconName2["ScanFocus"] = "scan-focus";
+  IconName2["Scan"] = "scan";
+  IconName2["Scroll"] = "scroll";
+  IconName2["Search"] = "search";
+  IconName2["SecurityCard"] = "security-card";
+  IconName2["SecurityCross"] = "security-cross";
+  IconName2["SecurityKey"] = "security-key";
+  IconName2["SecuritySearch"] = "security-search";
+  IconName2["SecuritySlash"] = "security-slash";
+  IconName2["SecurityTick"] = "security-tick";
+  IconName2["SecurityTime"] = "security-time";
+  IconName2["SecurityUser"] = "security-user";
+  IconName2["Security"] = "security";
+  IconName2["Send1"] = "send-1";
+  IconName2["Send2"] = "send-2";
+  IconName2["Setting"] = "setting";
+  IconName2["Slash"] = "slash";
+  IconName2["SnapsMobile"] = "snaps-mobile";
+  IconName2["SnapsPlus"] = "snaps-plus";
+  IconName2["Snaps"] = "snaps";
+  IconName2["Speedometer"] = "speedometer";
+  IconName2["Star"] = "star";
+  IconName2["Stake"] = "stake";
+  IconName2["Student"] = "student";
+  IconName2["SwapHorizontal"] = "swap-horizontal";
+  IconName2["SwapVertical"] = "swap-vertical";
+  IconName2["Tag"] = "tag";
+  IconName2["Tilde"] = "tilde";
+  IconName2["Timer"] = "timer";
+  IconName2["Trash"] = "trash";
+  IconName2["TrendDown"] = "trend-down";
+  IconName2["TrendUp"] = "trend-up";
+  IconName2["UserCircleAdd"] = "user-circle-add";
+  IconName2["UserCircleLink"] = "user-circle-link";
+  IconName2["UserCircleRemove"] = "user-circle-remove";
+  IconName2["UserCircle"] = "user-circle";
+  IconName2["User"] = "user";
+  IconName2["WalletCard"] = "wallet-card";
+  IconName2["WalletMoney"] = "wallet-money";
+  IconName2["Wallet"] = "wallet";
+  IconName2["Warning"] = "warning";
+  IconName2["Twitter"] = "twitter";
+  IconName2["QrCode"] = "qr-code";
+  IconName2["UserCheck"] = "user-check";
+  IconName2["Unpin"] = "unpin";
+  IconName2["Ban"] = "ban";
+  IconName2["Bold"] = "bold";
+  IconName2["CircleX"] = "circle-x";
+  IconName2["Download"] = "download";
+  IconName2["FileIcon"] = "file";
+  IconName2["Flask"] = "flask";
+  IconName2["Plug"] = "plug";
+  IconName2["Share"] = "share";
+  IconName2["Square"] = "square";
+  IconName2["Tint"] = "tint";
+  IconName2["Upload"] = "upload";
+  IconName2["Usb"] = "usb";
+  IconName2["Wifi"] = "wifi";
+  IconName2["PlusMinus"] = "plus-minus";
+  return IconName2;
+})(IconName || {});
+var TYPE = "Icon";
+var Icon = createSnapComponent(TYPE);
+
 // src/jsx/validation.ts
@@ -879,4 +1060,18 @@ var import_superstruct18 = require("@metamask/superstruct");
 }
+var ImageStruct2 = element("Image", {
+  src: svg(),
+  alt: (0, import_superstruct18.optional)((0, import_superstruct18.string)())
+});
+var IconNameStruct = nullUnion(
+  Object.values(IconName).map((name) => literal(name))
+);
+var IconStruct = element("Icon", {
+  name: IconNameStruct,
+  color: (0, import_superstruct18.optional)(
+    nullUnion([literal("default"), literal("primary"), literal("muted")])
+  ),
+  size: (0, import_superstruct18.optional)(nullUnion([literal("md"), literal("inherit")]))
+});
 var ButtonStruct2 = element("Button", {
-  children: StringElementStruct,
+  children: children([StringElementStruct, ImageStruct2, IconStruct]),
   name: (0, import_superstruct18.optional)((0, import_superstruct18.string)()),
@@ -903,3 +1098,3 @@ type: (0, import_superstruct18.optional)(nullUnion([literal("button"), literal("submit")])),
   value: (0, import_superstruct18.string)(),
-  children: (0, import_superstruct18.string)()
+  children: nullUnion([(0, import_superstruct18.string)()])
 });
@@ -911,2 +1106,22 @@ var DropdownStruct = element("Dropdown", {
 });
+var CardStruct = element("Card", {
+  image: (0, import_superstruct18.optional)((0, import_superstruct18.string)()),
+  title: (0, import_superstruct18.string)(),
+  description: (0, import_superstruct18.optional)((0, import_superstruct18.string)()),
+  value: (0, import_superstruct18.string)(),
+  extra: (0, import_superstruct18.optional)((0, import_superstruct18.string)())
+});
+var SelectorOptionStruct = element(
+  "SelectorOption",
+  {
+    value: (0, import_superstruct18.string)(),
+    children: CardStruct
+  }
+);
+var SelectorStruct = element("Selector", {
+  name: (0, import_superstruct18.string)(),
+  title: (0, import_superstruct18.string)(),
+  value: (0, import_superstruct18.optional)((0, import_superstruct18.string)()),
+  children: children([SelectorOptionStruct])
+});
 var RadioStruct = element("Radio", {
@@ -938,3 +1153,4 @@ value: (0, import_superstruct18.string)(),
   FileInputStruct,
-  CheckboxStruct
+  CheckboxStruct,
+  SelectorStruct
 ];
@@ -1026,16 +1242,5 @@ var FieldChildUnionStruct = nullUnion([
 });
-var CardStruct = element("Card", {
-  image: (0, import_superstruct18.optional)((0, import_superstruct18.string)()),
-  title: (0, import_superstruct18.string)(),
-  description: (0, import_superstruct18.optional)((0, import_superstruct18.string)()),
-  value: (0, import_superstruct18.string)(),
-  extra: (0, import_superstruct18.optional)((0, import_superstruct18.string)())
-});
 var HeadingStruct2 = element("Heading", {
   children: StringElementStruct
 });
-var ImageStruct2 = element("Image", {
-  src: svg(),
-  alt: (0, import_superstruct18.optional)((0, import_superstruct18.string)())
-});
 var LinkStruct = element("Link", {
@@ -1046,5 +1251,21 @@ href: (0, import_superstruct18.string)(),
 var TextStruct2 = element("Text", {
-  children: children([(0, import_superstruct18.string)(), BoldStruct, ItalicStruct, LinkStruct]),
+  children: children([
+    (0, import_superstruct18.string)(),
+    BoldStruct,
+    ItalicStruct,
+    LinkStruct,
+    IconStruct
+  ]),
   alignment: (0, import_superstruct18.optional)(
     nullUnion([literal("start"), literal("center"), literal("end")])
+  ),
+  color: (0, import_superstruct18.optional)(
+    nullUnion([
+      literal("default"),
+      literal("alternative"),
+      literal("muted"),
+      literal("error"),
+      literal("success"),
+      literal("warning")
+    ])
   )
@@ -1058,2 +1279,3 @@ });
   ImageStruct2,
+  IconStruct,
   (0, import_superstruct18.boolean)()
@@ -1066,2 +1288,3 @@ ]);
   LinkStruct,
+  IconStruct,
   (0, import_superstruct18.string)()
@@ -1103,3 +1326,5 @@ ]);
   CheckboxStruct,
-  CardStruct
+  CardStruct,
+  IconStruct,
+  SelectorStruct
 ]);
@@ -1137,3 +1362,6 @@ var RootJSXElementStruct = nullUnion([
   ContainerStruct,
-  CardStruct
+  CardStruct,
+  IconStruct,
+  SelectorStruct,
+  SelectorOptionStruct
 ]);
@@ -1140,0 +1368,0 @@

dist/jsx/index.js

@@ -41,2 +41,4 @@ "use strict";
   Heading: () => Heading,
+  Icon: () => Icon,
+  IconName: () => IconName,
   Image: () => Image,
@@ -52,2 +54,4 @@ Input: () => Input,
   Row: () => Row,
+  Selector: () => Selector,
+  SelectorOption: () => SelectorOption,
   Spinner: () => Spinner,
@@ -126,69 +130,241 @@ Text: () => Text,
 
+// src/jsx/components/form/Selector.ts
+var TYPE11 = "Selector";
+var Selector = createSnapComponent(TYPE11);
+
+// src/jsx/components/form/SelectorOption.ts
+var TYPE12 = "SelectorOption";
+var SelectorOption = createSnapComponent(TYPE12);
+
 // src/jsx/components/formatting/Bold.ts
-var TYPE11 = "Bold";
-var Bold = createSnapComponent(TYPE11);
+var TYPE13 = "Bold";
+var Bold = createSnapComponent(TYPE13);
 
 // src/jsx/components/formatting/Italic.ts
-var TYPE12 = "Italic";
-var Italic = createSnapComponent(TYPE12);
+var TYPE14 = "Italic";
+var Italic = createSnapComponent(TYPE14);
 
 // src/jsx/components/Address.ts
-var TYPE13 = "Address";
-var Address = createSnapComponent(TYPE13);
+var TYPE15 = "Address";
+var Address = createSnapComponent(TYPE15);
 
 // src/jsx/components/Box.ts
-var TYPE14 = "Box";
-var Box = createSnapComponent(TYPE14);
+var TYPE16 = "Box";
+var Box = createSnapComponent(TYPE16);
 
 // src/jsx/components/Card.ts
-var TYPE15 = "Card";
-var Card = createSnapComponent(TYPE15);
+var TYPE17 = "Card";
+var Card = createSnapComponent(TYPE17);
 
 // src/jsx/components/Copyable.ts
-var TYPE16 = "Copyable";
-var Copyable = createSnapComponent(TYPE16);
+var TYPE18 = "Copyable";
+var Copyable = createSnapComponent(TYPE18);
 
 // src/jsx/components/Divider.ts
-var TYPE17 = "Divider";
-var Divider = createSnapComponent(TYPE17);
+var TYPE19 = "Divider";
+var Divider = createSnapComponent(TYPE19);
 
 // src/jsx/components/Value.ts
-var TYPE18 = "Value";
-var Value = createSnapComponent(TYPE18);
+var TYPE20 = "Value";
+var Value = createSnapComponent(TYPE20);
 
 // src/jsx/components/Heading.ts
-var TYPE19 = "Heading";
-var Heading = createSnapComponent(TYPE19);
+var TYPE21 = "Heading";
+var Heading = createSnapComponent(TYPE21);
 
+// src/jsx/components/Icon.ts
+var IconName = /* @__PURE__ */ ((IconName2) => {
+  IconName2["AddSquare"] = "add-square";
+  IconName2["Add"] = "add";
+  IconName2["Arrow2Down"] = "arrow-2-down";
+  IconName2["Arrow2Left"] = "arrow-2-left";
+  IconName2["Arrow2Right"] = "arrow-2-right";
+  IconName2["Arrow2Up"] = "arrow-2-up";
+  IconName2["Arrow2UpRight"] = "arrow-2-up-right";
+  IconName2["ArrowDoubleLeft"] = "arrow-double-left";
+  IconName2["ArrowDoubleRight"] = "arrow-double-right";
+  IconName2["ArrowDown"] = "arrow-down";
+  IconName2["ArrowLeft"] = "arrow-left";
+  IconName2["ArrowRight"] = "arrow-right";
+  IconName2["ArrowUp"] = "arrow-up";
+  IconName2["BankToken"] = "bank-token";
+  IconName2["Bank"] = "bank";
+  IconName2["Book"] = "book";
+  IconName2["Bookmark"] = "bookmark";
+  IconName2["Bridge"] = "bridge";
+  IconName2["Calculator"] = "calculator";
+  IconName2["CardPos"] = "card-pos";
+  IconName2["CardToken"] = "card-token";
+  IconName2["Card"] = "card";
+  IconName2["Category"] = "category";
+  IconName2["Chart"] = "chart";
+  IconName2["CheckBold"] = "check-bold";
+  IconName2["Check"] = "check";
+  IconName2["Clock"] = "clock";
+  IconName2["Close"] = "close";
+  IconName2["CodeCircle"] = "code-circle";
+  IconName2["Coin"] = "coin";
+  IconName2["Confirmation"] = "confirmation";
+  IconName2["Connect"] = "connect";
+  IconName2["CopySuccess"] = "copy-success";
+  IconName2["Copy"] = "copy";
+  IconName2["Customize"] = "customize";
+  IconName2["Danger"] = "danger";
+  IconName2["Dark"] = "dark";
+  IconName2["Data"] = "data";
+  IconName2["Diagram"] = "diagram";
+  IconName2["DocumentCode"] = "document-code";
+  IconName2["DragDrop"] = "drag-drop";
+  IconName2["DraggingAnimation"] = "dragging-animation";
+  IconName2["PinningAnimation"] = "pinning-animation";
+  IconName2["Edit"] = "edit";
+  IconName2["Eraser"] = "eraser";
+  IconName2["Ethereum"] = "ethereum";
+  IconName2["Expand"] = "expand";
+  IconName2["Explore"] = "explore";
+  IconName2["Export"] = "export";
+  IconName2["EyeSlash"] = "eye-slash";
+  IconName2["Eye"] = "eye";
+  IconName2["Filter"] = "filter";
+  IconName2["Flag"] = "flag";
+  IconName2["FlashSlash"] = "flash-slash";
+  IconName2["Flash"] = "flash";
+  IconName2["FullCircle"] = "full-circle";
+  IconName2["Gas"] = "gas";
+  IconName2["GlobalSearch"] = "global-search";
+  IconName2["Global"] = "global";
+  IconName2["Graph"] = "graph";
+  IconName2["Hardware"] = "hardware";
+  IconName2["Heart"] = "heart";
+  IconName2["Hierarchy"] = "hierarchy";
+  IconName2["Home"] = "home";
+  IconName2["Import"] = "import";
+  IconName2["Info"] = "info";
+  IconName2["Key"] = "key";
+  IconName2["Light"] = "light";
+  IconName2["Link"] = "link";
+  IconName2["Loading"] = "loading";
+  IconName2["LockCircle"] = "lock-circle";
+  IconName2["LockSlash"] = "lock-slash";
+  IconName2["Lock"] = "lock";
+  IconName2["Login"] = "login";
+  IconName2["Logout"] = "logout";
+  IconName2["Menu"] = "menu";
+  IconName2["MessageQuestion"] = "message-question";
+  IconName2["Messages"] = "messages";
+  IconName2["MinusBold"] = "minus-bold";
+  IconName2["MinusSquare"] = "minus-square";
+  IconName2["Minus"] = "minus";
+  IconName2["Mobile"] = "mobile";
+  IconName2["Money"] = "money";
+  IconName2["Monitor"] = "monitor";
+  IconName2["MoreHorizontal"] = "more-horizontal";
+  IconName2["MoreVertical"] = "more-vertical";
+  IconName2["NotificationCircle"] = "notification-circle";
+  IconName2["Notification"] = "notification";
+  IconName2["PasswordCheck"] = "password-check";
+  IconName2["People"] = "people";
+  IconName2["Pin"] = "pin";
+  IconName2["ProgrammingArrows"] = "programming-arrows";
+  IconName2["Custody"] = "custody";
+  IconName2["Question"] = "question";
+  IconName2["Received"] = "received";
+  IconName2["Refresh"] = "refresh";
+  IconName2["Save"] = "save";
+  IconName2["ScanBarcode"] = "scan-barcode";
+  IconName2["ScanFocus"] = "scan-focus";
+  IconName2["Scan"] = "scan";
+  IconName2["Scroll"] = "scroll";
+  IconName2["Search"] = "search";
+  IconName2["SecurityCard"] = "security-card";
+  IconName2["SecurityCross"] = "security-cross";
+  IconName2["SecurityKey"] = "security-key";
+  IconName2["SecuritySearch"] = "security-search";
+  IconName2["SecuritySlash"] = "security-slash";
+  IconName2["SecurityTick"] = "security-tick";
+  IconName2["SecurityTime"] = "security-time";
+  IconName2["SecurityUser"] = "security-user";
+  IconName2["Security"] = "security";
+  IconName2["Send1"] = "send-1";
+  IconName2["Send2"] = "send-2";
+  IconName2["Setting"] = "setting";
+  IconName2["Slash"] = "slash";
+  IconName2["SnapsMobile"] = "snaps-mobile";
+  IconName2["SnapsPlus"] = "snaps-plus";
+  IconName2["Snaps"] = "snaps";
+  IconName2["Speedometer"] = "speedometer";
+  IconName2["Star"] = "star";
+  IconName2["Stake"] = "stake";
+  IconName2["Student"] = "student";
+  IconName2["SwapHorizontal"] = "swap-horizontal";
+  IconName2["SwapVertical"] = "swap-vertical";
+  IconName2["Tag"] = "tag";
+  IconName2["Tilde"] = "tilde";
+  IconName2["Timer"] = "timer";
+  IconName2["Trash"] = "trash";
+  IconName2["TrendDown"] = "trend-down";
+  IconName2["TrendUp"] = "trend-up";
+  IconName2["UserCircleAdd"] = "user-circle-add";
+  IconName2["UserCircleLink"] = "user-circle-link";
+  IconName2["UserCircleRemove"] = "user-circle-remove";
+  IconName2["UserCircle"] = "user-circle";
+  IconName2["User"] = "user";
+  IconName2["WalletCard"] = "wallet-card";
+  IconName2["WalletMoney"] = "wallet-money";
+  IconName2["Wallet"] = "wallet";
+  IconName2["Warning"] = "warning";
+  IconName2["Twitter"] = "twitter";
+  IconName2["QrCode"] = "qr-code";
+  IconName2["UserCheck"] = "user-check";
+  IconName2["Unpin"] = "unpin";
+  IconName2["Ban"] = "ban";
+  IconName2["Bold"] = "bold";
+  IconName2["CircleX"] = "circle-x";
+  IconName2["Download"] = "download";
+  IconName2["FileIcon"] = "file";
+  IconName2["Flask"] = "flask";
+  IconName2["Plug"] = "plug";
+  IconName2["Share"] = "share";
+  IconName2["Square"] = "square";
+  IconName2["Tint"] = "tint";
+  IconName2["Upload"] = "upload";
+  IconName2["Usb"] = "usb";
+  IconName2["Wifi"] = "wifi";
+  IconName2["PlusMinus"] = "plus-minus";
+  return IconName2;
+})(IconName || {});
+var TYPE22 = "Icon";
+var Icon = createSnapComponent(TYPE22);
+
 // src/jsx/components/Image.ts
-var TYPE20 = "Image";
-var Image = createSnapComponent(TYPE20);
+var TYPE23 = "Image";
+var Image = createSnapComponent(TYPE23);
 
 // src/jsx/components/Link.ts
-var TYPE21 = "Link";
-var Link = createSnapComponent(TYPE21);
+var TYPE24 = "Link";
+var Link = createSnapComponent(TYPE24);
 
 // src/jsx/components/Row.ts
-var TYPE22 = "Row";
-var Row = createSnapComponent(TYPE22);
+var TYPE25 = "Row";
+var Row = createSnapComponent(TYPE25);
 
 // src/jsx/components/Spinner.ts
-var TYPE23 = "Spinner";
-var Spinner = createSnapComponent(TYPE23);
+var TYPE26 = "Spinner";
+var Spinner = createSnapComponent(TYPE26);
 
 // src/jsx/components/Text.ts
-var TYPE24 = "Text";
-var Text = createSnapComponent(TYPE24);
+var TYPE27 = "Text";
+var Text = createSnapComponent(TYPE27);
 
 // src/jsx/components/Tooltip.ts
-var TYPE25 = "Tooltip";
-var Tooltip = createSnapComponent(TYPE25);
+var TYPE28 = "Tooltip";
+var Tooltip = createSnapComponent(TYPE28);
 
 // src/jsx/components/Footer.ts
-var TYPE26 = "Footer";
-var Footer = createSnapComponent(TYPE26);
+var TYPE29 = "Footer";
+var Footer = createSnapComponent(TYPE29);
 
 // src/jsx/components/Container.ts
-var TYPE27 = "Container";
-var Container = createSnapComponent(TYPE27);
+var TYPE30 = "Container";
+var Container = createSnapComponent(TYPE30);
 
@@ -317,4 +493,18 @@ // src/jsx/jsx-runtime.ts
 }
+var ImageStruct = element("Image", {
+  src: svg(),
+  alt: (0, import_superstruct3.optional)((0, import_superstruct3.string)())
+});
+var IconNameStruct = nullUnion(
+  Object.values(IconName).map((name) => literal(name))
+);
+var IconStruct = element("Icon", {
+  name: IconNameStruct,
+  color: (0, import_superstruct3.optional)(
+    nullUnion([literal("default"), literal("primary"), literal("muted")])
+  ),
+  size: (0, import_superstruct3.optional)(nullUnion([literal("md"), literal("inherit")]))
+});
 var ButtonStruct = element("Button", {
-  children: StringElementStruct,
+  children: children([StringElementStruct, ImageStruct, IconStruct]),
   name: (0, import_superstruct3.optional)((0, import_superstruct3.string)()),
@@ -341,3 +531,3 @@ type: (0, import_superstruct3.optional)(nullUnion([literal("button"), literal("submit")])),
   value: (0, import_superstruct3.string)(),
-  children: (0, import_superstruct3.string)()
+  children: nullUnion([(0, import_superstruct3.string)()])
 });
@@ -349,2 +539,22 @@ var DropdownStruct = element("Dropdown", {
 });
+var CardStruct = element("Card", {
+  image: (0, import_superstruct3.optional)((0, import_superstruct3.string)()),
+  title: (0, import_superstruct3.string)(),
+  description: (0, import_superstruct3.optional)((0, import_superstruct3.string)()),
+  value: (0, import_superstruct3.string)(),
+  extra: (0, import_superstruct3.optional)((0, import_superstruct3.string)())
+});
+var SelectorOptionStruct = element(
+  "SelectorOption",
+  {
+    value: (0, import_superstruct3.string)(),
+    children: CardStruct
+  }
+);
+var SelectorStruct = element("Selector", {
+  name: (0, import_superstruct3.string)(),
+  title: (0, import_superstruct3.string)(),
+  value: (0, import_superstruct3.optional)((0, import_superstruct3.string)()),
+  children: children([SelectorOptionStruct])
+});
 var RadioStruct = element("Radio", {
@@ -376,3 +586,4 @@ value: (0, import_superstruct3.string)(),
   FileInputStruct,
-  CheckboxStruct
+  CheckboxStruct,
+  SelectorStruct
 ];
@@ -464,16 +675,5 @@ var FieldChildUnionStruct = nullUnion([
 });
-var CardStruct = element("Card", {
-  image: (0, import_superstruct3.optional)((0, import_superstruct3.string)()),
-  title: (0, import_superstruct3.string)(),
-  description: (0, import_superstruct3.optional)((0, import_superstruct3.string)()),
-  value: (0, import_superstruct3.string)(),
-  extra: (0, import_superstruct3.optional)((0, import_superstruct3.string)())
-});
 var HeadingStruct = element("Heading", {
   children: StringElementStruct
 });
-var ImageStruct = element("Image", {
-  src: svg(),
-  alt: (0, import_superstruct3.optional)((0, import_superstruct3.string)())
-});
 var LinkStruct = element("Link", {
@@ -484,5 +684,21 @@ href: (0, import_superstruct3.string)(),
 var TextStruct = element("Text", {
-  children: children([(0, import_superstruct3.string)(), BoldStruct, ItalicStruct, LinkStruct]),
+  children: children([
+    (0, import_superstruct3.string)(),
+    BoldStruct,
+    ItalicStruct,
+    LinkStruct,
+    IconStruct
+  ]),
   alignment: (0, import_superstruct3.optional)(
     nullUnion([literal("start"), literal("center"), literal("end")])
+  ),
+  color: (0, import_superstruct3.optional)(
+    nullUnion([
+      literal("default"),
+      literal("alternative"),
+      literal("muted"),
+      literal("error"),
+      literal("success"),
+      literal("warning")
+    ])
   )
@@ -496,2 +712,3 @@ });
   ImageStruct,
+  IconStruct,
   (0, import_superstruct3.boolean)()
@@ -504,2 +721,3 @@ ]);
   LinkStruct,
+  IconStruct,
   (0, import_superstruct3.string)()
@@ -541,3 +759,5 @@ ]);
   CheckboxStruct,
-  CardStruct
+  CardStruct,
+  IconStruct,
+  SelectorStruct
 ]);
@@ -575,3 +795,6 @@ var RootJSXElementStruct = nullUnion([
   ContainerStruct,
-  CardStruct
+  CardStruct,
+  IconStruct,
+  SelectorStruct,
+  SelectorOptionStruct
 ]);
@@ -578,0 +801,0 @@ function isJSXElement(value) {

dist/jsx/jsx-dev-runtime.js

@@ -119,2 +119,183 @@ "use strict";
 
+// src/jsx/component.ts
+function removeUndefinedProps(props) {
+  return Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== void 0)
+  );
+}
+function createSnapComponent(type) {
+  return (props) => {
+    const { key = null, ...rest } = props;
+    return {
+      type,
+      props: removeUndefinedProps(rest),
+      key
+    };
+  };
+}
+
+// src/jsx/components/Icon.ts
+var IconName = /* @__PURE__ */ ((IconName2) => {
+  IconName2["AddSquare"] = "add-square";
+  IconName2["Add"] = "add";
+  IconName2["Arrow2Down"] = "arrow-2-down";
+  IconName2["Arrow2Left"] = "arrow-2-left";
+  IconName2["Arrow2Right"] = "arrow-2-right";
+  IconName2["Arrow2Up"] = "arrow-2-up";
+  IconName2["Arrow2UpRight"] = "arrow-2-up-right";
+  IconName2["ArrowDoubleLeft"] = "arrow-double-left";
+  IconName2["ArrowDoubleRight"] = "arrow-double-right";
+  IconName2["ArrowDown"] = "arrow-down";
+  IconName2["ArrowLeft"] = "arrow-left";
+  IconName2["ArrowRight"] = "arrow-right";
+  IconName2["ArrowUp"] = "arrow-up";
+  IconName2["BankToken"] = "bank-token";
+  IconName2["Bank"] = "bank";
+  IconName2["Book"] = "book";
+  IconName2["Bookmark"] = "bookmark";
+  IconName2["Bridge"] = "bridge";
+  IconName2["Calculator"] = "calculator";
+  IconName2["CardPos"] = "card-pos";
+  IconName2["CardToken"] = "card-token";
+  IconName2["Card"] = "card";
+  IconName2["Category"] = "category";
+  IconName2["Chart"] = "chart";
+  IconName2["CheckBold"] = "check-bold";
+  IconName2["Check"] = "check";
+  IconName2["Clock"] = "clock";
+  IconName2["Close"] = "close";
+  IconName2["CodeCircle"] = "code-circle";
+  IconName2["Coin"] = "coin";
+  IconName2["Confirmation"] = "confirmation";
+  IconName2["Connect"] = "connect";
+  IconName2["CopySuccess"] = "copy-success";
+  IconName2["Copy"] = "copy";
+  IconName2["Customize"] = "customize";
+  IconName2["Danger"] = "danger";
+  IconName2["Dark"] = "dark";
+  IconName2["Data"] = "data";
+  IconName2["Diagram"] = "diagram";
+  IconName2["DocumentCode"] = "document-code";
+  IconName2["DragDrop"] = "drag-drop";
+  IconName2["DraggingAnimation"] = "dragging-animation";
+  IconName2["PinningAnimation"] = "pinning-animation";
+  IconName2["Edit"] = "edit";
+  IconName2["Eraser"] = "eraser";
+  IconName2["Ethereum"] = "ethereum";
+  IconName2["Expand"] = "expand";
+  IconName2["Explore"] = "explore";
+  IconName2["Export"] = "export";
+  IconName2["EyeSlash"] = "eye-slash";
+  IconName2["Eye"] = "eye";
+  IconName2["Filter"] = "filter";
+  IconName2["Flag"] = "flag";
+  IconName2["FlashSlash"] = "flash-slash";
+  IconName2["Flash"] = "flash";
+  IconName2["FullCircle"] = "full-circle";
+  IconName2["Gas"] = "gas";
+  IconName2["GlobalSearch"] = "global-search";
+  IconName2["Global"] = "global";
+  IconName2["Graph"] = "graph";
+  IconName2["Hardware"] = "hardware";
+  IconName2["Heart"] = "heart";
+  IconName2["Hierarchy"] = "hierarchy";
+  IconName2["Home"] = "home";
+  IconName2["Import"] = "import";
+  IconName2["Info"] = "info";
+  IconName2["Key"] = "key";
+  IconName2["Light"] = "light";
+  IconName2["Link"] = "link";
+  IconName2["Loading"] = "loading";
+  IconName2["LockCircle"] = "lock-circle";
+  IconName2["LockSlash"] = "lock-slash";
+  IconName2["Lock"] = "lock";
+  IconName2["Login"] = "login";
+  IconName2["Logout"] = "logout";
+  IconName2["Menu"] = "menu";
+  IconName2["MessageQuestion"] = "message-question";
+  IconName2["Messages"] = "messages";
+  IconName2["MinusBold"] = "minus-bold";
+  IconName2["MinusSquare"] = "minus-square";
+  IconName2["Minus"] = "minus";
+  IconName2["Mobile"] = "mobile";
+  IconName2["Money"] = "money";
+  IconName2["Monitor"] = "monitor";
+  IconName2["MoreHorizontal"] = "more-horizontal";
+  IconName2["MoreVertical"] = "more-vertical";
+  IconName2["NotificationCircle"] = "notification-circle";
+  IconName2["Notification"] = "notification";
+  IconName2["PasswordCheck"] = "password-check";
+  IconName2["People"] = "people";
+  IconName2["Pin"] = "pin";
+  IconName2["ProgrammingArrows"] = "programming-arrows";
+  IconName2["Custody"] = "custody";
+  IconName2["Question"] = "question";
+  IconName2["Received"] = "received";
+  IconName2["Refresh"] = "refresh";
+  IconName2["Save"] = "save";
+  IconName2["ScanBarcode"] = "scan-barcode";
+  IconName2["ScanFocus"] = "scan-focus";
+  IconName2["Scan"] = "scan";
+  IconName2["Scroll"] = "scroll";
+  IconName2["Search"] = "search";
+  IconName2["SecurityCard"] = "security-card";
+  IconName2["SecurityCross"] = "security-cross";
+  IconName2["SecurityKey"] = "security-key";
+  IconName2["SecuritySearch"] = "security-search";
+  IconName2["SecuritySlash"] = "security-slash";
+  IconName2["SecurityTick"] = "security-tick";
+  IconName2["SecurityTime"] = "security-time";
+  IconName2["SecurityUser"] = "security-user";
+  IconName2["Security"] = "security";
+  IconName2["Send1"] = "send-1";
+  IconName2["Send2"] = "send-2";
+  IconName2["Setting"] = "setting";
+  IconName2["Slash"] = "slash";
+  IconName2["SnapsMobile"] = "snaps-mobile";
+  IconName2["SnapsPlus"] = "snaps-plus";
+  IconName2["Snaps"] = "snaps";
+  IconName2["Speedometer"] = "speedometer";
+  IconName2["Star"] = "star";
+  IconName2["Stake"] = "stake";
+  IconName2["Student"] = "student";
+  IconName2["SwapHorizontal"] = "swap-horizontal";
+  IconName2["SwapVertical"] = "swap-vertical";
+  IconName2["Tag"] = "tag";
+  IconName2["Tilde"] = "tilde";
+  IconName2["Timer"] = "timer";
+  IconName2["Trash"] = "trash";
+  IconName2["TrendDown"] = "trend-down";
+  IconName2["TrendUp"] = "trend-up";
+  IconName2["UserCircleAdd"] = "user-circle-add";
+  IconName2["UserCircleLink"] = "user-circle-link";
+  IconName2["UserCircleRemove"] = "user-circle-remove";
+  IconName2["UserCircle"] = "user-circle";
+  IconName2["User"] = "user";
+  IconName2["WalletCard"] = "wallet-card";
+  IconName2["WalletMoney"] = "wallet-money";
+  IconName2["Wallet"] = "wallet";
+  IconName2["Warning"] = "warning";
+  IconName2["Twitter"] = "twitter";
+  IconName2["QrCode"] = "qr-code";
+  IconName2["UserCheck"] = "user-check";
+  IconName2["Unpin"] = "unpin";
+  IconName2["Ban"] = "ban";
+  IconName2["Bold"] = "bold";
+  IconName2["CircleX"] = "circle-x";
+  IconName2["Download"] = "download";
+  IconName2["FileIcon"] = "file";
+  IconName2["Flask"] = "flask";
+  IconName2["Plug"] = "plug";
+  IconName2["Share"] = "share";
+  IconName2["Square"] = "square";
+  IconName2["Tint"] = "tint";
+  IconName2["Upload"] = "upload";
+  IconName2["Usb"] = "usb";
+  IconName2["Wifi"] = "wifi";
+  IconName2["PlusMinus"] = "plus-minus";
+  return IconName2;
+})(IconName || {});
+var TYPE = "Icon";
+var Icon = createSnapComponent(TYPE);
+
 // src/jsx/validation.ts
@@ -147,4 +328,18 @@ var KeyStruct = nullUnion([(0, import_superstruct3.string)(), (0, import_superstruct3.number)()]);
 }
+var ImageStruct = element("Image", {
+  src: svg(),
+  alt: (0, import_superstruct3.optional)((0, import_superstruct3.string)())
+});
+var IconNameStruct = nullUnion(
+  Object.values(IconName).map((name) => literal(name))
+);
+var IconStruct = element("Icon", {
+  name: IconNameStruct,
+  color: (0, import_superstruct3.optional)(
+    nullUnion([literal("default"), literal("primary"), literal("muted")])
+  ),
+  size: (0, import_superstruct3.optional)(nullUnion([literal("md"), literal("inherit")]))
+});
 var ButtonStruct = element("Button", {
-  children: StringElementStruct,
+  children: children([StringElementStruct, ImageStruct, IconStruct]),
   name: (0, import_superstruct3.optional)((0, import_superstruct3.string)()),
@@ -171,3 +366,3 @@ type: (0, import_superstruct3.optional)(nullUnion([literal("button"), literal("submit")])),
   value: (0, import_superstruct3.string)(),
-  children: (0, import_superstruct3.string)()
+  children: nullUnion([(0, import_superstruct3.string)()])
 });
@@ -179,2 +374,22 @@ var DropdownStruct = element("Dropdown", {
 });
+var CardStruct = element("Card", {
+  image: (0, import_superstruct3.optional)((0, import_superstruct3.string)()),
+  title: (0, import_superstruct3.string)(),
+  description: (0, import_superstruct3.optional)((0, import_superstruct3.string)()),
+  value: (0, import_superstruct3.string)(),
+  extra: (0, import_superstruct3.optional)((0, import_superstruct3.string)())
+});
+var SelectorOptionStruct = element(
+  "SelectorOption",
+  {
+    value: (0, import_superstruct3.string)(),
+    children: CardStruct
+  }
+);
+var SelectorStruct = element("Selector", {
+  name: (0, import_superstruct3.string)(),
+  title: (0, import_superstruct3.string)(),
+  value: (0, import_superstruct3.optional)((0, import_superstruct3.string)()),
+  children: children([SelectorOptionStruct])
+});
 var RadioStruct = element("Radio", {
@@ -206,3 +421,4 @@ value: (0, import_superstruct3.string)(),
   FileInputStruct,
-  CheckboxStruct
+  CheckboxStruct,
+  SelectorStruct
 ];
@@ -294,16 +510,5 @@ var FieldChildUnionStruct = nullUnion([
 });
-var CardStruct = element("Card", {
-  image: (0, import_superstruct3.optional)((0, import_superstruct3.string)()),
-  title: (0, import_superstruct3.string)(),
-  description: (0, import_superstruct3.optional)((0, import_superstruct3.string)()),
-  value: (0, import_superstruct3.string)(),
-  extra: (0, import_superstruct3.optional)((0, import_superstruct3.string)())
-});
 var HeadingStruct = element("Heading", {
   children: StringElementStruct
 });
-var ImageStruct = element("Image", {
-  src: svg(),
-  alt: (0, import_superstruct3.optional)((0, import_superstruct3.string)())
-});
 var LinkStruct = element("Link", {
@@ -314,5 +519,21 @@ href: (0, import_superstruct3.string)(),
 var TextStruct = element("Text", {
-  children: children([(0, import_superstruct3.string)(), BoldStruct, ItalicStruct, LinkStruct]),
+  children: children([
+    (0, import_superstruct3.string)(),
+    BoldStruct,
+    ItalicStruct,
+    LinkStruct,
+    IconStruct
+  ]),
   alignment: (0, import_superstruct3.optional)(
     nullUnion([literal("start"), literal("center"), literal("end")])
+  ),
+  color: (0, import_superstruct3.optional)(
+    nullUnion([
+      literal("default"),
+      literal("alternative"),
+      literal("muted"),
+      literal("error"),
+      literal("success"),
+      literal("warning")
+    ])
   )
@@ -326,2 +547,3 @@ });
   ImageStruct,
+  IconStruct,
   (0, import_superstruct3.boolean)()
@@ -334,2 +556,3 @@ ]);
   LinkStruct,
+  IconStruct,
   (0, import_superstruct3.string)()
@@ -371,3 +594,5 @@ ]);
   CheckboxStruct,
-  CardStruct
+  CardStruct,
+  IconStruct,
+  SelectorStruct
 ]);
@@ -405,3 +630,6 @@ var RootJSXElementStruct = nullUnion([
   ContainerStruct,
-  CardStruct
+  CardStruct,
+  IconStruct,
+  SelectorStruct,
+  SelectorOptionStruct
 ]);
@@ -408,0 +636,0 @@ function isJSXElement(value) {

dist/types/jsx/components/form/Button.d.ts

@@ -1,2 +0,4 @@
-import type { StringElement } from '../../component';
+import type { SnapsChildren, StringElement } from '../../component';
+import type { IconElement } from '../Icon';
+import type { ImageElement } from '../Image';
 /**
@@ -15,3 +17,3 @@ * The props of the {@link Button} component.
 export type ButtonProps = {
-    children: StringElement;
+    children: SnapsChildren<StringElement | IconElement | ImageElement>;
     name?: string | undefined;
@@ -18,0 +20,0 @@ type?: 'button' | 'submit' | undefined;

dist/types/jsx/components/form/Field.d.ts

@@ -7,2 +7,3 @@ import type { ButtonElement } from './Button';
 import type { RadioGroupElement } from './RadioGroup';
+import type { SelectorElement } from './Selector';
 /**
@@ -18,3 +19,3 @@ * The props of the {@link Field} component.
     error?: string | undefined;
-    children: [InputElement, ButtonElement] | DropdownElement | RadioGroupElement | FileInputElement | InputElement | CheckboxElement;
+    children: [InputElement, ButtonElement] | DropdownElement | RadioGroupElement | FileInputElement | InputElement | CheckboxElement | SelectorElement;
 };
@@ -21,0 +22,0 @@ /**

dist/types/jsx/components/form/index.d.ts

@@ -11,2 +11,4 @@ import type { ButtonElement } from './Button';
 import type { RadioGroupElement } from './RadioGroup';
+import type { SelectorElement } from './Selector';
+import type { SelectorOptionElement } from './SelectorOption';
 export * from './Button';
@@ -22,2 +24,4 @@ export * from './Checkbox';
 export * from './Input';
-export type StandardFormElement = ButtonElement | CheckboxElement | FormElement | FieldElement | FileInputElement | InputElement | DropdownElement | OptionElement | RadioElement | RadioGroupElement;
+export * from './Selector';
+export * from './SelectorOption';
+export type StandardFormElement = ButtonElement | CheckboxElement | FormElement | FieldElement | FileInputElement | InputElement | DropdownElement | OptionElement | RadioElement | RadioGroupElement | SelectorElement | SelectorOptionElement;

dist/types/jsx/components/index.d.ts

@@ -11,2 +11,3 @@ import type { AddressElement } from './Address';
 import type { HeadingElement } from './Heading';
+import type { IconElement } from './Icon';
 import type { ImageElement } from './Image';
@@ -28,2 +29,3 @@ import type { LinkElement } from './Link';
 export * from './Heading';
+export * from './Icon';
 export * from './Image';
@@ -40,2 +42,2 @@ export * from './Link';
  */
-export type JSXElement = StandardFormElement | StandardFormattingElement | AddressElement | BoxElement | CardElement | ContainerElement | CopyableElement | DividerElement | FooterElement | ValueElement | HeadingElement | ImageElement | LinkElement | RowElement | SpinnerElement | TextElement | TooltipElement;
+export type JSXElement = StandardFormElement | StandardFormattingElement | AddressElement | BoxElement | CardElement | ContainerElement | CopyableElement | DividerElement | FooterElement | ValueElement | HeadingElement | IconElement | ImageElement | LinkElement | RowElement | SpinnerElement | TextElement | TooltipElement;

dist/types/jsx/components/Text.d.ts

 import type { SnapsChildren } from '../component';
 import type { StandardFormattingElement } from './formatting';
+import type { IconElement } from './Icon';
 import type { LinkElement } from './Link';
@@ -7,4 +8,8 @@ /**
  */
-export type TextChildren = SnapsChildren<string | StandardFormattingElement | LinkElement>;
+export type TextChildren = SnapsChildren<string | StandardFormattingElement | LinkElement | IconElement>;
 /**
+ * The colors available to the Text {@link Text} component.
+ */
+export type TextColors = 'default' | 'alternative' | 'muted' | 'error' | 'success' | 'warning';
+/**
  * The props of the {@link Text} component.
@@ -17,2 +22,3 @@ *
     alignment?: 'start' | 'center' | 'end' | undefined;
+    color?: TextColors | undefined;
 };
@@ -19,0 +25,0 @@ /**

dist/types/jsx/components/Tooltip.d.ts

 import type { StandardFormattingElement } from './formatting';
+import type { IconElement } from './Icon';
 import type { ImageElement } from './Image';
 import type { LinkElement } from './Link';
 import type { TextElement } from './Text';
-export type TooltipChildren = TextElement | StandardFormattingElement | LinkElement | ImageElement | boolean | null;
+export type TooltipChildren = TextElement | StandardFormattingElement | LinkElement | ImageElement | IconElement | boolean | null;
 /**
@@ -14,3 +15,3 @@ * The props of the {@link Tooltip} component.
     children: TooltipChildren;
-    content: TextElement | StandardFormattingElement | LinkElement | string;
+    content: TextElement | StandardFormattingElement | LinkElement | IconElement | string;
 };
@@ -17,0 +18,0 @@ /**

dist/types/jsx/validation.d.ts

 import type { Struct } from '@metamask/superstruct';
 import type { Describe } from '../internals';
 import type { GenericSnapElement, Key, SnapElement, SnapsChildren, StringElement } from './component';
-import type { AddressElement, BoldElement, BoxElement, ButtonElement, CheckboxElement, CardElement, CopyableElement, DividerElement, DropdownElement, OptionElement, RadioElement, RadioGroupElement, FieldElement, FormElement, HeadingElement, ImageElement, InputElement, ItalicElement, JSXElement, LinkElement, RowElement, SpinnerElement, StandardFormattingElement, TextElement, TooltipElement, ValueElement, FileInputElement, ContainerElement, FooterElement } from './components';
+import { type AddressElement, type BoldElement, type BoxElement, type ButtonElement, type CheckboxElement, type CardElement, type CopyableElement, type DividerElement, type DropdownElement, type OptionElement, type RadioElement, type RadioGroupElement, type FieldElement, type FormElement, type HeadingElement, type ImageElement, type InputElement, type ItalicElement, type JSXElement, type LinkElement, type RowElement, type SpinnerElement, type StandardFormattingElement, type TextElement, type TooltipElement, type ValueElement, type FileInputElement, type ContainerElement, type FooterElement, type IconElement, type SelectorElement, type SelectorOptionElement } from './components';
 /**
@@ -18,2 +18,10 @@ * A struct for the {@link Key} type.
 /**
+ * A struct for the {@link ImageElement} type.
+ */
+export declare const ImageStruct: Describe<ImageElement>;
+/**
+ * A struct for the {@link IconElement} type.
+ */
+export declare const IconStruct: Describe<IconElement>;
+/**
  * A struct for the {@link ButtonElement} type.
@@ -39,2 +47,14 @@ */
 /**
+ * A struct for the {@link CardElement} type.
+ */
+export declare const CardStruct: Describe<CardElement>;
+/**
+ * A struct for the {@link SelectorOptionElement} type.
+ */
+export declare const SelectorOptionStruct: Describe<SelectorOptionElement>;
+/**
+ * A struct for the {@link SelectorElement} type.
+ */
+export declare const SelectorStruct: Describe<SelectorElement>;
+/**
  * A struct for the {@link RadioElement} type.
@@ -62,3 +82,3 @@ */
     }, "Radio">>;
-}, "RadioGroup"> | SnapElement<import("./components").FileInputProps, "FileInput">, null>;
+}, "RadioGroup"> | SnapElement<import("./components").FileInputProps, "FileInput"> | SnapElement<import("./components").SelectorProps, "Selector">, null>;
 /**
@@ -125,6 +145,2 @@ * A struct for the {@link FieldElement} type.
 /**
- * A struct for the {@link CardElement} type.
- */
-export declare const CardStruct: Describe<CardElement>;
-/**
  * A struct for the {@link HeadingElement} type.
@@ -134,6 +150,2 @@ */
 /**
- * A struct for the {@link ImageElement} type.
- */
-export declare const ImageStruct: Describe<ImageElement>;
-/**
  * A struct for the {@link LinkElement} type.
@@ -150,6 +162,6 @@ */
  */
-export declare const TooltipChildStruct: Struct<boolean | SnapElement<import("./components").BoldProps, "Bold"> | SnapElement<import("./components").ItalicProps, "Italic"> | SnapElement<{
+export declare const TooltipChildStruct: Struct<boolean | SnapElement<import("./components").IconProps, "Icon"> | SnapElement<{
     src: string;
     alt?: string | undefined;
-}, "Image"> | SnapElement<import("./components").LinkProps, "Link"> | SnapElement<import("./components").TextProps, "Text">, null>;
+}, "Image"> | SnapElement<import("./components").BoldProps, "Bold"> | SnapElement<import("./components").ItalicProps, "Italic"> | SnapElement<import("./components").LinkProps, "Link"> | SnapElement<import("./components").TextProps, "Text">, null>;
 /**
@@ -159,3 +171,3 @@ * A subset of JSX elements that are allowed as content of the Tooltip component.
  */
-export declare const TooltipContentStruct: Struct<string | SnapElement<import("./components").BoldProps, "Bold"> | SnapElement<import("./components").ItalicProps, "Italic"> | SnapElement<import("./components").LinkProps, "Link"> | SnapElement<import("./components").TextProps, "Text">, null>;
+export declare const TooltipContentStruct: Struct<string | SnapElement<import("./components").IconProps, "Icon"> | SnapElement<import("./components").BoldProps, "Bold"> | SnapElement<import("./components").ItalicProps, "Italic"> | SnapElement<import("./components").LinkProps, "Link"> | SnapElement<import("./components").TextProps, "Text">, null>;
 /**
@@ -178,3 +190,6 @@ * A struct for the {@link TooltipElement} type.
  */
-export declare const BoxChildStruct: Struct<SnapElement<import("./components").ButtonProps, "Button"> | SnapElement<import("./components").CheckboxProps, "Checkbox"> | SnapElement<import("./components").FormProps, "Form"> | SnapElement<import("./components").InputProps, "Input"> | SnapElement<import("./components").DropdownProps, "Dropdown"> | SnapElement<{
+export declare const BoxChildStruct: Struct<SnapElement<import("./components").IconProps, "Icon"> | SnapElement<{
+    src: string;
+    alt?: string | undefined;
+}, "Image"> | SnapElement<import("./components").ButtonProps, "Button"> | SnapElement<import("./components").CheckboxProps, "Checkbox"> | SnapElement<import("./components").FormProps, "Form"> | SnapElement<import("./components").InputProps, "Input"> | SnapElement<import("./components").DropdownProps, "Dropdown"> | SnapElement<{
     name: string;
@@ -186,8 +201,5 @@ value?: string | undefined;
     }, "Radio">>;
-}, "RadioGroup"> | SnapElement<import("./components").FileInputProps, "FileInput"> | SnapElement<import("./components").BoldProps, "Bold"> | SnapElement<import("./components").ItalicProps, "Italic"> | SnapElement<import("./components").AddressProps, "Address"> | SnapElement<import("./components").BoxProps, "Box"> | SnapElement<import("./components").CardProps, "Card"> | SnapElement<import("./components").CopyableProps, "Copyable"> | SnapElement<Record<string, never>, "Divider"> | SnapElement<{
+}, "RadioGroup"> | SnapElement<import("./components").FileInputProps, "FileInput"> | SnapElement<import("./components").CardProps, "Card"> | SnapElement<import("./components").SelectorProps, "Selector"> | SnapElement<import("./components").BoldProps, "Bold"> | SnapElement<import("./components").ItalicProps, "Italic"> | SnapElement<import("./components").AddressProps, "Address"> | SnapElement<import("./components").BoxProps, "Box"> | SnapElement<import("./components").CopyableProps, "Copyable"> | SnapElement<Record<string, never>, "Divider"> | SnapElement<{
     children: StringElement;
-}, "Heading"> | SnapElement<{
-    src: string;
-    alt?: string | undefined;
-}, "Image"> | SnapElement<import("./components").LinkProps, "Link"> | SnapElement<import("./components").TextProps, "Text"> | SnapElement<import("./components").RowProps, "Row"> | SnapElement<Record<string, never>, "Spinner"> | SnapElement<import("./components").TooltipProps, "Tooltip">, null>;
+}, "Heading"> | SnapElement<import("./components").LinkProps, "Link"> | SnapElement<import("./components").TextProps, "Text"> | SnapElement<import("./components").RowProps, "Row"> | SnapElement<Record<string, never>, "Spinner"> | SnapElement<import("./components").TooltipProps, "Tooltip">, null>;
 /**
@@ -197,3 +209,6 @@ * For now, the allowed JSX elements at the root are the same as the allowed
  */
-export declare const RootJSXElementStruct: Struct<SnapElement<import("./components").ButtonProps, "Button"> | SnapElement<import("./components").CheckboxProps, "Checkbox"> | SnapElement<import("./components").FormProps, "Form"> | SnapElement<import("./components").InputProps, "Input"> | SnapElement<import("./components").DropdownProps, "Dropdown"> | SnapElement<{
+export declare const RootJSXElementStruct: Struct<SnapElement<import("./components").IconProps, "Icon"> | SnapElement<{
+    src: string;
+    alt?: string | undefined;
+}, "Image"> | SnapElement<import("./components").ButtonProps, "Button"> | SnapElement<import("./components").CheckboxProps, "Checkbox"> | SnapElement<import("./components").FormProps, "Form"> | SnapElement<import("./components").InputProps, "Input"> | SnapElement<import("./components").DropdownProps, "Dropdown"> | SnapElement<{
     name: string;
@@ -205,8 +220,5 @@ value?: string | undefined;
     }, "Radio">>;
-}, "RadioGroup"> | SnapElement<import("./components").FileInputProps, "FileInput"> | SnapElement<import("./components").BoldProps, "Bold"> | SnapElement<import("./components").ItalicProps, "Italic"> | SnapElement<import("./components").AddressProps, "Address"> | SnapElement<import("./components").BoxProps, "Box"> | SnapElement<import("./components").CardProps, "Card"> | SnapElement<import("./components").ContainerProps, "Container"> | SnapElement<import("./components").CopyableProps, "Copyable"> | SnapElement<Record<string, never>, "Divider"> | SnapElement<{
+}, "RadioGroup"> | SnapElement<import("./components").FileInputProps, "FileInput"> | SnapElement<import("./components").CardProps, "Card"> | SnapElement<import("./components").SelectorProps, "Selector"> | SnapElement<import("./components").BoldProps, "Bold"> | SnapElement<import("./components").ItalicProps, "Italic"> | SnapElement<import("./components").AddressProps, "Address"> | SnapElement<import("./components").BoxProps, "Box"> | SnapElement<import("./components").ContainerProps, "Container"> | SnapElement<import("./components").CopyableProps, "Copyable"> | SnapElement<Record<string, never>, "Divider"> | SnapElement<{
     children: StringElement;
-}, "Heading"> | SnapElement<{
-    src: string;
-    alt?: string | undefined;
-}, "Image"> | SnapElement<import("./components").LinkProps, "Link"> | SnapElement<import("./components").TextProps, "Text"> | SnapElement<import("./components").RowProps, "Row"> | SnapElement<Record<string, never>, "Spinner"> | SnapElement<import("./components").TooltipProps, "Tooltip">, null>;
+}, "Heading"> | SnapElement<import("./components").LinkProps, "Link"> | SnapElement<import("./components").TextProps, "Text"> | SnapElement<import("./components").RowProps, "Row"> | SnapElement<Record<string, never>, "Spinner"> | SnapElement<import("./components").TooltipProps, "Tooltip">, null>;
 /**
@@ -213,0 +225,0 @@ * A struct for the {@link JSXElement} type.

dist/types/types/interface.d.ts

@@ -105,3 +105,6 @@ import type { Infer } from '@metamask/superstruct';
     })[];
-} | import("../jsx").SnapElement<import("../jsx").ButtonProps, "Button"> | import("../jsx").SnapElement<import("../jsx").CheckboxProps, "Checkbox"> | import("../jsx").SnapElement<import("../jsx").FormProps, "Form"> | import("../jsx").SnapElement<import("../jsx").InputProps, "Input"> | import("../jsx").SnapElement<import("../jsx").DropdownProps, "Dropdown"> | import("../jsx").SnapElement<{
+} | import("../jsx").SnapElement<import("../jsx").IconProps, "Icon"> | import("../jsx").SnapElement<{
+    src: string;
+    alt?: string | undefined;
+}, "Image"> | import("../jsx").SnapElement<import("../jsx").ButtonProps, "Button"> | import("../jsx").SnapElement<import("../jsx").CheckboxProps, "Checkbox"> | import("../jsx").SnapElement<import("../jsx").FormProps, "Form"> | import("../jsx").SnapElement<import("../jsx").InputProps, "Input"> | import("../jsx").SnapElement<import("../jsx").DropdownProps, "Dropdown"> | import("../jsx").SnapElement<{
     name: string;
@@ -113,9 +116,6 @@ value?: string | undefined;
     }, "Radio">>;
-}, "RadioGroup"> | import("../jsx").SnapElement<import("../jsx").FileInputProps, "FileInput"> | import("../jsx").SnapElement<import("../jsx").BoldProps, "Bold"> | import("../jsx").SnapElement<import("../jsx").ItalicProps, "Italic"> | import("../jsx").SnapElement<import("../jsx").AddressProps, "Address"> | import("../jsx").SnapElement<import("../jsx").BoxProps, "Box"> | import("../jsx").SnapElement<import("../jsx").CardProps, "Card"> | import("../jsx").SnapElement<import("../jsx").ContainerProps, "Container"> | import("../jsx").SnapElement<import("../jsx").CopyableProps, "Copyable"> | import("../jsx").SnapElement<Record<string, never>, "Divider"> | import("../jsx").SnapElement<{
+}, "RadioGroup"> | import("../jsx").SnapElement<import("../jsx").FileInputProps, "FileInput"> | import("../jsx").SnapElement<import("../jsx").CardProps, "Card"> | import("../jsx").SnapElement<import("../jsx").SelectorProps, "Selector"> | import("../jsx").SnapElement<import("../jsx").BoldProps, "Bold"> | import("../jsx").SnapElement<import("../jsx").ItalicProps, "Italic"> | import("../jsx").SnapElement<import("../jsx").AddressProps, "Address"> | import("../jsx").SnapElement<import("../jsx").BoxProps, "Box"> | import("../jsx").SnapElement<import("../jsx").ContainerProps, "Container"> | import("../jsx").SnapElement<import("../jsx").CopyableProps, "Copyable"> | import("../jsx").SnapElement<Record<string, never>, "Divider"> | import("../jsx").SnapElement<{
     children: import("../jsx").StringElement;
-}, "Heading"> | import("../jsx").SnapElement<{
-    src: string;
-    alt?: string | undefined;
-}, "Image"> | import("../jsx").SnapElement<import("../jsx").LinkProps, "Link"> | import("../jsx").SnapElement<import("../jsx").TextProps, "Text"> | import("../jsx").SnapElement<import("../jsx").RowProps, "Row"> | import("../jsx").SnapElement<Record<string, never>, "Spinner"> | import("../jsx").SnapElement<import("../jsx").TooltipProps, "Tooltip">, null>;
+}, "Heading"> | import("../jsx").SnapElement<import("../jsx").LinkProps, "Link"> | import("../jsx").SnapElement<import("../jsx").TextProps, "Text"> | import("../jsx").SnapElement<import("../jsx").RowProps, "Row"> | import("../jsx").SnapElement<Record<string, never>, "Spinner"> | import("../jsx").SnapElement<import("../jsx").TooltipProps, "Tooltip">, null>;
 export declare const InterfaceContextStruct: import("@metamask/superstruct").Struct<Record<string, import("@metamask/utils").Json>, null>;
 export type InterfaceContext = Infer<typeof InterfaceContextStruct>;

package.json

 {
   "name": "@metamask/snaps-sdk",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1014971

increased by17.11%

Number of package files

133

increased by2.31%

Lines of code

11104

increased by17.32%

No dependency changes