@workos-inc/widgets 1.10.2-next.1776269843020 → 1.10.2-next.1776358760696

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # Changelog
 
-## 1.10.2-next.1776269843020
+## 1.10.2-next.1776358760696
 
 ### Patch Changes
 
-- [#209](https://github.com/workos/widgets/pull/209) [`3cab61c`](https://github.com/workos/widgets/commit/3cab61ce4bc88b6dedb7ecba4ce2b42dc8301fbc) Thanks [@chaance](https://github.com/chaance)! - Internal refactoring.
+- [#222](https://github.com/workos/widgets/pull/222) [`c6d4ca0`](https://github.com/workos/widgets/commit/c6d4ca0ef5a5d4d11e83baee6adc2e5b75203ef9) Thanks [@chaance](https://github.com/chaance)! - Fix semantic markup for data list elements in the User Profile Widget
 
 ## 1.10.1
 

package/dist/cjs/lib/api-keys/api-key-details-card.cjs

@@ -1,7 +1,9 @@
 "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)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   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 api_key_details_card_exports = {};
 __export(api_key_details_card_exports, {
@@ -23,15 +33,16 @@ __export(api_key_details_card_exports, {
 module.exports = __toCommonJS(api_key_details_card_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_themes = require("@radix-ui/themes");
+var DataList = __toESM(require("../data-list.js"), 1);
 var import_relative_time = require("./relative-time.js");
 var import_translation = require("../i18n/translation.js");
 function ApiKeyDetailsCard({
   apiKey,
   ...cardProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", ...cardProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DataList.Root, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DataList.Item, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", ...cardProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataList.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataList.Item, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataList.Label, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_translation.Translation,
         {
           defaultMessage: "Name",
@@ -39,10 +50,10 @@ function ApiKeyDetailsCard({
           description: "Label for API key name field"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Value, { children: apiKey.name })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataList.Value, { children: apiKey.name })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DataList.Item, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataList.Item, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataList.Label, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_translation.Translation,
         {
           defaultMessage: "Value",
@@ -50,10 +61,10 @@ function ApiKeyDetailsCard({
           description: "Label for API key value field"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Value, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Code, { color: "gray", children: apiKey.obfuscatedValue }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataList.Value, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Code, { color: "gray", children: apiKey.obfuscatedValue }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DataList.Item, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataList.Item, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataList.Label, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_translation.Translation,
         {
           defaultMessage: "Last used",
@@ -62,7 +73,7 @@ function ApiKeyDetailsCard({
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_themes.DataList.Value,
+        DataList.Value,
         {
           style: apiKey.lastUsedAt ? void 0 : { color: "var(--gray-10)" },
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/cjs/lib/api-keys/api-key-details-card.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/api-keys/api-key-details-card.tsx"],"sourcesContent":["import { DataList, Card, Code, CardProps } from \"@radix-ui/themes\";\nimport { RelativeTime } from \"./relative-time.js\";\nimport { ListOrganizationApiKeysResponseData } from \"../../api/endpoint.js\";\nimport { Translation } from \"../i18n/translation.js\";\n\nexport function ApiKeyDetailsCard({\n  apiKey,\n  ...cardProps\n}: { apiKey: ListOrganizationApiKeysResponseData } & CardProps) {\n  return (\n    <Card size=\"2\" {...cardProps}>\n      <DataList.Root>\n        <DataList.Item>\n          <DataList.Label>\n            <Translation\n              defaultMessage=\"Name\"\n              id=\"tuCHkH\"\n              description=\"Label for API key name field\"\n            />\n          </DataList.Label>\n          <DataList.Value>{apiKey.name}</DataList.Value>\n        </DataList.Item>\n        <DataList.Item>\n          <DataList.Label>\n            <Translation\n              defaultMessage=\"Value\"\n              id=\"HnuClZ\"\n              description=\"Label for API key value field\"\n            />\n          </DataList.Label>\n          <DataList.Value>\n            <Code color=\"gray\">{apiKey.obfuscatedValue}</Code>\n          </DataList.Value>\n        </DataList.Item>\n        <DataList.Item>\n          <DataList.Label>\n            <Translation\n              defaultMessage=\"Last used\"\n              id=\"elg/zm\"\n              description=\"Label for API key last used timestamp\"\n            />\n          </DataList.Label>\n          <DataList.Value\n            style={apiKey.lastUsedAt ? undefined : { color: \"var(--gray-10)\" }}\n          >\n            <RelativeTime\n              date={apiKey.lastUsedAt ? new Date(apiKey.lastUsedAt) : undefined}\n            />\n          </DataList.Value>\n        </DataList.Item>\n      </DataList.Root>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYQ;AAZR,oBAAgD;AAChD,2BAA6B;AAE7B,yBAA4B;AAErB,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,GAAG;AACL,GAAgE;AAC9D,SACE,4CAAC,sBAAK,MAAK,KAAK,GAAG,WACjB,uDAAC,uBAAS,MAAT,EACC;AAAA,iDAAC,uBAAS,MAAT,EACC;AAAA,kDAAC,uBAAS,OAAT,EACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA,4CAAC,uBAAS,OAAT,EAAgB,iBAAO,MAAK;AAAA,OAC/B;AAAA,IACA,6CAAC,uBAAS,MAAT,EACC;AAAA,kDAAC,uBAAS,OAAT,EACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA,4CAAC,uBAAS,OAAT,EACC,sDAAC,sBAAK,OAAM,QAAQ,iBAAO,iBAAgB,GAC7C;AAAA,OACF;AAAA,IACA,6CAAC,uBAAS,MAAT,EACC;AAAA,kDAAC,uBAAS,OAAT,EACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA;AAAA,QAAC,uBAAS;AAAA,QAAT;AAAA,UACC,OAAO,OAAO,aAAa,SAAY,EAAE,OAAO,iBAAiB;AAAA,UAEjE;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,OAAO,aAAa,IAAI,KAAK,OAAO,UAAU,IAAI;AAAA;AAAA,UAC1D;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/lib/api-keys/api-key-details-card.tsx"],"sourcesContent":["import { Card, Code, CardProps } from \"@radix-ui/themes\";\nimport * as DataList from \"../data-list.js\";\nimport { RelativeTime } from \"./relative-time.js\";\nimport { ListOrganizationApiKeysResponseData } from \"../../api/endpoint.js\";\nimport { Translation } from \"../i18n/translation.js\";\n\nexport function ApiKeyDetailsCard({\n  apiKey,\n  ...cardProps\n}: { apiKey: ListOrganizationApiKeysResponseData } & CardProps) {\n  return (\n    <Card size=\"2\" {...cardProps}>\n      <DataList.Root>\n        <DataList.Item>\n          <DataList.Label>\n            <Translation\n              defaultMessage=\"Name\"\n              id=\"tuCHkH\"\n              description=\"Label for API key name field\"\n            />\n          </DataList.Label>\n          <DataList.Value>{apiKey.name}</DataList.Value>\n        </DataList.Item>\n        <DataList.Item>\n          <DataList.Label>\n            <Translation\n              defaultMessage=\"Value\"\n              id=\"HnuClZ\"\n              description=\"Label for API key value field\"\n            />\n          </DataList.Label>\n          <DataList.Value>\n            <Code color=\"gray\">{apiKey.obfuscatedValue}</Code>\n          </DataList.Value>\n        </DataList.Item>\n        <DataList.Item>\n          <DataList.Label>\n            <Translation\n              defaultMessage=\"Last used\"\n              id=\"elg/zm\"\n              description=\"Label for API key last used timestamp\"\n            />\n          </DataList.Label>\n          <DataList.Value\n            style={apiKey.lastUsedAt ? undefined : { color: \"var(--gray-10)\" }}\n          >\n            <RelativeTime\n              date={apiKey.lastUsedAt ? new Date(apiKey.lastUsedAt) : undefined}\n            />\n          </DataList.Value>\n        </DataList.Item>\n      </DataList.Root>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaQ;AAbR,oBAAsC;AACtC,eAA0B;AAC1B,2BAA6B;AAE7B,yBAA4B;AAErB,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,GAAG;AACL,GAAgE;AAC9D,SACE,4CAAC,sBAAK,MAAK,KAAK,GAAG,WACjB,uDAAC,SAAS,MAAT,EACC;AAAA,iDAAC,SAAS,MAAT,EACC;AAAA,kDAAC,SAAS,OAAT,EACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA,4CAAC,SAAS,OAAT,EAAgB,iBAAO,MAAK;AAAA,OAC/B;AAAA,IACA,6CAAC,SAAS,MAAT,EACC;AAAA,kDAAC,SAAS,OAAT,EACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA,4CAAC,SAAS,OAAT,EACC,sDAAC,sBAAK,OAAM,QAAQ,iBAAO,iBAAgB,GAC7C;AAAA,OACF;AAAA,IACA,6CAAC,SAAS,MAAT,EACC;AAAA,kDAAC,SAAS,OAAT,EACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA;AAAA,QAAC,SAAS;AAAA,QAAT;AAAA,UACC,OAAO,OAAO,aAAa,SAAY,EAAE,OAAO,iBAAiB;AAAA,UAEjE;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,OAAO,aAAa,IAAI,KAAK,OAAO,UAAU,IAAI;AAAA;AAAA,UAC1D;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/cjs/lib/data-list.cjs

@@ -0,0 +1,130 @@
+"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 data_list_exports = {};
+__export(data_list_exports, {
+  Item: () => DataListItem,
+  Label: () => DataListLabel,
+  Root: () => DataListRoot,
+  Value: () => DataListValue
+});
+module.exports = __toCommonJS(data_list_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"), 1);
+var React = __toESM(require("react"), 1);
+var import_themes = require("@radix-ui/themes");
+var import_radix_ui = require("radix-ui");
+var import_helpers = require("@radix-ui/themes/helpers");
+var import_data_list_props = require("./data-list.props.js");
+const DataListRoot = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      children,
+      className,
+      asChild,
+      as: Tag = "dl",
+      ...dataListProps
+    } = (0, import_helpers.extractProps)(props, import_data_list_props.dataListRootPropDefs);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_radix_ui.Slot.Root,
+      {
+        ...dataListProps,
+        ref: forwardedRef,
+        className: (0, import_clsx.default)("rt-DataListRoot", className),
+        children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { children })
+      }
+    ) });
+  }
+);
+DataListRoot.displayName = "DataList.Root";
+const DataListItem = React.forwardRef(
+  (props, forwardedRef) => {
+    const { children, className, asChild, ...itemProps } = (0, import_helpers.extractProps)(
+      props,
+      import_data_list_props.dataListItemPropDefs
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_radix_ui.Slot.Root,
+      {
+        ...itemProps,
+        ref: forwardedRef,
+        className: (0, import_clsx.default)("rt-DataListItem", className),
+        children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children })
+      }
+    );
+  }
+);
+DataListItem.displayName = "DataList.Item";
+const DataListLabel = React.forwardRef((props, forwardedRef) => {
+  const {
+    asChild,
+    as: Tag = "dt",
+    children,
+    className,
+    color,
+    ...labelProps
+  } = (0, import_helpers.extractProps)(props, import_data_list_props.dataListLabelPropDefs);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.Slot.Root,
+    {
+      ...labelProps,
+      "data-accent-color": color,
+      ref: forwardedRef,
+      className: (0, import_clsx.default)("rt-DataListLabel", className),
+      children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { children })
+    }
+  );
+});
+DataListLabel.displayName = "DataList.Label";
+const DataListValue = React.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    asChild,
+    as: Tag = "dd",
+    ...valueProps
+  } = (0, import_helpers.extractProps)(props, import_data_list_props.dataListValuePropDefs);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.Slot.Root,
+    {
+      ...valueProps,
+      ref: forwardedRef,
+      className: (0, import_clsx.default)(className, "rt-DataListValue"),
+      children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { children })
+    }
+  );
+});
+DataListValue.displayName = "DataList.Value";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Item,
+  Label,
+  Root,
+  Value
+});
+//# sourceMappingURL=data-list.cjs.map

package/dist/cjs/lib/data-list.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/data-list.tsx"],"sourcesContent":["import classNames from \"clsx\";\nimport * as React from \"react\";\nimport { Text } from \"@radix-ui/themes\";\nimport { Slot } from \"radix-ui\";\nimport { extractProps } from \"@radix-ui/themes/helpers\";\nimport type {\n  ComponentPropsWithout,\n  RemovedProps,\n} from \"@radix-ui/themes/helpers\";\nimport type { GetPropDefTypes, MarginProps } from \"@radix-ui/themes/props\";\nimport {\n  dataListItemPropDefs,\n  dataListLabelPropDefs,\n  dataListRootPropDefs,\n  dataListValuePropDefs,\n} from \"./data-list.props.js\";\n\ntype DataListRootElement = HTMLDListElement;\ntype DataListRootOwnProps = GetPropDefTypes<typeof dataListRootPropDefs>;\ninterface CommonDataListRootProps extends MarginProps, DataListRootOwnProps {}\ntype DataListRootDivProps = { as?: \"div\" } & ComponentPropsWithout<\n  \"div\",\n  RemovedProps\n>;\ntype DataListRootDlProps = { as?: \"dl\" } & ComponentPropsWithout<\n  \"dl\",\n  RemovedProps\n>;\ntype DataListRootProps = CommonDataListRootProps &\n  (DataListRootDivProps | DataListRootDlProps);\n\nconst DataListRoot = React.forwardRef<DataListRootElement, DataListRootProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className,\n      asChild,\n      as: Tag = \"dl\",\n      ...dataListProps\n    } = extractProps(props, dataListRootPropDefs);\n    return (\n      <Text asChild>\n        <Slot.Root\n          {...dataListProps}\n          ref={forwardedRef}\n          className={classNames(\"rt-DataListRoot\", className)}\n        >\n          {asChild ? children : <Tag>{children}</Tag>}\n        </Slot.Root>\n      </Text>\n    );\n  },\n);\nDataListRoot.displayName = \"DataList.Root\";\n\ntype DataListItemElement = HTMLDivElement;\ntype DataListItemOwnProps = GetPropDefTypes<typeof dataListItemPropDefs>;\ninterface DataListItemProps\n  extends ComponentPropsWithout<\"div\", RemovedProps>, DataListItemOwnProps {}\nconst DataListItem = React.forwardRef<DataListItemElement, DataListItemProps>(\n  (props, forwardedRef) => {\n    const { children, className, asChild, ...itemProps } = extractProps(\n      props,\n      dataListItemPropDefs,\n    );\n    return (\n      <Slot.Root\n        {...itemProps}\n        ref={forwardedRef}\n        className={classNames(\"rt-DataListItem\", className)}\n      >\n        {asChild ? children : <div>{children}</div>}\n      </Slot.Root>\n    );\n  },\n);\nDataListItem.displayName = \"DataList.Item\";\n\ntype DataListLabelElement = React.ComponentRef<\"dt\">;\ntype DataListLabelOwnProps = GetPropDefTypes<typeof dataListLabelPropDefs>;\ninterface CommonDataListLabelProps extends MarginProps, DataListLabelOwnProps {}\ntype DataListLabelDtProps = { as?: \"dt\" } & ComponentPropsWithout<\n  \"dt\",\n  RemovedProps\n>;\ntype DataListLabelDivProps = { as?: \"div\" } & ComponentPropsWithout<\n  \"div\",\n  RemovedProps\n>;\ntype DataListLabelProps = CommonDataListLabelProps &\n  (DataListLabelDtProps | DataListLabelDivProps);\n\nconst DataListLabel = React.forwardRef<\n  DataListLabelElement,\n  DataListLabelProps\n>((props, forwardedRef) => {\n  const {\n    asChild,\n    as: Tag = \"dt\",\n    children,\n    className,\n    color,\n    ...labelProps\n  } = extractProps(props, dataListLabelPropDefs);\n  return (\n    <Slot.Root\n      {...labelProps}\n      data-accent-color={color}\n      ref={forwardedRef}\n      className={classNames(\"rt-DataListLabel\", className)}\n    >\n      {asChild ? children : <Tag>{children}</Tag>}\n    </Slot.Root>\n  );\n});\nDataListLabel.displayName = \"DataList.Label\";\n\ntype DataListValueElement = React.ComponentRef<\"dd\">;\ntype DataListValueOwnProps = GetPropDefTypes<typeof dataListValuePropDefs>;\ninterface CommonDataListValueProps extends MarginProps, DataListValueOwnProps {}\ntype DataListValueDdProps = { as?: \"dd\" } & ComponentPropsWithout<\n  \"dd\",\n  RemovedProps\n>;\ntype DataListValueDivProps = { as?: \"div\" } & ComponentPropsWithout<\n  \"div\",\n  RemovedProps\n>;\ntype DataListValueProps = CommonDataListValueProps &\n  (DataListValueDdProps | DataListValueDivProps);\nconst DataListValue = React.forwardRef<\n  DataListValueElement,\n  DataListValueProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className,\n    asChild,\n    as: Tag = \"dd\",\n    ...valueProps\n  } = extractProps(props, dataListValuePropDefs);\n  return (\n    <Slot.Root\n      {...valueProps}\n      ref={forwardedRef}\n      className={classNames(className, \"rt-DataListValue\")}\n    >\n      {asChild ? children : <Tag>{children}</Tag>}\n    </Slot.Root>\n  );\n});\nDataListValue.displayName = \"DataList.Value\";\n\nexport {\n  DataListRoot as Root,\n  DataListItem as Item,\n  DataListLabel as Label,\n  DataListValue as Value,\n};\nexport type {\n  DataListRootElement as RootElement,\n  DataListRootProps as RootProps,\n  DataListItemElement as ItemElement,\n  DataListItemProps as ItemProps,\n  DataListLabelElement as LabelElement,\n  DataListLabelProps as LabelProps,\n  DataListValueElement as ValueElement,\n  DataListValueProps as ValueProps,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+CgC;AA/ChC,kBAAuB;AACvB,YAAuB;AACvB,oBAAqB;AACrB,sBAAqB;AACrB,qBAA6B;AAM7B,6BAKO;AAgBP,MAAM,eAAe,MAAM;AAAA,EACzB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,IAAI,MAAM;AAAA,MACV,GAAG;AAAA,IACL,QAAI,6BAAa,OAAO,2CAAoB;AAC5C,WACE,4CAAC,sBAAK,SAAO,MACX;AAAA,MAAC,qBAAK;AAAA,MAAL;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,YAAAA,SAAW,mBAAmB,SAAS;AAAA,QAEjD,oBAAU,WAAW,4CAAC,OAAK,UAAS;AAAA;AAAA,IACvC,GACF;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAM3B,MAAM,eAAe,MAAM;AAAA,EACzB,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,UAAU,WAAW,SAAS,GAAG,UAAU,QAAI;AAAA,MACrD;AAAA,MACA;AAAA,IACF;AACA,WACE;AAAA,MAAC,qBAAK;AAAA,MAAL;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,YAAAA,SAAW,mBAAmB,SAAS;AAAA,QAEjD,oBAAU,WAAW,4CAAC,SAAK,UAAS;AAAA;AAAA,IACvC;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAgB3B,MAAM,gBAAgB,MAAM,WAG1B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,IAAI,MAAM;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,6BAAa,OAAO,4CAAqB;AAC7C,SACE;AAAA,IAAC,qBAAK;AAAA,IAAL;AAAA,MACE,GAAG;AAAA,MACJ,qBAAmB;AAAA,MACnB,KAAK;AAAA,MACL,eAAW,YAAAA,SAAW,oBAAoB,SAAS;AAAA,MAElD,oBAAU,WAAW,4CAAC,OAAK,UAAS;AAAA;AAAA,EACvC;AAEJ,CAAC;AACD,cAAc,cAAc;AAe5B,MAAM,gBAAgB,MAAM,WAG1B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI,MAAM;AAAA,IACV,GAAG;AAAA,EACL,QAAI,6BAAa,OAAO,4CAAqB;AAC7C,SACE;AAAA,IAAC,qBAAK;AAAA,IAAL;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,YAAAA,SAAW,WAAW,kBAAkB;AAAA,MAElD,oBAAU,WAAW,4CAAC,OAAK,UAAS;AAAA;AAAA,EACvC;AAEJ,CAAC;AACD,cAAc,cAAc;","names":["classNames"]}

package/dist/cjs/lib/data-list.d.cts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { ComponentPropsWithout, RemovedProps } from '@radix-ui/themes/helpers';
+import { MarginProps, GetPropDefTypes } from '@radix-ui/themes/props';
+import { dataListRootPropDefs, dataListItemPropDefs, dataListLabelPropDefs, dataListValuePropDefs } from './data-list.props.cjs';
+
+type DataListRootElement = HTMLDListElement;
+type DataListRootOwnProps = GetPropDefTypes<typeof dataListRootPropDefs>;
+interface CommonDataListRootProps extends MarginProps, DataListRootOwnProps {
+}
+type DataListRootDivProps = {
+    as?: "div";
+} & ComponentPropsWithout<"div", RemovedProps>;
+type DataListRootDlProps = {
+    as?: "dl";
+} & ComponentPropsWithout<"dl", RemovedProps>;
+type DataListRootProps = CommonDataListRootProps & (DataListRootDivProps | DataListRootDlProps);
+declare const DataListRoot: React.ForwardRefExoticComponent<DataListRootProps & React.RefAttributes<HTMLDListElement>>;
+type DataListItemElement = HTMLDivElement;
+type DataListItemOwnProps = GetPropDefTypes<typeof dataListItemPropDefs>;
+interface DataListItemProps extends ComponentPropsWithout<"div", RemovedProps>, DataListItemOwnProps {
+}
+declare const DataListItem: React.ForwardRefExoticComponent<DataListItemProps & React.RefAttributes<HTMLDivElement>>;
+type DataListLabelElement = React.ComponentRef<"dt">;
+type DataListLabelOwnProps = GetPropDefTypes<typeof dataListLabelPropDefs>;
+interface CommonDataListLabelProps extends MarginProps, DataListLabelOwnProps {
+}
+type DataListLabelDtProps = {
+    as?: "dt";
+} & ComponentPropsWithout<"dt", RemovedProps>;
+type DataListLabelDivProps = {
+    as?: "div";
+} & ComponentPropsWithout<"div", RemovedProps>;
+type DataListLabelProps = CommonDataListLabelProps & (DataListLabelDtProps | DataListLabelDivProps);
+declare const DataListLabel: React.ForwardRefExoticComponent<DataListLabelProps & React.RefAttributes<HTMLElement>>;
+type DataListValueElement = React.ComponentRef<"dd">;
+type DataListValueOwnProps = GetPropDefTypes<typeof dataListValuePropDefs>;
+interface CommonDataListValueProps extends MarginProps, DataListValueOwnProps {
+}
+type DataListValueDdProps = {
+    as?: "dd";
+} & ComponentPropsWithout<"dd", RemovedProps>;
+type DataListValueDivProps = {
+    as?: "div";
+} & ComponentPropsWithout<"div", RemovedProps>;
+type DataListValueProps = CommonDataListValueProps & (DataListValueDdProps | DataListValueDivProps);
+declare const DataListValue: React.ForwardRefExoticComponent<DataListValueProps & React.RefAttributes<HTMLElement>>;
+
+export { DataListItem as Item, type DataListItemElement as ItemElement, type DataListItemProps as ItemProps, DataListLabel as Label, type DataListLabelElement as LabelElement, type DataListLabelProps as LabelProps, DataListRoot as Root, type DataListRootElement as RootElement, type DataListRootProps as RootProps, DataListValue as Value, type DataListValueElement as ValueElement, type DataListValueProps as ValueProps };

package/dist/cjs/lib/data-list.props.cjs

@@ -0,0 +1,62 @@
+"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 data_list_props_exports = {};
+__export(data_list_props_exports, {
+  dataListItemPropDefs: () => dataListItemPropDefs,
+  dataListLabelAs: () => dataListLabelAs,
+  dataListLabelPropDefs: () => dataListLabelPropDefs,
+  dataListRootAs: () => dataListRootAs,
+  dataListRootPropDefs: () => dataListRootPropDefs,
+  dataListValueAs: () => dataListValueAs,
+  dataListValuePropDefs: () => dataListValuePropDefs
+});
+module.exports = __toCommonJS(data_list_props_exports);
+var import_props = require("@radix-ui/themes/props");
+const dataListRootAs = ["dl", "div"];
+const dataListRootPropDefs = {
+  ...import_props.dataListRootPropDefs,
+  as: { type: "enum", values: dataListRootAs, default: "dl" },
+  ...import_props.asChildPropDef
+};
+const dataListItemPropDefs = {
+  ...import_props.dataListItemPropDefs,
+  ...import_props.asChildPropDef
+};
+const dataListLabelAs = ["dt", "div"];
+const dataListLabelPropDefs = {
+  ...import_props.dataListLabelPropDefs,
+  as: { type: "enum", values: dataListLabelAs, default: "dt" },
+  ...import_props.asChildPropDef
+};
+const dataListValueAs = ["dd", "div"];
+const dataListValuePropDefs = {
+  as: { type: "enum", values: dataListValueAs, default: "dd" },
+  ...import_props.asChildPropDef
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  dataListItemPropDefs,
+  dataListLabelAs,
+  dataListLabelPropDefs,
+  dataListRootAs,
+  dataListRootPropDefs,
+  dataListValueAs,
+  dataListValuePropDefs
+});
+//# sourceMappingURL=data-list.props.cjs.map

package/dist/cjs/lib/data-list.props.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/data-list.props.tsx"],"sourcesContent":["import {\n  asChildPropDef,\n  dataListRootPropDefs as themesDataListRootPropDefs,\n  dataListItemPropDefs as themesDataListItemPropDefs,\n  dataListLabelPropDefs as themesDataListLabelPropDefs,\n} from \"@radix-ui/themes/props\";\nimport type { PropDef } from \"@radix-ui/themes/props\";\n\nexport const dataListRootAs = [\"dl\", \"div\"] as const;\nexport const dataListRootPropDefs = {\n  ...themesDataListRootPropDefs,\n  as: { type: \"enum\", values: dataListRootAs, default: \"dl\" },\n  ...asChildPropDef,\n} satisfies typeof themesDataListRootPropDefs & {\n  as: PropDef<(typeof dataListRootAs)[number]>;\n};\n\nexport const dataListItemPropDefs = {\n  ...themesDataListItemPropDefs,\n  ...asChildPropDef,\n} satisfies typeof themesDataListItemPropDefs;\n\nexport const dataListLabelAs = [\"dt\", \"div\"] as const;\nexport const dataListLabelPropDefs = {\n  ...themesDataListLabelPropDefs,\n  as: { type: \"enum\", values: dataListLabelAs, default: \"dt\" },\n  ...asChildPropDef,\n} satisfies typeof themesDataListLabelPropDefs & {\n  as: PropDef<(typeof dataListLabelAs)[number]>;\n};\n\nexport const dataListValueAs = [\"dd\", \"div\"] as const;\nexport const dataListValuePropDefs = {\n  as: { type: \"enum\", values: dataListValueAs, default: \"dd\" },\n  ...asChildPropDef,\n} satisfies {\n  as: PropDef<(typeof dataListValueAs)[number]>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKO;AAGA,MAAM,iBAAiB,CAAC,MAAM,KAAK;AACnC,MAAM,uBAAuB;AAAA,EAClC,GAAG,aAAAA;AAAA,EACH,IAAI,EAAE,MAAM,QAAQ,QAAQ,gBAAgB,SAAS,KAAK;AAAA,EAC1D,GAAG;AACL;AAIO,MAAM,uBAAuB;AAAA,EAClC,GAAG,aAAAC;AAAA,EACH,GAAG;AACL;AAEO,MAAM,kBAAkB,CAAC,MAAM,KAAK;AACpC,MAAM,wBAAwB;AAAA,EACnC,GAAG,aAAAC;AAAA,EACH,IAAI,EAAE,MAAM,QAAQ,QAAQ,iBAAiB,SAAS,KAAK;AAAA,EAC3D,GAAG;AACL;AAIO,MAAM,kBAAkB,CAAC,MAAM,KAAK;AACpC,MAAM,wBAAwB;AAAA,EACnC,IAAI,EAAE,MAAM,QAAQ,QAAQ,iBAAiB,SAAS,KAAK;AAAA,EAC3D,GAAG;AACL;","names":["themesDataListRootPropDefs","themesDataListItemPropDefs","themesDataListLabelPropDefs"]}

package/dist/cjs/lib/data-list.props.d.cts

@@ -0,0 +1,94 @@
+declare const dataListRootAs: readonly ["dl", "div"];
+declare const dataListRootPropDefs: {
+    asChild: {
+        type: "boolean";
+    };
+    as: {
+        type: "enum";
+        values: readonly ["dl", "div"];
+        default: "dl";
+    };
+    orientation: {
+        type: "enum";
+        className: string;
+        values: readonly ["horizontal", "vertical"];
+        default: "horizontal";
+        responsive: true;
+    };
+    size: {
+        type: "enum";
+        className: string;
+        values: readonly ["1", "2", "3"];
+        default: "2";
+        responsive: true;
+    };
+    trim: {
+        className: string;
+        type: "enum";
+        values: readonly ["normal", "start", "end", "both"];
+        responsive: true;
+    };
+};
+declare const dataListItemPropDefs: {
+    asChild: {
+        type: "boolean";
+    };
+    align: {
+        type: "enum";
+        className: string;
+        values: readonly ["start", "center", "end", "baseline", "stretch"];
+        responsive: true;
+    };
+};
+declare const dataListLabelAs: readonly ["dt", "div"];
+declare const dataListLabelPropDefs: {
+    asChild: {
+        type: "boolean";
+    };
+    as: {
+        type: "enum";
+        values: readonly ["dt", "div"];
+        default: "dt";
+    };
+    highContrast: {
+        type: "boolean";
+        className: string;
+        default: undefined;
+    };
+    color: {
+        type: "enum";
+        values: readonly ["gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", "sky"];
+        default: ("gray" | "gold" | "bronze" | "brown" | "yellow" | "amber" | "orange" | "tomato" | "red" | "ruby" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "indigo" | "blue" | "cyan" | "teal" | "jade" | "green" | "grass" | "lime" | "mint" | "sky") | undefined;
+    };
+    width: {
+        type: "string";
+        className: string;
+        customProperties: "--width"[];
+        responsive: true;
+    };
+    minWidth: {
+        type: "string";
+        className: string;
+        customProperties: "--min-width"[];
+        responsive: true;
+    };
+    maxWidth: {
+        type: "string";
+        className: string;
+        customProperties: "--max-width"[];
+        responsive: true;
+    };
+};
+declare const dataListValueAs: readonly ["dd", "div"];
+declare const dataListValuePropDefs: {
+    asChild: {
+        type: "boolean";
+    };
+    as: {
+        type: "enum";
+        values: readonly ["dd", "div"];
+        default: "dd";
+    };
+};
+
+export { dataListItemPropDefs, dataListLabelAs, dataListLabelPropDefs, dataListRootAs, dataListRootPropDefs, dataListValueAs, dataListValuePropDefs };