@easypost/easy-ui 1.0.0-alpha.115 → 1.0.0-alpha.116

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @easypost/easy-ui
 
+## 1.0.0-alpha.116
+
+### Minor Changes
+
+- 6ca337d: add support for secondary text on select items
+
 ## 1.0.0-alpha.115
 
 ### Patch Changes

package/SearchNav/index.js

@@ -39,7 +39,7 @@ const Menu = require("../__chunks__/Menu-MGDv1tob.js");
 const Text = require("../__chunks__/Text-DkzMEqky.js");
 const Icon = require("../__chunks__/Icon-BRlbo3RF.js");
 const UnstyledButton = require("../__chunks__/UnstyledButton-DW8CjaXN.js");
-const SelectOverlay = require("../__chunks__/SelectOverlay-Bva0SG8D.js");
+const SelectOverlay = require("../__chunks__/SelectOverlay-DpI9vNLw.js");
 const useTriggerWidth = require("../__chunks__/useTriggerWidth-NhYqZmlX.js");
 const ExpandMore400 = require("../__chunks__/ExpandMore400-CJpvxyJm.js");
 const Close = require("../__chunks__/Close-BQ2IlPyf.js");

package/SearchNav/index.mjs

@@ -38,7 +38,7 @@ import { M as Menu } from "../__chunks__/Menu-Ci1FGh8B.mjs";
 import { T as Text } from "../__chunks__/Text-D6oT5WJQ.mjs";
 import { I as Icon } from "../__chunks__/Icon-BIpaQJ_I.mjs";
 import { U as UnstyledButton } from "../__chunks__/UnstyledButton-DxJLvL-G.mjs";
-import { u as useInternalSelectContext, $ as $bdd25dc72710631f$export$cbd84cdb2e668835, a as $2bc3a590c5373a4e$export$5159ec8b34d4ec12, b as $58aed456727eb0f3$export$e64b2f635402ca43, I as InternalSelectContext, S as SelectOverlay, d as SelectOption } from "../__chunks__/SelectOverlay-q23ZLLi4.mjs";
+import { u as useInternalSelectContext, $ as $bdd25dc72710631f$export$cbd84cdb2e668835, a as $2bc3a590c5373a4e$export$5159ec8b34d4ec12, b as $58aed456727eb0f3$export$e64b2f635402ca43, I as InternalSelectContext, S as SelectOverlay, d as SelectOption } from "../__chunks__/SelectOverlay-C23EXgqX.mjs";
 import { u as useTriggerWidth } from "../__chunks__/useTriggerWidth-CBghrvjy.mjs";
 import { E as ExpandMore400 } from "../__chunks__/ExpandMore400-CH7GNxqk.mjs";
 import { C as Close } from "../__chunks__/Close-Cq6Q6MN6.mjs";

package/Select/Select.d.ts

@@ -30,56 +30,56 @@ export type SelectProps<T, K extends Key> = Omit<AriaSelectProps<T>, keyof BaseS
  *
  * @example
  * _Simple controlled selection:_
-*```tsx
-* import { Select } from "@easypost/easy-ui/Select";
-*
-* export function Component() {
-*  const [selectedOption, setSelectedOption] = React.useState("Option 1");
-*
-*  return (
-*    <Select
-*      label="Label"
-*      selectedKey={selectedOption}
-*      onSelectionChange={(selected) => setSelectedOption(selected)}
-*      helperText="Helper text"
-*    >
-*      <Select.Option key="Option 1">Option 1</Select.Option>
-*      <Select.Option key="Option 2">Option 2</Select.Option>
-*      <Select.Option key="Option 3">Option 3</Select.Option>
-*    </Select>
-*  );
-* }
-```
-*
-* @example
-* _Simple controlled selection with separator:_
-*```tsx
-* import { Select } from "@easypost/easy-ui/Select";
-*
-* export function Component() {
-*  const [selectedOption, setSelectedOption] = React.useState("Option 1");
-*
-*  return (
-*    <Select
-*      label="Label"
-*      selectedKey={selectedOption}
-*      onSelectionChange={(selected) => setSelectedOption(selected)}
-*      helperText="Helper text"
-*    >
-*      <Select.Section aria-label="Primary options">
-*       <Select.Option key="Option 1">Option 1</Select.Option>
-*       <Select.Option key="Option 2">Option 2</Select.Option>
-*       <Select.Option key="Option 3">Option 3</Select.Option>
-*       </Select.Section>
-*      <Select.Section aria-label="Secondary options">
-*       <Select.Option key="Option 4">Option 4</Select.Option>
-*       <Select.Option key="Option 5">Option 5</Select.Option>
-*       <Select.Option key="Option 6">Option 6</Select.Option>
-*       </Select.Section>
-*    </Select>
-*  );
-* }
-```
+ *```tsx
+ * import { Select } from "@easypost/easy-ui/Select";
+ *
+ * export function Component() {
+ *  const [selectedOption, setSelectedOption] = React.useState("Option 1");
+ *
+ *  return (
+ *    <Select
+ *      label="Label"
+ *      selectedKey={selectedOption}
+ *      onSelectionChange={(selected) => setSelectedOption(selected)}
+ *      helperText="Helper text"
+ *    >
+ *      <Select.Option key="Option 1">Option 1</Select.Option>
+ *      <Select.Option key="Option 2">Option 2</Select.Option>
+ *      <Select.Option key="Option 3">Option 3</Select.Option>
+ *    </Select>
+ *  );
+ * }
+ * ```
+ *
+ * @example
+ * _Simple controlled selection with separator:_
+ *```tsx
+ * import { Select } from "@easypost/easy-ui/Select";
+ *
+ * export function Component() {
+ *  const [selectedOption, setSelectedOption] = React.useState("Option 1");
+ *
+ *  return (
+ *    <Select
+ *      label="Label"
+ *      selectedKey={selectedOption}
+ *      onSelectionChange={(selected) => setSelectedOption(selected)}
+ *      helperText="Helper text"
+ *    >
+ *      <Select.Section aria-label="Primary options">
+ *       <Select.Option key="Option 1">Option 1</Select.Option>
+ *       <Select.Option key="Option 2">Option 2</Select.Option>
+ *       <Select.Option key="Option 3">Option 3</Select.Option>
+ *      </Select.Section>
+ *      <Select.Section aria-label="Secondary options">
+ *       <Select.Option key="Option 4">Option 4</Select.Option>
+ *       <Select.Option key="Option 5">Option 5</Select.Option>
+ *       <Select.Option key="Option 6">Option 6</Select.Option>
+ *      </Select.Section>
+ *    </Select>
+ *  );
+ * }
+ * ```
  */
 export declare function Select<T extends object, K extends Key>(props: SelectProps<T, K>): React.JSX.Element;
 export declare namespace Select {

package/Select/Select.stories.d.ts

@@ -14,4 +14,5 @@ export declare const WithSeparator: Story;
 export declare const ControlledSelection: Story;
 export declare const DisabledOptions: Story;
 export declare const DisabledSelect: Story;
+export declare const WithSecondaryText: Story;
 //# sourceMappingURL=Select.stories.d.ts.map

package/Select/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../src/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAKvD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAE/C,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAYrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAS7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAMjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAoBjC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../src/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAKvD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAE/C,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAYrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAS7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAMjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAoBjC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAC"}

package/Select/SelectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../src/Select/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAOtC,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,CAAC;AAElD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kDAAkD;IAClD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,mDAAmD;IACnD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,UAAU,CAAC;CAC1B,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,yCAAyC;IACzC,UAAU,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC7C,+CAA+C;IAC/C,eAAe,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAClD,8CAA8C;IAC9C,cAAc,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACjD,yBAAyB;IACzB,UAAU,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CAC9C,CAAC;AAEF,KAAK,gBAAgB,GAAG,oBAAoB,GAAG,yBAAyB,CAAC;AAEzE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAiElD"}
+{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../src/Select/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAOtC,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,CAAC;AAElD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kDAAkD;IAClD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,mDAAmD;IACnD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,UAAU,CAAC;CAC1B,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,yCAAyC;IACzC,UAAU,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC7C,+CAA+C;IAC/C,eAAe,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAClD,8CAA8C;IAC9C,cAAc,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACjD,yBAAyB;IACzB,UAAU,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CAC9C,CAAC;AAEF,KAAK,gBAAgB,GAAG,oBAAoB,GAAG,yBAAyB,CAAC;AAEzE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBA+ElD"}

package/Select/SelectOption.d.ts

@@ -6,6 +6,10 @@ export type SelectOptionProps = {
     "aria-label"?: string;
     /** Rendered contents of the option or child options. */
     children: ReactNode;
+    /** Secondary text shown under the main option text. */
+    description?: ReactNode;
+    /** Plain text value for accessibility and typeahead. */
+    textValue?: string;
 };
 /**
  * @privateRemarks

package/Select/SelectOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../src/Select/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAQ,IAAI,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAInC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,CAAC,CAAC,QAErE;AAID,KAAK,wBAAwB,CAAC,CAAC,IAAI;IACjC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;CACvB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACrC,IAAI,EACJ,KAAK,GACN,EAAE,wBAAwB,CAAC,CAAC,CAAC,qBAwB7B"}
+{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../src/Select/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAQ,IAAI,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAGnC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,CAAC,CAAC,QAErE;AAID,KAAK,wBAAwB,CAAC,CAAC,IAAI;IACjC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;CACvB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACrC,IAAI,EACJ,KAAK,GACN,EAAE,wBAAwB,CAAC,CAAC,CAAC,qBAkC7B"}

package/Select/SelectTrigger.d.ts

@@ -1,4 +1,4 @@
-import React, { DOMAttributes, ReactNode } from "react";
+import React, { ReactNode, DOMAttributes } from "react";
 import { FocusableElement } from "@react-types/shared";
 import { SelectFieldSize } from "./SelectField";
 import { IconSymbol } from "../types";

package/Select/SelectTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../src/Select/SelectTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,yBAAyB;IACzB,UAAU,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC7C,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBA2CtD"}
+{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../src/Select/SelectTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,yBAAyB;IACzB,UAAU,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC7C,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBA2CtD"}

package/Select/index.js

@@ -21,7 +21,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const SelectOverlay = require("../__chunks__/SelectOverlay-Bva0SG8D.js");
+const SelectOverlay = require("../__chunks__/SelectOverlay-DpI9vNLw.js");
 const utilities_css = require("../utilities/css.js");
 const InputCaption = require("../__chunks__/InputCaption-CccF4ynE.js");
 const Text = require("../__chunks__/Text-DkzMEqky.js");
@@ -44,7 +44,7 @@ function SelectTrigger(props) {
     }), jsxRuntime.jsx(UnstyledButton.UnstyledButton, __spreadProps(__spreadValues({}, triggerProps), {
       ref: triggerRef,
       className,
-      children: jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, valueProps), {
+      children: jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, valueProps), {
         className: SelectOverlay.styles.selectFieldText,
         children
       }))
@@ -57,6 +57,7 @@ function SelectTrigger(props) {
   });
 }
 function SelectField(props) {
+  var _a, _b;
   const { isDisabled = false, validationState = "valid", isLabelEmphasized = false, size = "md", label, errorText, helperText, placeholder, iconAtStart, labelProps, valueProps, errorTextProps, helperTextProps } = props;
   const { triggerRef, selectState } = SelectOverlay.useInternalSelectContext();
   const hasError = validationState === "invalid";
@@ -64,6 +65,7 @@ function SelectField(props) {
   const showHelperText = !showErrorText && helperText;
   const captionProps = showHelperText ? helperTextProps : errorTextProps;
   const captionText = showHelperText ? helperText : errorText;
+  const selectedDescription = (_b = (_a = selectState.selectedItem) == null ? void 0 : _a.props) == null ? void 0 : _b.description;
   return jsxRuntime.jsxs("div", {
     className: utilities_css.classNames(SelectOverlay.styles.fieldRoot),
     children: [label && jsxRuntime.jsx(InputCaption.Label, __spreadProps(__spreadValues({
@@ -83,7 +85,21 @@ function SelectField(props) {
       hasError,
       isDisabled,
       size,
-      children: selectState.selectedItem ? selectState.selectedItem.rendered : jsxRuntime.jsx(Text.Text, {
+      children: selectState.selectedItem ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(Text.Text, {
+          variant: "body2",
+          truncate: true,
+          children: selectState.selectedItem.rendered
+        }), selectedDescription && jsxRuntime.jsx("span", {
+          className: SelectOverlay.styles.selectedDescription,
+          children: jsxRuntime.jsx(Text.Text, {
+            variant: "caption",
+            color: "neutral.600",
+            truncate: true,
+            children: selectedDescription
+          })
+        })]
+      }) : jsxRuntime.jsx(Text.Text, {
         color: "neutral.600",
         children: placeholder
       })

package/Select/index.mjs

@@ -17,9 +17,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React__default, { useMemo } from "react";
-import { u as useInternalSelectContext, s as styles, $ as $bdd25dc72710631f$export$cbd84cdb2e668835, a as $2bc3a590c5373a4e$export$5159ec8b34d4ec12, b as $58aed456727eb0f3$export$e64b2f635402ca43, I as InternalSelectContext, S as SelectOverlay, c as SelectSection, d as SelectOption } from "../__chunks__/SelectOverlay-q23ZLLi4.mjs";
+import { u as useInternalSelectContext, s as styles, $ as $bdd25dc72710631f$export$cbd84cdb2e668835, a as $2bc3a590c5373a4e$export$5159ec8b34d4ec12, b as $58aed456727eb0f3$export$e64b2f635402ca43, I as InternalSelectContext, S as SelectOverlay, c as SelectSection, d as SelectOption } from "../__chunks__/SelectOverlay-C23EXgqX.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
 import { L as Label, I as InputCaption } from "../__chunks__/InputCaption-DoyGkWQe.mjs";
 import { T as Text } from "../__chunks__/Text-D6oT5WJQ.mjs";
@@ -42,7 +42,7 @@ function SelectTrigger(props) {
     }), jsx(UnstyledButton, __spreadProps(__spreadValues({}, triggerProps), {
       ref: triggerRef,
       className,
-      children: jsx("span", __spreadProps(__spreadValues({}, valueProps), {
+      children: jsx("div", __spreadProps(__spreadValues({}, valueProps), {
         className: styles.selectFieldText,
         children
       }))
@@ -55,6 +55,7 @@ function SelectTrigger(props) {
   });
 }
 function SelectField(props) {
+  var _a, _b;
   const { isDisabled = false, validationState = "valid", isLabelEmphasized = false, size = "md", label, errorText, helperText, placeholder, iconAtStart, labelProps, valueProps, errorTextProps, helperTextProps } = props;
   const { triggerRef, selectState } = useInternalSelectContext();
   const hasError = validationState === "invalid";
@@ -62,6 +63,7 @@ function SelectField(props) {
   const showHelperText = !showErrorText && helperText;
   const captionProps = showHelperText ? helperTextProps : errorTextProps;
   const captionText = showHelperText ? helperText : errorText;
+  const selectedDescription = (_b = (_a = selectState.selectedItem) == null ? void 0 : _a.props) == null ? void 0 : _b.description;
   return jsxs("div", {
     className: classNames(styles.fieldRoot),
     children: [label && jsx(Label, __spreadProps(__spreadValues({
@@ -81,7 +83,21 @@ function SelectField(props) {
       hasError,
       isDisabled,
       size,
-      children: selectState.selectedItem ? selectState.selectedItem.rendered : jsx(Text, {
+      children: selectState.selectedItem ? jsxs(Fragment, {
+        children: [jsx(Text, {
+          variant: "body2",
+          truncate: true,
+          children: selectState.selectedItem.rendered
+        }), selectedDescription && jsx("span", {
+          className: styles.selectedDescription,
+          children: jsx(Text, {
+            variant: "caption",
+            color: "neutral.600",
+            truncate: true,
+            children: selectedDescription
+          })
+        })]
+      }) : jsx(Text, {
         color: "neutral.600",
         children: placeholder
       })

package/__chunks__/{SelectOverlay-q23ZLLi4.mjs → SelectOverlay-C23EXgqX.mjs}

@@ -401,33 +401,36 @@ function useInternalSelectContext() {
   }
   return selectContext;
 }
-const underlay = "_underlay_10bf4_4";
-const listboxRoot = "_listboxRoot_10bf4_9";
-const listbox = "_listbox_10bf4_9";
-const listboxList = "_listboxList_10bf4_78";
-const sectionList = "_sectionList_10bf4_79";
-const optionContent = "_optionContent_10bf4_85";
-const separator = "_separator_10bf4_86";
-const option = "_option_10bf4_85";
-const fieldRoot = "_fieldRoot_10bf4_129";
-const selectField = "_selectField_10bf4_150";
-const selectSizeSm = "_selectSizeSm_10bf4_186";
-const selectSizeLg = "_selectSizeLg_10bf4_197";
-const selectFieldError = "_selectFieldError_10bf4_203";
-const selectFieldIconStart = "_selectFieldIconStart_10bf4_211";
-const selectFieldIconEnd = "_selectFieldIconEnd_10bf4_215";
-const selectFieldIconContainer = "_selectFieldIconContainer_10bf4_219";
-const selectFieldText = "_selectFieldText_10bf4_225";
-const listboxOpen = "_listboxOpen_10bf4_229";
+const underlay = "_underlay_fl67g_4";
+const listboxRoot = "_listboxRoot_fl67g_9";
+const listbox = "_listbox_fl67g_9";
+const listboxList = "_listboxList_fl67g_79";
+const sectionList = "_sectionList_fl67g_80";
+const option = "_option_fl67g_91";
+const optionContent = "_optionContent_fl67g_98";
+const separator = "_separator_fl67g_108";
+const optionDescription = "_optionDescription_fl67g_129";
+const fieldRoot = "_fieldRoot_fl67g_143";
+const selectField = "_selectField_fl67g_164";
+const selectSizeSm = "_selectSizeSm_fl67g_202";
+const selectSizeLg = "_selectSizeLg_fl67g_213";
+const selectFieldError = "_selectFieldError_fl67g_219";
+const selectFieldIconStart = "_selectFieldIconStart_fl67g_227";
+const selectFieldIconEnd = "_selectFieldIconEnd_fl67g_231";
+const selectFieldIconContainer = "_selectFieldIconContainer_fl67g_235";
+const selectFieldText = "_selectFieldText_fl67g_241";
+const selectedDescription = "_selectedDescription_fl67g_253";
+const listboxOpen = "_listboxOpen_fl67g_259";
 const styles = {
   underlay,
   listboxRoot,
   listbox,
   listboxList,
   sectionList,
+  option,
   optionContent,
   separator,
-  option,
+  optionDescription,
   fieldRoot,
   selectField,
   selectSizeSm,
@@ -437,6 +440,7 @@ const styles = {
   selectFieldIconEnd,
   selectFieldIconContainer,
   selectFieldText,
+  selectedDescription,
   listboxOpen
 };
 function SelectOption(_props) {
@@ -444,23 +448,33 @@ function SelectOption(_props) {
 }
 Object.assign(SelectOption, $c1d7fb2ec91bae71$export$6d08773d2e66f8f2);
 function SelectOptionContent({ item, state }) {
+  var _a;
   const ref = React__default.useRef(null);
   const { optionProps, isSelected, isFocused, isDisabled } = $293f70390ea03370$export$497855f14858aa34({
     key: item.key
   }, state, ref);
+  const description = (_a = item.props) == null ? void 0 : _a.description;
   return jsx("li", __spreadProps(__spreadValues({}, optionProps), {
     ref,
     className: styles.option,
     "data-is-disabled": isDisabled,
     "data-is-focused": isFocused,
     "data-is-selected": isSelected,
-    children: jsx("div", {
+    children: jsxs("div", {
       className: styles.optionContent,
-      children: jsx(Text, {
-        variant: "body1",
+      children: [jsx(Text, {
+        variant: "body2",
         truncate: true,
         children: item.rendered
-      })
+      }), description && jsx("span", {
+        className: styles.optionDescription,
+        children: jsx(Text, {
+          variant: "caption",
+          color: "neutral.600",
+          truncate: true,
+          children: description
+        })
+      })]
     })
   }));
 }

package/__chunks__/{SelectOverlay-Bva0SG8D.js → SelectOverlay-DpI9vNLw.js}

@@ -402,33 +402,36 @@ function useInternalSelectContext() {
   }
   return selectContext;
 }
-const underlay = "_underlay_10bf4_4";
-const listboxRoot = "_listboxRoot_10bf4_9";
-const listbox = "_listbox_10bf4_9";
-const listboxList = "_listboxList_10bf4_78";
-const sectionList = "_sectionList_10bf4_79";
-const optionContent = "_optionContent_10bf4_85";
-const separator = "_separator_10bf4_86";
-const option = "_option_10bf4_85";
-const fieldRoot = "_fieldRoot_10bf4_129";
-const selectField = "_selectField_10bf4_150";
-const selectSizeSm = "_selectSizeSm_10bf4_186";
-const selectSizeLg = "_selectSizeLg_10bf4_197";
-const selectFieldError = "_selectFieldError_10bf4_203";
-const selectFieldIconStart = "_selectFieldIconStart_10bf4_211";
-const selectFieldIconEnd = "_selectFieldIconEnd_10bf4_215";
-const selectFieldIconContainer = "_selectFieldIconContainer_10bf4_219";
-const selectFieldText = "_selectFieldText_10bf4_225";
-const listboxOpen = "_listboxOpen_10bf4_229";
+const underlay = "_underlay_fl67g_4";
+const listboxRoot = "_listboxRoot_fl67g_9";
+const listbox = "_listbox_fl67g_9";
+const listboxList = "_listboxList_fl67g_79";
+const sectionList = "_sectionList_fl67g_80";
+const option = "_option_fl67g_91";
+const optionContent = "_optionContent_fl67g_98";
+const separator = "_separator_fl67g_108";
+const optionDescription = "_optionDescription_fl67g_129";
+const fieldRoot = "_fieldRoot_fl67g_143";
+const selectField = "_selectField_fl67g_164";
+const selectSizeSm = "_selectSizeSm_fl67g_202";
+const selectSizeLg = "_selectSizeLg_fl67g_213";
+const selectFieldError = "_selectFieldError_fl67g_219";
+const selectFieldIconStart = "_selectFieldIconStart_fl67g_227";
+const selectFieldIconEnd = "_selectFieldIconEnd_fl67g_231";
+const selectFieldIconContainer = "_selectFieldIconContainer_fl67g_235";
+const selectFieldText = "_selectFieldText_fl67g_241";
+const selectedDescription = "_selectedDescription_fl67g_253";
+const listboxOpen = "_listboxOpen_fl67g_259";
 const styles = {
   underlay,
   listboxRoot,
   listbox,
   listboxList,
   sectionList,
+  option,
   optionContent,
   separator,
-  option,
+  optionDescription,
   fieldRoot,
   selectField,
   selectSizeSm,
@@ -438,6 +441,7 @@ const styles = {
   selectFieldIconEnd,
   selectFieldIconContainer,
   selectFieldText,
+  selectedDescription,
   listboxOpen
 };
 function SelectOption(_props) {
@@ -445,23 +449,33 @@ function SelectOption(_props) {
 }
 Object.assign(SelectOption, Item.$c1d7fb2ec91bae71$export$6d08773d2e66f8f2);
 function SelectOptionContent({ item, state }) {
+  var _a;
   const ref = React.useRef(null);
   const { optionProps, isSelected, isFocused, isDisabled } = useListBoxSection.$293f70390ea03370$export$497855f14858aa34({
     key: item.key
   }, state, ref);
+  const description = (_a = item.props) == null ? void 0 : _a.description;
   return jsxRuntime.jsx("li", __spreadProps(__spreadValues({}, optionProps), {
     ref,
     className: styles.option,
     "data-is-disabled": isDisabled,
     "data-is-focused": isFocused,
     "data-is-selected": isSelected,
-    children: jsxRuntime.jsx("div", {
+    children: jsxRuntime.jsxs("div", {
       className: styles.optionContent,
-      children: jsxRuntime.jsx(Text.Text, {
-        variant: "body1",
+      children: [jsxRuntime.jsx(Text.Text, {
+        variant: "body2",
         truncate: true,
         children: item.rendered
-      })
+      }), description && jsxRuntime.jsx("span", {
+        className: styles.optionDescription,
+        children: jsxRuntime.jsx(Text.Text, {
+          variant: "caption",
+          color: "neutral.600",
+          truncate: true,
+          children: description
+        })
+      })]
     })
   }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easypost/easy-ui",
-  "version": "1.0.0-alpha.115",
+  "version": "1.0.0-alpha.116",
   "sideEffects": [
     "**/*.css"
   ],

package/style.css

@@ -4317,12 +4317,12 @@ textarea {
 }/**
  * Do not edit directly, this file was auto-generated.
  */
-._underlay_10bf4_4 {
+._underlay_fl67g_4 {
   position: fixed;
   inset: 0;
 }
 
-._listboxRoot_10bf4_9 {
+._listboxRoot_fl67g_9 {
   --ezui-c-menu-border-radius: var(--ezui-shape-border-radius-md);
   --ezui-c-menu-color-background: var(--ezui-color-neutral-000);
   --ezui-c-menu-color-text: var(--ezui-color-primary-800);
@@ -4339,102 +4339,116 @@ textarea {
   flex-direction: column;
   min-width: var(--ezui-c-menu-min-width);
 }
-._listboxRoot_10bf4_9 {
+._listboxRoot_fl67g_9 {
   --ezui-c-menu-width-xs: initial;
 }
-._listboxRoot_10bf4_9 {
+._listboxRoot_fl67g_9 {
   --ezui-c-menu-width-sm: initial;
 }
-._listboxRoot_10bf4_9 {
+._listboxRoot_fl67g_9 {
   --ezui-c-menu-width-md: initial;
 }
-._listboxRoot_10bf4_9 {
+._listboxRoot_fl67g_9 {
   --ezui-c-menu-width-lg: initial;
 }
-._listboxRoot_10bf4_9 {
+._listboxRoot_fl67g_9 {
   --ezui-c-menu-width-xl: initial;
 }
-._listboxRoot_10bf4_9 {
+._listboxRoot_fl67g_9 {
   --ezui-c-menu-width-xxl: initial;
 }
-._listboxRoot_10bf4_9 {
+._listboxRoot_fl67g_9 {
   width: var(--ezui-c-menu-width-xs);
 }
 @media (min-width: 30em) {
-  ._listboxRoot_10bf4_9 {
+  ._listboxRoot_fl67g_9 {
     width: var(--ezui-c-menu-width-sm, var(--ezui-c-menu-width-xs, initial));
   }
 }
 @media (min-width: 40em) {
-  ._listboxRoot_10bf4_9 {
+  ._listboxRoot_fl67g_9 {
     width: var(--ezui-c-menu-width-md, var(--ezui-c-menu-width-sm, var(--ezui-c-menu-width-xs, initial)));
   }
 }
 @media (min-width: 64em) {
-  ._listboxRoot_10bf4_9 {
+  ._listboxRoot_fl67g_9 {
     width: var(--ezui-c-menu-width-lg, var(--ezui-c-menu-width-md, var(--ezui-c-menu-width-sm, var(--ezui-c-menu-width-xs, initial))));
   }
 }
 @media (min-width: 85em) {
-  ._listboxRoot_10bf4_9 {
+  ._listboxRoot_fl67g_9 {
     width: var(--ezui-c-menu-width-xl, var(--ezui-c-menu-width-lg, var(--ezui-c-menu-width-md, var(--ezui-c-menu-width-sm, var(--ezui-c-menu-width-xs, initial)))));
   }
 }
 @media (min-width: 120em) {
-  ._listboxRoot_10bf4_9 {
+  ._listboxRoot_fl67g_9 {
     width: var(--ezui-c-menu-width-xxl, var(--ezui-c-menu-width-xl, var(--ezui-c-menu-width-lg, var(--ezui-c-menu-width-md, var(--ezui-c-menu-width-sm, var(--ezui-c-menu-width-xs, initial))))));
   }
 }
 
-._listbox_10bf4_9 {
+._listbox_fl67g_9 {
   overflow: auto;
   padding: var(--ezui-c-menu-padding-y) 0;
+  outline: none;
 }
 
-._listboxList_10bf4_78,
-._sectionList_10bf4_79 {
+._listboxList_fl67g_79,
+._sectionList_fl67g_80 {
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
 
-._optionContent_10bf4_85,
-._separator_10bf4_86 {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: var(--ezui-c-menu-item-height);
-  padding: 0 var(--ezui-c-menu-padding-x);
+._listboxList_fl67g_79 {
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
-._option_10bf4_85 {
+._option_fl67g_91 {
   text-decoration: none;
-}
-
-._optionContent_10bf4_85 {
-  color: var(--ezui-c-menu-color-text);
-}
-
-._listbox_10bf4_9,
-._option_10bf4_85 {
   outline: none;
 }
-
-._option_10bf4_85:not([data-is-disabled=true]) {
+._option_fl67g_91:not([data-is-disabled=true]) {
   cursor: pointer;
 }
-
-._option_10bf4_85[data-is-focused=true] ._optionContent_10bf4_85 {
+._option_fl67g_91[data-is-focused=true] ._optionContent_fl67g_98 {
   background: var(--ezui-c-menu-color-background-hovered);
 }
-
-._option_10bf4_85[data-is-disabled=true] ._optionContent_10bf4_85 {
+._option_fl67g_91[data-is-disabled=true] ._optionContent_fl67g_98 {
   color: var(--ezui-c-menu-color-text-disabled);
   cursor: default;
   font-style: italic;
 }
 
-._separator_10bf4_86::after {
+._optionContent_fl67g_98,
+._separator_fl67g_108 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: var(--ezui-c-menu-item-height);
+  padding: 0 var(--ezui-c-menu-padding-x);
+}
+
+._optionContent_fl67g_98 {
+  color: var(--ezui-c-menu-color-text);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  min-width: 0;
+  width: 100%;
+  height: auto;
+  padding-top: var(--ezui-space-1);
+  padding-bottom: var(--ezui-space-1);
+}
+
+._optionDescription_fl67g_129 {
+  width: 100%;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+._separator_fl67g_108::after {
   content: "";
   height: 0;
   border: 0 solid var(--ezui-c-menu-color-border);
@@ -4442,7 +4456,7 @@ textarea {
   border-bottom-width: 0.5px;
 }
 
-._fieldRoot_10bf4_129 {
+._fieldRoot_fl67g_143 {
   --ezui-c-inputfield-border-radius: var(--ezui-shape-border-radius-md);
   --ezui-c-inputfield-box-shadow: var(--ezui-shadow-input);
   --ezui-c-inputfield-color-text-resting: var(--ezui-color-primary-800);
@@ -4463,9 +4477,11 @@ textarea {
   flex-direction: column;
 }
 
-._selectField_10bf4_150 {
+._selectField_fl67g_164 {
   display: flex;
   align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
   font-weight: 400;
   font-size: 0.9375rem;
   letter-spacing: 0.03125rem;
@@ -4481,25 +4497,25 @@ textarea {
   position: relative;
   width: 100%;
 }
-._selectField_10bf4_150:focus, ._selectField_10bf4_150:active {
+._selectField_fl67g_164:focus, ._selectField_fl67g_164:active {
   color: var(--ezui-c-inputfield-color-text-engaged);
   border-color: var(--ezui-c-inputfield-color-border-engaged);
 }
-._selectField_10bf4_150:focus {
+._selectField_fl67g_164:focus {
   box-shadow: var(--ezui-c-inputfield-box-shadow);
 }
-._selectField_10bf4_150::placeholder {
+._selectField_fl67g_164::placeholder {
   color: var(--ezui-c-inputfield-color-text-subdued);
 }
-._selectField_10bf4_150:disabled {
+._selectField_fl67g_164:disabled {
   background-color: var(--ezui-c-inputfield-color-background-disabled);
   color: var(--ezui-c-inputfield-color-text-disabled);
 }
-._selectField_10bf4_150:hover {
+._selectField_fl67g_164:hover {
   border-color: var(--ezui-c-inputfield-color-border-engaged);
 }
 
-._selectSizeSm_10bf4_186 {
+._selectSizeSm_fl67g_202 {
   font-weight: 400;
   font-size: 0.8125rem;
   letter-spacing: 0.015625rem;
@@ -4510,40 +4526,59 @@ textarea {
   --ezui-c-inputfield-icon-input-padding: var(--ezui-space-4-5);
 }
 
-._selectSizeLg_10bf4_197 {
+._selectSizeLg_fl67g_213 {
   padding: calc(var(--ezui-space-2) - var(--ezui-shape-border-width-1));
   --ezui-c-inputfield-min-height-textarea: 56px;
   --ezui-c-inputfield-password-input-padding-right: 0;
 }
 
-._selectFieldError_10bf4_203 {
+._selectFieldError_fl67g_219 {
   color: var(--ezui-c-inputfield-color-text-danger);
   border-color: var(--ezui-c-inputfield-color-border-danger);
 }
-._selectFieldError_10bf4_203:focus, ._selectFieldError_10bf4_203:active {
+._selectFieldError_fl67g_219:focus, ._selectFieldError_fl67g_219:active {
   border-color: var(--ezui-c-inputfield-color-border-danger);
 }
 
-._selectFieldIconStart_10bf4_211 {
+._selectFieldIconStart_fl67g_227 {
   padding-left: var(--ezui-c-inputfield-icon-input-padding);
 }
 
-._selectFieldIconEnd_10bf4_215 {
+._selectFieldIconEnd_fl67g_231 {
   padding-right: var(--ezui-c-inputfield-icon-input-padding);
 }
 
-._selectFieldIconContainer_10bf4_219 {
+._selectFieldIconContainer_fl67g_235 {
   display: flex;
   align-items: center;
   position: relative;
 }
 
-._selectFieldText_10bf4_225 {
+._selectFieldText_fl67g_241 {
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  min-width: 0;
+  width: 100%;
+  text-align: left;
+  gap: 0;
 }
 
-._listboxOpen_10bf4_229 {
+._selectedDescription_fl67g_253 {
+  width: 100%;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+._listboxOpen_fl67g_259 {
   border-color: var(--ezui-c-inputfield-color-border-engaged);
+}
+
+._selectFieldIconContainer_fl67g_235 > :last-child {
+  top: 50%;
+  transform: translateY(-50%);
 }/**
  * Do not edit directly, this file was auto-generated.
  */