@sps-woodland/dropdowns 8.35.0

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/dropdowns](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/dropdowns#readme)
+
+SPS Woodland Design System dropdown form components

package/lib/dropdown/Dropdown.css.d.ts

@@ -0,0 +1,73 @@
+export declare const dropdown: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    kind: {
+        default: {
+            background: string;
+            color: string;
+            borderColor: string;
+            selectors: {
+                "&:hover": {
+                    background: string;
+                };
+            };
+        };
+        key: {
+            background: string;
+            color: string;
+            borderColor: string;
+            selectors: {
+                "&:hover": {
+                    background: string;
+                };
+            };
+        };
+        confirm: {
+            background: string;
+            color: string;
+            borderColor: string;
+            selectors: {
+                "&:hover": {
+                    background: string;
+                };
+            };
+        };
+        delete: {
+            background: string;
+            color: string;
+            borderColor: string;
+            selectors: {
+                "&:hover": {
+                    background: string;
+                };
+            };
+        };
+    };
+    disabled: {
+        true: {
+            cursor: "not-allowed";
+            color: string;
+            background: string;
+            borderColor: string;
+        };
+        false: {};
+    };
+    spinning: {
+        true: {
+            display: "inline-block";
+            color: "transparent !important";
+            cursor: "not-allowed";
+        };
+        false: {};
+    };
+}>;
+export declare const icon: string;
+export declare const dropdownArrow: string;
+export declare const spinner: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    spinning: {
+        true: {
+            cursor: "not-allowed";
+        };
+        false: {
+            display: "none";
+        };
+    };
+}>;

package/lib/dropdown/Dropdown.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+import type { IconName } from "@sps-woodland/tokens";
+export declare function Dropdown({ label, disabled, icon, kind, maxHeightPx, maxHeightRem, spinning, onOpen, onClose, loading, className, children, ...rest }: ComponentProps<{
+    label: string;
+    disabled?: boolean;
+    icon?: IconName;
+    kind?: "default" | "key" | "confirm" | "delete";
+    maxHeightPx?: number;
+    maxHeightRem?: number;
+    spinning?: boolean;
+    loading?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+}>): React.ReactElement<HTMLButtonElement>;

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./dropdown/Dropdown";
+export * from "./option-list/OptionList";
+export * from "./option-list/Option";

package/lib/index.js

@@ -0,0 +1,180 @@
+import * as _ from "react";
+import { Metadata as h, useChildTestIdAttrBuilder as E, modChildren as P, cl as m, Spinner as b, Icon as g, selectChildren as N } from "@sps-woodland/core";
+import { MenuProvider as V, MenuButton as C, MenuItem as D, Menu as I } from "@ariakit/react";
+import { useWoodlandLanguage as L } from "@spscommerce/i18n";
+function M(e, r, n) {
+  return r in e ? Object.defineProperty(e, r, {
+    value: n,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = n, e;
+}
+function k(e, r) {
+  var n = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(s) {
+      return Object.getOwnPropertyDescriptor(e, s).enumerable;
+    })), n.push.apply(n, o);
+  }
+  return n;
+}
+function y(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var n = arguments[r] != null ? arguments[r] : {};
+    r % 2 ? k(Object(n), !0).forEach(function(o) {
+      M(e, o, n[o]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : k(Object(n)).forEach(function(o) {
+      Object.defineProperty(e, o, Object.getOwnPropertyDescriptor(n, o));
+    });
+  }
+  return e;
+}
+var S = (e, r, n) => {
+  for (var o of Object.keys(e)) {
+    var s;
+    if (e[o] !== ((s = r[o]) !== null && s !== void 0 ? s : n[o]))
+      return !1;
+  }
+  return !0;
+}, O = (e) => (r) => {
+  var n = e.defaultClassName, o = y(y({}, e.defaultVariants), r);
+  for (var s in o) {
+    var a, t = (a = o[s]) !== null && a !== void 0 ? a : e.defaultVariants[s];
+    if (t != null) {
+      var d = t;
+      typeof d == "boolean" && (d = d === !0 ? "true" : "false");
+      var p = (
+        // @ts-expect-error
+        e.variantClassNames[s][d]
+      );
+      p && (n += " " + p);
+    }
+  }
+  for (var [i, l] of e.compoundVariants)
+    S(i, o, e.defaultVariants) && (n += " " + l);
+  return n;
+}, x = O({ defaultClassName: "pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz0", variantClassNames: { kind: { default: "pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz1", key: "pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz2", confirm: "pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz3", delete: "pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz4" }, disabled: { true: "pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz5", false: "pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz6" }, spinning: { true: "pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz7", false: "pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz8" } }, defaultVariants: { kind: "default", disabled: !1, spinning: !1 }, compoundVariants: [] }), B = "pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz9", W = "pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdza", q = O({ defaultClassName: "pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdzb", variantClassNames: { spinning: { true: "pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdzc", false: "pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdzd" } }, defaultVariants: {}, compoundVariants: [] });
+function A({
+  label: e,
+  disabled: r,
+  icon: n,
+  kind: o = "default",
+  maxHeightPx: s,
+  maxHeightRem: a,
+  spinning: t,
+  onOpen: d,
+  onClose: p,
+  loading: i,
+  className: l,
+  children: u,
+  ...f
+}) {
+  const { t: c } = L(), w = _.useRef(null), v = E(f), j = _.useMemo(
+    () => P(u, () => [
+      {
+        maxHeightPx: s,
+        maxHeightRem: a,
+        buttonRef: w,
+        loading: i,
+        onClose: p
+      }
+    ]),
+    [u]
+  );
+  return /* @__PURE__ */ _.createElement(V, null, /* @__PURE__ */ _.createElement(
+    C,
+    {
+      ref: w,
+      className: m(x({ kind: o, disabled: r, spinning: t }), l),
+      disabled: r || t,
+      "data-testid": `${v}__dropdown`,
+      ...f
+    },
+    t && /* @__PURE__ */ _.createElement(
+      b,
+      {
+        color: o === "default" ? "dark" : "light",
+        className: q({ spinning: t }),
+        title: c("button.spinningTitle", { defaultValue: "Loading..." }),
+        "data-testid": `${v}__spinner`
+      }
+    ),
+    n && /* @__PURE__ */ _.createElement(g, { icon: n, className: B, "aria-hidden": "true" }),
+    e,
+    /* @__PURE__ */ _.createElement(g, { icon: "chevron-down", className: W })
+  ), j);
+}
+h.set(A, {
+  name: "Dropdown",
+  props: {
+    label: { type: "string", required: !0 },
+    disabled: "boolean",
+    icon: "IconName",
+    kind: { type: '"default" | "key" | "confirm" | "delete"', default: '"default"' },
+    maxHeightPx: "number",
+    maxHeightRem: "number",
+    spinning: "boolean"
+  }
+});
+var H = "pkg_sps-woodland_dropdowns__version_8_35_0__hash_qzju7d0", R = "pkg_sps-woodland_dropdowns__version_8_35_0__hash_qzju7d1";
+function z({ disabled: e, children: r, ...n }) {
+  return /* @__PURE__ */ _.createElement(
+    D,
+    {
+      className: m(H, e && R),
+      "aria-disabled": e,
+      ...n
+    },
+    r
+  );
+}
+h.set(z, {
+  name: "Option",
+  props: {}
+});
+var T = "pkg_sps-woodland_dropdowns__version_8_35_0__hash_1jben8t0", F = "pkg_sps-woodland_dropdowns__version_8_35_0__hash_1jben8t1";
+function K({
+  buttonRef: e,
+  conformWidth: r,
+  maxHeightPx: n,
+  maxHeightRem: o,
+  minWidth: s,
+  loading: a,
+  onClose: t,
+  children: d,
+  ...p
+}) {
+  const [i, l] = _.useState(void 0);
+  _.useEffect(() => {
+    r && e?.current && l(e.current.offsetWidth);
+  }, [r, e]);
+  const u = n ? n / 16 : o, f = {
+    ...u ? { maxHeight: `${u}rem` } : {},
+    ...r && i ? { width: i } : {}
+  }, [c] = N(d, [{ type: z }]);
+  return /* @__PURE__ */ _.createElement(
+    I,
+    {
+      className: m(T),
+      style: f,
+      onClose: t,
+      preventBodyScroll: !0,
+      typeahead: !0,
+      ...p
+    },
+    a ? /* @__PURE__ */ _.createElement(b, { className: F }) : c
+  );
+}
+h.set(K, {
+  name: "Option List",
+  props: {
+    conformWidth: "boolean"
+  }
+});
+export {
+  A as Dropdown,
+  z as Option,
+  K as OptionList
+};

package/lib/index.umd.cjs

@@ -0,0 +1 @@
+(function(o,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react"),require("@sps-woodland/core"),require("@ariakit/react"),require("@spscommerce/i18n")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@ariakit/react","@spscommerce/i18n"],f):(o=typeof globalThis<"u"?globalThis:o||self,f(o.Dropdowns={},o.React,o.core,o.react,o.i18n))})(this,function(o,f,s,h,E){"use strict";function N(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const a=N(f);function S(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(d){return Object.getOwnPropertyDescriptor(e,d).enumerable})),n.push.apply(n,r)}return n}function g(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?b(Object(n),!0).forEach(function(r){S(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):b(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}var D=(e,t,n)=>{for(var r of Object.keys(e)){var d;if(e[r]!==((d=t[r])!==null&&d!==void 0?d:n[r]))return!1}return!0},k=e=>t=>{var n=e.defaultClassName,r=g(g({},e.defaultVariants),t);for(var d in r){var i,_=(i=r[d])!==null&&i!==void 0?i:e.defaultVariants[d];if(_!=null){var p=_;typeof p=="boolean"&&(p=p===!0?"true":"false");var l=e.variantClassNames[d][p];l&&(n+=" "+l)}}for(var[u,c]of e.compoundVariants)D(u,r,e.defaultVariants)&&(n+=" "+c);return n},M=k({defaultClassName:"pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz0",variantClassNames:{kind:{default:"pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz1",key:"pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz2",confirm:"pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz3",delete:"pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz4"},disabled:{true:"pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz5",false:"pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz6"},spinning:{true:"pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz7",false:"pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz8"}},defaultVariants:{kind:"default",disabled:!1,spinning:!1},compoundVariants:[]}),V="pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz9",C="pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdza",q=k({defaultClassName:"pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdzb",variantClassNames:{spinning:{true:"pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdzc",false:"pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdzd"}},defaultVariants:{},compoundVariants:[]});function O({label:e,disabled:t,icon:n,kind:r="default",maxHeightPx:d,maxHeightRem:i,spinning:_,onOpen:p,onClose:l,loading:u,className:c,children:w,...m}){const{t:y}=E.useWoodlandLanguage(),z=a.useRef(null),P=s.useChildTestIdAttrBuilder(m),R=a.useMemo(()=>s.modChildren(w,()=>[{maxHeightPx:d,maxHeightRem:i,buttonRef:z,loading:u,onClose:l}]),[w]);return a.createElement(h.MenuProvider,null,a.createElement(h.MenuButton,{ref:z,className:s.cl(M({kind:r,disabled:t,spinning:_}),c),disabled:t||_,"data-testid":`${P}__dropdown`,...m},_&&a.createElement(s.Spinner,{color:r==="default"?"dark":"light",className:q({spinning:_}),title:y("button.spinningTitle",{defaultValue:"Loading..."}),"data-testid":`${P}__spinner`}),n&&a.createElement(s.Icon,{icon:n,className:V,"aria-hidden":"true"}),e,a.createElement(s.Icon,{icon:"chevron-down",className:C})),R)}s.Metadata.set(O,{name:"Dropdown",props:{label:{type:"string",required:!0},disabled:"boolean",icon:"IconName",kind:{type:'"default" | "key" | "confirm" | "delete"',default:'"default"'},maxHeightPx:"number",maxHeightRem:"number",spinning:"boolean"}});var I="pkg_sps-woodland_dropdowns__version_8_35_0__hash_qzju7d0",L="pkg_sps-woodland_dropdowns__version_8_35_0__hash_qzju7d1";function v({disabled:e,children:t,...n}){return a.createElement(h.MenuItem,{className:s.cl(I,e&&L),"aria-disabled":e,...n},t)}s.Metadata.set(v,{name:"Option",props:{}});var T="pkg_sps-woodland_dropdowns__version_8_35_0__hash_1jben8t0",B="pkg_sps-woodland_dropdowns__version_8_35_0__hash_1jben8t1";function j({buttonRef:e,conformWidth:t,maxHeightPx:n,maxHeightRem:r,minWidth:d,loading:i,onClose:_,children:p,...l}){const[u,c]=a.useState(void 0);a.useEffect(()=>{t&&e?.current&&c(e.current.offsetWidth)},[t,e]);const w=n?n/16:r,m={...w?{maxHeight:`${w}rem`}:{},...t&&u?{width:u}:{}},[y]=s.selectChildren(p,[{type:v}]);return a.createElement(h.Menu,{className:s.cl(T),style:m,onClose:_,preventBodyScroll:!0,typeahead:!0,...l},i?a.createElement(s.Spinner,{className:B}):y)}s.Metadata.set(j,{name:"Option List",props:{conformWidth:"boolean"}}),o.Dropdown=O,o.Option=v,o.OptionList=j,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/lib/option-list/Option.css.d.ts

@@ -0,0 +1,2 @@
+export declare const option: string;
+export declare const disabled: string;

package/lib/option-list/Option.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function Option({ disabled, children, ...rest }: ComponentProps<{
+    disabled?: boolean;
+}>): React.JSX.Element;

package/lib/option-list/OptionList.css.d.ts

@@ -0,0 +1,2 @@
+export declare const optionList: string;
+export declare const spinner: string;

package/lib/option-list/OptionList.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function OptionList({ buttonRef, conformWidth, maxHeightPx, maxHeightRem, minWidth, loading, onClose, children, ...rest }: ComponentProps<{
+    buttonRef?: any;
+    conformWidth?: boolean;
+    maxHeightPx?: number;
+    maxHeightRem?: number;
+    minWidth?: number;
+    loading?: boolean;
+    onClose?: () => void;
+}>): React.JSX.Element;

package/lib/style.css

@@ -0,0 +1 @@
+.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz0{color:inherit;text-decoration:none;padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;border-width:.0625rem;border-style:solid;border-radius:.25rem;cursor:pointer;display:inline-block;font-size:.75rem;font-weight:600;line-height:.875rem;position:relative;padding-right:30px}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz0:focus{outline-color:#007db8;outline-style:solid;outline-offset:.125rem;outline-width:.125rem;box-shadow:0 0 0 6px #fff}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz0[aria-expanded=true]{border-radius:.25rem .25rem 0 0}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz1{background:#e9e9ea;color:#4b5356;border-color:#d2d4d4}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz1:hover{background:#d2d4d4}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz2{background:#4b5356;color:#fff;border-color:#1f282c}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz2:hover{background:#1f282c}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz3{background:#007db8;color:#fff;border-color:#09638d}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz3:hover{background:#09638d}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz4{background:#de002e;color:#fff;border-color:#a30d2d}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz4:hover{background:#a30d2d}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz5{cursor:not-allowed;color:#717779;background:#fff;border-color:#d2d4d4}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz7{display:inline-block;color:transparent!important;cursor:not-allowed}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdz9{line-height:0;font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdza{line-height:0;font-size:.75rem;position:absolute;top:10px;right:12px}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdzb{left:50%;margin:-.875rem -.4375rem;position:absolute;top:22px}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdzc{cursor:not-allowed}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdzd{display:none}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_16yekdzb>i{border-width:.125rem;height:.875rem;width:.875rem;display:block}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_qzju7d0{cursor:pointer;display:block;font-weight:400;padding:.5rem 1rem;white-space:break-spaces;overflow-wrap:break-word}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_qzju7d0:hover{background:#e6f2f8}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_qzju7d0:focus{background:#e6f2f8;outline:.125rem solid #007db8ff!important;outline-offset:.125rem;box-shadow:0 0 0 6px #fff}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_qzju7d1{color:#717779}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_1jben8t0{background:#fff;border-style:solid;border-width:.0625rem;border-radius:.25rem;border-top-left-radius:0;border-top-right-radius:0;border-color:#717779;font-size:.75rem;overflow-y:auto;overscroll-behavior:contain;z-index:100}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_1jben8t0:focus{outline:.125rem solid #007db8ff!important;outline-offset:.125rem;box-shadow:0 0 0 6px #fff}.pkg_sps-woodland_dropdowns__version_8_35_0__hash_1jben8t1{margin:1rem 4rem}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@sps-woodland/dropdowns",
+  "description": "SPS Woodland Design System dropdown form components",
+  "version": "8.35.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/forms-core",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/forms-core#readme",
+  "type": "module",
+  "module": "./lib/index.js",
+  "main": "./lib/index.umd.cjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "require": "./lib/index.umd.cjs",
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
+    },
+    "./lib/style.css": {
+      "import": "./lib/style.css",
+      "require": "./lib/style.css"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@ariakit/react": "^0.4.15",
+    "@spscommerce/utils": "^7.0.0 || ^8.0.0",
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.14.0",
+    "@sps-woodland/core": "8.35.0",
+    "@sps-woodland/tokens": "8.35.0",
+    "@spscommerce/i18n": "8.35.0"
+  },
+  "devDependencies": {
+    "@ariakit/react": "^0.4.15",
+    "@spscommerce/utils": "^7.0.0",
+    "@vanilla-extract/css": "^1.9.3",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "@sps-woodland/core": "8.35.0",
+    "@sps-woodland/tokens": "8.35.0",
+    "@spscommerce/i18n": "8.35.0"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "node ../../../scripts/publish-package.mjs"
+  }
+}

package/vite.config.mjs

@@ -0,0 +1,31 @@
+import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
+import pkg from "./package.json";
+
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
+
+export default defineConfig({
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      name: "Dropdowns",
+      fileName: "index",
+      cssFileName: "style",
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});