@sps-woodland/content-row 7.0.0

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/content-row](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/content-row#readme)
+
+SPS Woodland Design System page title component

package/lib/ContentRowExamples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const ContentRowExamples: ComponentManifestEntry;

package/lib/content-row/ContentRow.css.d.ts

@@ -0,0 +1,44 @@
+export declare const expandedVar: any;
+export declare const contentRow: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    expanded: {
+        true: {
+            vars: {
+                [x: number]: string;
+            };
+        };
+        false: {
+            vars: {
+                [x: number]: string;
+            };
+        };
+    };
+}>;
+export declare const contentRowColGroup: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    expanded: {
+        true: {
+            borderTopLeftRadius: string;
+            borderTopRightRadius: string;
+            borderBottomRightRadius: string;
+            borderBottomLeftRadius: string;
+        };
+        false: {};
+    };
+    selected: {
+        true: {
+            background: string;
+            borderColor: string;
+        };
+        false: {};
+    };
+    cardSpacing: {
+        true: {
+            borderRadius: string;
+            marginTop: string;
+        };
+        false: {};
+    };
+}>;
+export declare const expandButton: string;
+export declare const expandIcon: string;
+export declare const contentRowExpansion: string;
+export declare const section: string;

package/lib/content-row/ContentRow.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function ContentRow({ children, className, alternateLayout, initiallyExpanded, cardSpacing, expanded, onBeforeCollapsed, onBeforeExpanded, onSelectionChange, onCollapsed, onExpanded, selectable, selected, ...rest }: ComponentProps<{
+    alternateLayout: boolean;
+    initiallyExpanded: boolean;
+    cardSpacing: boolean;
+    expanded: boolean;
+    onBeforeCollapsed: () => boolean;
+    onBeforeExpanded: () => boolean;
+    onSelectionChange: React.ChangeEventHandler<HTMLInputElement>;
+    onCollapsed: () => void;
+    onExpanded: () => void;
+    selectable: boolean;
+    selected: boolean;
+}, HTMLDivElement>): React.ReactElement;

package/lib/content-row-col/ContentRowCol.css.d.ts

@@ -0,0 +1,21 @@
+export declare const contentRowCol: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    lean: {
+        true: {
+            paddingTop: string;
+            paddingRight: string;
+            paddingBottom: string;
+            paddingLeft: string;
+        };
+        false: {};
+    };
+    borderless: {
+        true: {};
+        false: {
+            selectors: {
+                "&:not(:first-child)": {
+                    borderLeft: `${string} ${string} ${string}`;
+                };
+            };
+        };
+    };
+}>;

package/lib/content-row-col/ContentRowCol.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function ContentRowCol({ children, className, borderless, lean, widthPx, widthRem, style, ...rest }: ComponentProps<{
+    borderless?: boolean;
+    lean?: boolean;
+    widthPx?: number;
+    widthRem?: number;
+}, HTMLDivElement>): React.ReactElement;

package/lib/content-row-expansion/ContentRowExpansion.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function ContentRowExpansion({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/index.cjs.js

@@ -0,0 +1,397 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const z=require("react"),a=require("@sps-woodland/core"),F=require("@spscommerce/ds-react"),i=require("@spscommerce/utils");function O(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const s=O(z);function A(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function v(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),o.push.apply(o,n)}return o}function N(e){for(var t=1;t<arguments.length;t++){var o=arguments[t]!=null?arguments[t]:{};t%2?v(Object(o),!0).forEach(function(n){A(e,n,o[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):v(Object(o)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(o,n))})}return e}var D=(e,t,o)=>{for(var n of Object.keys(e)){var r;if(e[n]!==((r=t[n])!==null&&r!==void 0?r:o[n]))return!1}return!0},y=e=>t=>{var o=e.defaultClassName,n=N(N({},e.defaultVariants),t);for(var r in n){var l,d=(l=n[r])!==null&&l!==void 0?l:e.defaultVariants[r];if(d!=null){var c=d;typeof c=="boolean"&&(c=c===!0?"true":"false");var m=e.variantClassNames[r][c];m&&(o+=" "+m)}}for(var[C,u]of e.compoundVariants)D(C,n,e.defaultVariants)&&(o+=" "+u);return o},H=y({defaultClassName:"_1mxrufv0",variantClassNames:{lean:{true:"_1mxrufv1",false:"_1mxrufv2"},borderless:{true:"_1mxrufv3",false:"_1mxrufv4"}},defaultVariants:{lean:!1,borderless:!1},compoundVariants:[]});function p({children:e,className:t,borderless:o,lean:n,widthPx:r,widthRem:l,style:d,...c}){const m=r?r/16:l,C=m?{...d,width:`${m}rem`}:d;return s.createElement("div",{className:a.cl(H({lean:n,borderless:o}),t),...c,style:C},e)}a.Metadata.set(p,{name:"Content Row Col",props:{borderless:{type:"boolean"},lean:{type:"boolean"},widthPx:{type:"number"},widthRem:{type:"number"}}});var T=y({defaultClassName:"_11ztjee1",variantClassNames:{expanded:{true:"_11ztjee2",false:"_11ztjee3"}},defaultVariants:{expanded:!1},compoundVariants:[]}),q=y({defaultClassName:"_11ztjee4",variantClassNames:{expanded:{true:"_11ztjee5",false:"_11ztjee6"},selected:{true:"_11ztjee7",false:"_11ztjee8"},cardSpacing:{true:"_11ztjee9",false:"_11ztjeea"}},defaultVariants:{expanded:!1,selected:!1,cardSpacing:!1},compoundVariants:[[{expanded:!0,cardSpacing:!0},"_11ztjeeb"]]}),G="_11ztjeee",K="_11ztjeec",W="_11ztjeed",M="_11ztjeef";function f({children:e,className:t,...o}){return s.createElement("div",{className:a.cl(G,t),...o},e)}a.Metadata.set(f,{name:"Content Row Expansion"});function x({children:e,className:t,alternateLayout:o=!1,initiallyExpanded:n=!1,cardSpacing:r=!1,expanded:l,onBeforeCollapsed:d,onBeforeExpanded:c,onSelectionChange:m,onCollapsed:C,onExpanded:u,selectable:h=!1,selected:g,...P}){const[I,[R]]=a.selectChildren(e,[{type:p},{type:f}]),{t:V}=s.useContext(a.I18nContext),[b,E]=s.useState(n),w=typeof l=="boolean"?l:b;function _(j){j.stopPropagation(),w&&(!d||d())?(E(!1),C&&C()):!w&&(!c||c())&&(E(!0),u&&u())}const S=()=>s.createElement(F.SpsCheckbox,{checked:g,onChange:m}),k=()=>s.createElement("button",{type:"button",className:a.cl(K),onClick:_,"aria-label":V(`design-system:contentRow.${w?"collapse":"expand"}`)},s.createElement(a.Icon,{className:a.cl(W),icon:w?"minus-circle":"plus-circle"}));return s.createElement("div",{className:a.cl(T({expanded:l||b}),t),...P},s.createElement("div",{className:a.cl(q({expanded:l||b,selected:g,cardSpacing:r}))},h&&!o&&s.createElement(p,{widthPx:46},s.createElement(S,null)),R&&!o&&s.createElement(p,{widthPx:44},s.createElement(k,null)),R&&h&&o&&s.createElement(p,{widthPx:46},s.createElement("section",{className:M},s.createElement(S,null)),s.createElement("section",{className:M},s.createElement(k,null))),I),R)}a.Metadata.set(x,{name:"Content Row",props:{alternateLayout:{type:"boolean",default:"false"},initiallyExpanded:{type:"boolean",default:"false"},cardSpacing:{type:"boolean",default:"false"},expanded:{type:"boolean"},onBeforeCollapsed:{type:"() => boolean"},onBeforeExpanded:{type:"() => boolean"},onSelectionChange:{type:"ChangeEventHandler"},onCollapsed:{type:"() => void"},onExpanded:{type:"() => void"},selectable:{type:"boolean",default:"false"},selected:{type:"boolean"}}});const B={components:[x,p,f],examples:{basic:{label:"Content Rows",examples:{basic:{react:i.code`
+            import { ContentRow, ContentRowCol } from "@sps-woodland/content-rows";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <ContentRow>
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                </ContentRow>
+              )
+            }
+          `},withCheckbox:{react:i.code`
+            import { ContentRow, ContentRowCol } from "@sps-woodland/content-rows";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                selected: false
+              });
+
+              function selectRow() {
+                updateForm({ selected: !formValue.selected })
+              }
+
+              return (
+                <ContentRow
+                  selectable
+                  selected={formValue.selected}
+                  onSelectionChange={selectRow}
+                >
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                </ContentRow>
+              )
+            }
+          `},withCheckboxAndFavorite:{react:i.code`
+            import { ContentRow, ContentRowCol } from "@sps-woodland/content-rows";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                selected: false
+              });
+
+              function selectRow() {
+                updateForm({ selected: !formValue.selected })
+              }
+
+              return (
+                <ContentRow
+                  selectable
+                  selected={formValue.selected}
+                  onSelectionChange={selectRow}
+                >
+                  <ContentRowCol style={{ width: "2.9rem" }}>
+                    <Icon icon="star" size="md" color="blue-medium" />
+                  </ContentRowCol>
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                </ContentRow>
+              )
+            }
+          `}}},expandable:{label:"Expandable Content Rows",examples:{basic:{react:i.code`
+            import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-rows";
+            import { Card } from "@sps-woodland/cards";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <ContentRow>
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                  <ContentRowExpansion>
+                    <Card>
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                      Additional content
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                    </Card>
+                  </ContentRowExpansion>
+                </ContentRow>
+              )
+            }
+          `},expandableWithCheckbox:{react:i.code`
+            import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-rows";
+            import { Card } from "@sps-woodland/cards";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                selected: false
+              });
+
+              function selectRow() {
+                updateForm({ selected: !formValue.selected })
+              }
+
+              return (
+                <ContentRow
+                  selectable
+                  selected={formValue.selected}
+                  onSelectionChange={selectRow}
+                >
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                  <ContentRowExpansion>
+                    <Card>
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                      Additional content
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                    </Card>
+                  </ContentRowExpansion>
+                </ContentRow>
+              )
+            }
+          `},expandableWithCheckboxAlternate:{react:i.code`
+            import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-rows";
+            import { Card } from "@sps-woodland/cards";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                selected: false
+              });
+
+              function selectRow() {
+                updateForm({ selected: !formValue.selected })
+              }
+
+              return (
+                <ContentRow
+                  selectable
+                  selected={formValue.selected}
+                  onSelectionChange={selectRow}
+                  alternateLayout
+                >
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                  <ContentRowExpansion>
+                    <Card>
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                      Additional content
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                    </Card>
+                  </ContentRowExpansion>
+                </ContentRow>
+              )
+            }
+          `},expandableWithCheckboxAndFavorite:{react:i.code`
+            import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-rows";
+            import { Card } from "@sps-woodland/cards";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                selected: false
+              });
+
+              function selectRow() {
+                updateForm({ selected: !formValue.selected })
+              }
+
+              return (
+                <ContentRow
+                  selectable
+                  selected={formValue.selected}
+                  onSelectionChange={selectRow}
+                >
+                  <ContentRowCol style={{ width: "2.9rem" }}>
+                    <Icon icon="star" size="md" color="blue-medium" />
+                  </ContentRowCol>
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                  <ContentRowExpansion>
+                    <Card>
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                      Additional content
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                    </Card>
+                  </ContentRowExpansion>
+                </ContentRow>
+              )
+            }
+          `},expandableWithCheckboxAndFavoriteAlternate:{react:i.code`
+            import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-rows";
+            import { Card } from "@sps-woodland/cards";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                selected: false
+              });
+
+              function selectRow() {
+                updateForm({ selected: !formValue.selected })
+              }
+
+              return (
+                <ContentRow
+                  selectable
+                  selected={formValue.selected}
+                  onSelectionChange={selectRow}
+                  alternateLayout
+                >
+                  <ContentRowCol style={{ width: "2.9rem" }}>
+                    <Icon icon="star" size="md" color="blue-medium" />
+                  </ContentRowCol>
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                  <ContentRowExpansion>
+                    <Card>
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                      Additional content
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                    </Card>
+                  </ContentRowExpansion>
+                </ContentRow>
+              )
+            }
+          `}}},sortable:{label:"Sortable Content Rows",examples:{basic:{react:i.code`
+          import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-rows";
+          import { Card } from "@sps-woodland/cards";
+          import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sortable-header";
+          import { grid } from "@sps-woodland/tokens";
+          
+          function Component() {
+            const [sort, setSort] = React.useState([{ key: 'id', direction: SortDirection.DESCENDING }]);
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              selected: null
+            });
+          
+            function selectRow(id) {
+              updateForm({ selected: formValue.selected !== id ? id : null });
+            }
+                    
+            const items = React.useMemo(() => [
+              {
+                id: '9712323',
+                type: '850',
+                status: 'processing',
+                timestamp: 'July 21, 2021 @ 4:40 PM'
+              },
+              {
+                id: '8712378',
+                type: '810',
+                status: 'success',
+                timestamp: 'May 24, 2021 @ 4:39 PM'
+              },
+              {
+                id: '8912389',
+                type: '850',
+                status: 'success',
+                timestamp: 'May 23, 2021 @ 4:38 PM'
+              }
+            ].sort((a, b) => {
+              if (!sort.length) {
+                return 0;
+              }
+          
+              const [{ key, direction }] = sort;
+                if (a[key] < b[key]) {
+                  return direction === SortDirection.ASCENDING ? -1 : 1;
+                } else if (a[key] > b[key]) {
+                  return direction === SortDirection.ASCENDING ? 1 : -1;
+                } else {
+                  return 0;
+              }
+            }), [sort]);
+          
+            return (
+              <div className={grid.root}>
+                <SortingHeader sort={sort} onSortChange={setSort} className={grid[12]}>
+                  <SortingHeaderCell sortDisabled widthRem={2.9} />
+                  <SortingHeaderCell sortDisabled widthRem={2.9} />
+                  <SortingHeaderCell sortKey='id'>ID</SortingHeaderCell>
+                  <SortingHeaderCell sortKey='type'>Type</SortingHeaderCell>
+                  <SortingHeaderCell sortKey='timestamp' widthPx={150}>Timestamp</SortingHeaderCell>
+                </SortingHeader>
+          
+                {items.map(item => {
+                  return (
+                    <ContentRow
+                      key={item.id}
+                      selectable
+                      selected={formValue.selected === item.id}
+                      onSelectionChange={() => selectRow(item.id)}
+                      className={grid[12]}
+                    >
+                      <ContentRowCol>
+                        {item.status === 'processing' && <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />}
+                        {item.status === 'success' && <Icon className={sprinkles({ mr: "sm" })} icon="status-ok" size="lg" color="green-medium" />}
+                        <a href="#" className={sprinkles({ fs: "body-md" })}>{item.id}</a>
+                      </ContentRowCol>
+                      <ContentRowCol>
+                        <a href="#" className={sprinkles({ fs: "body-md" })}>{item.type}</a>
+                      </ContentRowCol>
+                      <ContentRowCol widthPx={150}>
+                        {item.timestamp}
+                      </ContentRowCol>
+                      <ContentRowExpansion>
+                        <Card>
+                          <br />
+                          <br />
+                          <br />
+                          <br />
+                          Additional content
+                          <br />
+                          <br />
+                          <br />
+                          <br />
+                        </Card>
+                      </ContentRowExpansion>
+                    </ContentRow>
+                  );
+                })}
+              </div>
+            )
+          }
+          `}}}}},L={"Content Rows":B};exports.ContentRow=x;exports.ContentRowCol=p;exports.ContentRowExpansion=f;exports.MANIFEST=L;

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./content-row/ContentRow";
+export * from "./content-row-col/ContentRowCol";
+export * from "./content-row-expansion/ContentRowExpansion";
+export * from "./manifest";

package/lib/index.es.js

@@ -0,0 +1,623 @@
+import * as s from "react";
+import { Metadata as b, cl as p, selectChildren as _, I18nContext as O, Icon as A } from "@sps-woodland/core";
+import { SpsCheckbox as D } from "@spscommerce/ds-react";
+import { code as i } from "@spscommerce/utils";
+function H(e, t, o) {
+  return t in e ? Object.defineProperty(e, t, {
+    value: o,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[t] = o, e;
+}
+function v(e, t) {
+  var o = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    t && (n = n.filter(function(r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), o.push.apply(o, n);
+  }
+  return o;
+}
+function N(e) {
+  for (var t = 1; t < arguments.length; t++) {
+    var o = arguments[t] != null ? arguments[t] : {};
+    t % 2 ? v(Object(o), !0).forEach(function(n) {
+      H(e, n, o[n]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(o)) : v(Object(o)).forEach(function(n) {
+      Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(o, n));
+    });
+  }
+  return e;
+}
+var T = (e, t, o) => {
+  for (var n of Object.keys(e)) {
+    var r;
+    if (e[n] !== ((r = t[n]) !== null && r !== void 0 ? r : o[n]))
+      return !1;
+  }
+  return !0;
+}, x = (e) => (t) => {
+  var o = e.defaultClassName, n = N(N({}, e.defaultVariants), t);
+  for (var r in n) {
+    var a, c = (a = n[r]) !== null && a !== void 0 ? a : e.defaultVariants[r];
+    if (c != null) {
+      var l = c;
+      typeof l == "boolean" && (l = l === !0 ? "true" : "false");
+      var d = e.variantClassNames[r][l];
+      d && (o += " " + d);
+    }
+  }
+  for (var [m, u] of e.compoundVariants)
+    T(m, n, e.defaultVariants) && (o += " " + u);
+  return o;
+}, G = x({ defaultClassName: "_1mxrufv0", variantClassNames: { lean: { true: "_1mxrufv1", false: "_1mxrufv2" }, borderless: { true: "_1mxrufv3", false: "_1mxrufv4" } }, defaultVariants: { lean: !1, borderless: !1 }, compoundVariants: [] });
+function C({
+  children: e,
+  className: t,
+  borderless: o,
+  lean: n,
+  widthPx: r,
+  widthRem: a,
+  style: c,
+  ...l
+}) {
+  const d = r ? r / 16 : a, m = d ? {
+    ...c,
+    width: `${d}rem`
+  } : c;
+  return /* @__PURE__ */ s.createElement("div", {
+    className: p(G({ lean: n, borderless: o }), t),
+    ...l,
+    style: m
+  }, e);
+}
+b.set(C, {
+  name: "Content Row Col",
+  props: {
+    borderless: { type: "boolean" },
+    lean: { type: "boolean" },
+    widthPx: { type: "number" },
+    widthRem: { type: "number" }
+  }
+});
+var K = x({ defaultClassName: "_11ztjee1", variantClassNames: { expanded: { true: "_11ztjee2", false: "_11ztjee3" } }, defaultVariants: { expanded: !1 }, compoundVariants: [] }), W = x({ defaultClassName: "_11ztjee4", variantClassNames: { expanded: { true: "_11ztjee5", false: "_11ztjee6" }, selected: { true: "_11ztjee7", false: "_11ztjee8" }, cardSpacing: { true: "_11ztjee9", false: "_11ztjeea" } }, defaultVariants: { expanded: !1, selected: !1, cardSpacing: !1 }, compoundVariants: [[{ expanded: !0, cardSpacing: !0 }, "_11ztjeeb"]] }), B = "_11ztjeee", L = "_11ztjeec", J = "_11ztjeed", P = "_11ztjeef";
+function y({
+  children: e,
+  className: t,
+  ...o
+}) {
+  return /* @__PURE__ */ s.createElement("div", {
+    className: p(B, t),
+    ...o
+  }, e);
+}
+b.set(y, {
+  name: "Content Row Expansion"
+});
+function I({
+  children: e,
+  className: t,
+  alternateLayout: o = !1,
+  initiallyExpanded: n = !1,
+  cardSpacing: r = !1,
+  expanded: a,
+  onBeforeCollapsed: c,
+  onBeforeExpanded: l,
+  onSelectionChange: d,
+  onCollapsed: m,
+  onExpanded: u,
+  selectable: h = !1,
+  selected: g,
+  ...M
+}) {
+  const [V, [f]] = _(e, [
+    { type: C },
+    { type: y }
+  ]), { t: z } = s.useContext(O), [R, E] = s.useState(n), w = typeof a == "boolean" ? a : R;
+  function F(j) {
+    j.stopPropagation(), w && (!c || c()) ? (E(!1), m && m()) : !w && (!l || l()) && (E(!0), u && u());
+  }
+  const k = () => /* @__PURE__ */ s.createElement(D, {
+    checked: g,
+    onChange: d
+  }), S = () => /* @__PURE__ */ s.createElement("button", {
+    type: "button",
+    className: p(L),
+    onClick: F,
+    "aria-label": z(`design-system:contentRow.${w ? "collapse" : "expand"}`)
+  }, /* @__PURE__ */ s.createElement(A, {
+    className: p(J),
+    icon: w ? "minus-circle" : "plus-circle"
+  }));
+  return /* @__PURE__ */ s.createElement("div", {
+    className: p(K({ expanded: a || R }), t),
+    ...M
+  }, /* @__PURE__ */ s.createElement("div", {
+    className: p(
+      W({
+        expanded: a || R,
+        selected: g,
+        cardSpacing: r
+      })
+    )
+  }, h && !o && /* @__PURE__ */ s.createElement(C, {
+    widthPx: 46
+  }, /* @__PURE__ */ s.createElement(k, null)), f && !o && /* @__PURE__ */ s.createElement(C, {
+    widthPx: 44
+  }, /* @__PURE__ */ s.createElement(S, null)), f && h && o && /* @__PURE__ */ s.createElement(C, {
+    widthPx: 46
+  }, /* @__PURE__ */ s.createElement("section", {
+    className: P
+  }, /* @__PURE__ */ s.createElement(k, null)), /* @__PURE__ */ s.createElement("section", {
+    className: P
+  }, /* @__PURE__ */ s.createElement(S, null))), V), f);
+}
+b.set(I, {
+  name: "Content Row",
+  props: {
+    alternateLayout: { type: "boolean", default: "false" },
+    initiallyExpanded: { type: "boolean", default: "false" },
+    cardSpacing: { type: "boolean", default: "false" },
+    expanded: { type: "boolean" },
+    onBeforeCollapsed: { type: "() => boolean" },
+    onBeforeExpanded: { type: "() => boolean" },
+    onSelectionChange: { type: "ChangeEventHandler" },
+    onCollapsed: { type: "() => void" },
+    onExpanded: { type: "() => void" },
+    selectable: { type: "boolean", default: "false" },
+    selected: { type: "boolean" }
+  }
+});
+const q = {
+  components: [I, C, y],
+  examples: {
+    basic: {
+      label: "Content Rows",
+      examples: {
+        basic: {
+          react: i`
+            import { ContentRow, ContentRowCol } from "@sps-woodland/content-rows";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <ContentRow>
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                </ContentRow>
+              )
+            }
+          `
+        },
+        withCheckbox: {
+          react: i`
+            import { ContentRow, ContentRowCol } from "@sps-woodland/content-rows";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                selected: false
+              });
+
+              function selectRow() {
+                updateForm({ selected: !formValue.selected })
+              }
+
+              return (
+                <ContentRow
+                  selectable
+                  selected={formValue.selected}
+                  onSelectionChange={selectRow}
+                >
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                </ContentRow>
+              )
+            }
+          `
+        },
+        withCheckboxAndFavorite: {
+          react: i`
+            import { ContentRow, ContentRowCol } from "@sps-woodland/content-rows";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                selected: false
+              });
+
+              function selectRow() {
+                updateForm({ selected: !formValue.selected })
+              }
+
+              return (
+                <ContentRow
+                  selectable
+                  selected={formValue.selected}
+                  onSelectionChange={selectRow}
+                >
+                  <ContentRowCol style={{ width: "2.9rem" }}>
+                    <Icon icon="star" size="md" color="blue-medium" />
+                  </ContentRowCol>
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                </ContentRow>
+              )
+            }
+          `
+        }
+      }
+    },
+    expandable: {
+      label: "Expandable Content Rows",
+      examples: {
+        basic: {
+          react: i`
+            import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-rows";
+            import { Card } from "@sps-woodland/cards";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <ContentRow>
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                  <ContentRowExpansion>
+                    <Card>
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                      Additional content
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                    </Card>
+                  </ContentRowExpansion>
+                </ContentRow>
+              )
+            }
+          `
+        },
+        expandableWithCheckbox: {
+          react: i`
+            import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-rows";
+            import { Card } from "@sps-woodland/cards";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                selected: false
+              });
+
+              function selectRow() {
+                updateForm({ selected: !formValue.selected })
+              }
+
+              return (
+                <ContentRow
+                  selectable
+                  selected={formValue.selected}
+                  onSelectionChange={selectRow}
+                >
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                  <ContentRowExpansion>
+                    <Card>
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                      Additional content
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                    </Card>
+                  </ContentRowExpansion>
+                </ContentRow>
+              )
+            }
+          `
+        },
+        expandableWithCheckboxAlternate: {
+          react: i`
+            import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-rows";
+            import { Card } from "@sps-woodland/cards";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                selected: false
+              });
+
+              function selectRow() {
+                updateForm({ selected: !formValue.selected })
+              }
+
+              return (
+                <ContentRow
+                  selectable
+                  selected={formValue.selected}
+                  onSelectionChange={selectRow}
+                  alternateLayout
+                >
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                  <ContentRowExpansion>
+                    <Card>
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                      Additional content
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                    </Card>
+                  </ContentRowExpansion>
+                </ContentRow>
+              )
+            }
+          `
+        },
+        expandableWithCheckboxAndFavorite: {
+          react: i`
+            import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-rows";
+            import { Card } from "@sps-woodland/cards";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                selected: false
+              });
+
+              function selectRow() {
+                updateForm({ selected: !formValue.selected })
+              }
+
+              return (
+                <ContentRow
+                  selectable
+                  selected={formValue.selected}
+                  onSelectionChange={selectRow}
+                >
+                  <ContentRowCol style={{ width: "2.9rem" }}>
+                    <Icon icon="star" size="md" color="blue-medium" />
+                  </ContentRowCol>
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                  <ContentRowExpansion>
+                    <Card>
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                      Additional content
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                    </Card>
+                  </ContentRowExpansion>
+                </ContentRow>
+              )
+            }
+          `
+        },
+        expandableWithCheckboxAndFavoriteAlternate: {
+          react: i`
+            import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-rows";
+            import { Card } from "@sps-woodland/cards";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                selected: false
+              });
+
+              function selectRow() {
+                updateForm({ selected: !formValue.selected })
+              }
+
+              return (
+                <ContentRow
+                  selectable
+                  selected={formValue.selected}
+                  onSelectionChange={selectRow}
+                  alternateLayout
+                >
+                  <ContentRowCol style={{ width: "2.9rem" }}>
+                    <Icon icon="star" size="md" color="blue-medium" />
+                  </ContentRowCol>
+                  <ContentRowCol>
+                    <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />
+                    <a href="#" className={sprinkles({ fs: "body-md" })}>3532379</a>
+                  </ContentRowCol>
+                  <ContentRowCol widthPx={160}>
+                      May 23, 2018 @ 4:38 PM
+                  </ContentRowCol>
+                  <ContentRowExpansion>
+                    <Card>
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                      Additional content
+                      <br />
+                      <br />
+                      <br />
+                      <br />
+                    </Card>
+                  </ContentRowExpansion>
+                </ContentRow>
+              )
+            }
+          `
+        }
+      }
+    },
+    sortable: {
+      label: "Sortable Content Rows",
+      examples: {
+        basic: {
+          react: i`
+          import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-rows";
+          import { Card } from "@sps-woodland/cards";
+          import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sortable-header";
+          import { grid } from "@sps-woodland/tokens";
+          
+          function Component() {
+            const [sort, setSort] = React.useState([{ key: 'id', direction: SortDirection.DESCENDING }]);
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              selected: null
+            });
+          
+            function selectRow(id) {
+              updateForm({ selected: formValue.selected !== id ? id : null });
+            }
+                    
+            const items = React.useMemo(() => [
+              {
+                id: '9712323',
+                type: '850',
+                status: 'processing',
+                timestamp: 'July 21, 2021 @ 4:40 PM'
+              },
+              {
+                id: '8712378',
+                type: '810',
+                status: 'success',
+                timestamp: 'May 24, 2021 @ 4:39 PM'
+              },
+              {
+                id: '8912389',
+                type: '850',
+                status: 'success',
+                timestamp: 'May 23, 2021 @ 4:38 PM'
+              }
+            ].sort((a, b) => {
+              if (!sort.length) {
+                return 0;
+              }
+          
+              const [{ key, direction }] = sort;
+                if (a[key] < b[key]) {
+                  return direction === SortDirection.ASCENDING ? -1 : 1;
+                } else if (a[key] > b[key]) {
+                  return direction === SortDirection.ASCENDING ? 1 : -1;
+                } else {
+                  return 0;
+              }
+            }), [sort]);
+          
+            return (
+              <div className={grid.root}>
+                <SortingHeader sort={sort} onSortChange={setSort} className={grid[12]}>
+                  <SortingHeaderCell sortDisabled widthRem={2.9} />
+                  <SortingHeaderCell sortDisabled widthRem={2.9} />
+                  <SortingHeaderCell sortKey='id'>ID</SortingHeaderCell>
+                  <SortingHeaderCell sortKey='type'>Type</SortingHeaderCell>
+                  <SortingHeaderCell sortKey='timestamp' widthPx={150}>Timestamp</SortingHeaderCell>
+                </SortingHeader>
+          
+                {items.map(item => {
+                  return (
+                    <ContentRow
+                      key={item.id}
+                      selectable
+                      selected={formValue.selected === item.id}
+                      onSelectionChange={() => selectRow(item.id)}
+                      className={grid[12]}
+                    >
+                      <ContentRowCol>
+                        {item.status === 'processing' && <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />}
+                        {item.status === 'success' && <Icon className={sprinkles({ mr: "sm" })} icon="status-ok" size="lg" color="green-medium" />}
+                        <a href="#" className={sprinkles({ fs: "body-md" })}>{item.id}</a>
+                      </ContentRowCol>
+                      <ContentRowCol>
+                        <a href="#" className={sprinkles({ fs: "body-md" })}>{item.type}</a>
+                      </ContentRowCol>
+                      <ContentRowCol widthPx={150}>
+                        {item.timestamp}
+                      </ContentRowCol>
+                      <ContentRowExpansion>
+                        <Card>
+                          <br />
+                          <br />
+                          <br />
+                          <br />
+                          Additional content
+                          <br />
+                          <br />
+                          <br />
+                          <br />
+                        </Card>
+                      </ContentRowExpansion>
+                    </ContentRow>
+                  );
+                })}
+              </div>
+            )
+          }
+          `
+        }
+      }
+    }
+  }
+}, Y = {
+  "Content Rows": q
+};
+export {
+  I as ContentRow,
+  C as ContentRowCol,
+  y as ContentRowExpansion,
+  Y as MANIFEST
+};

package/lib/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from "@sps-woodland/core";
+export declare const MANIFEST: ComponentManifest;

package/lib/style.css

@@ -0,0 +1 @@
+._1mxrufv0{display:table-cell;padding:1rem;vertical-align:middle}._1mxrufv1{padding:.5rem 1rem}._1mxrufv4:not(:first-child){border-left:.0625rem solid #d2d4d4}._1mxrufv0>*{vertical-align:middle}._11ztjee1{background:#ffffff;display:block}._11ztjee2{--_11ztjee0: block}._11ztjee3{--_11ztjee0: none}._11ztjee4{border-width:.0625rem;border-style:solid;border-color:#d2d4d4;border-radius:.25rem;display:table;table-layout:fixed;width:100.06%}._11ztjee5{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}._11ztjee7{background:#e6f2f8;border-color:#007db8}._11ztjee9{border-radius:.25rem;margin-top:1rem}._11ztjeeb{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}._11ztjeec{background:none;border:0;padding:0}._11ztjeed{color:#007db8;cursor:pointer;font-size:1rem;line-height:1.125rem;padding:0;vertical-align:middle}._11ztjeed:hover{color:#09638d}._11ztjeee{background:#f3f4f4;border-color:#d2d4d4;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;border-style:solid;border-top-width:0;border-right-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;display:var(--_11ztjee0);padding:1rem}._11ztjeef{padding:1rem}._11ztjeef:first-child{margin:-1rem -1rem 0}._11ztjeef:last-child{border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0;border-style:solid;border-top-color:#d2d4d4;margin:0 -1rem -1rem}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sps-woodland/content-row",
+  "description": "SPS Woodland Design System page title component",
+  "version": "7.0.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/page-title",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/page-title#readme",
+  "main": "./lib/index.es.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@spscommerce/utils": "^6.12.1",
+    "@spscommerce/ds-react": "7.0.0",
+    "@spscommerce/ds-illustrations": "6.37.3",
+    "@spscommerce/ds-shared": "7.0.0",
+    "@spscommerce/ds-colors": "7.0.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "devDependencies": {
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@spscommerce/utils": "^6.12.1",
+    "@spscommerce/ds-react": "7.0.0",
+    "@spscommerce/ds-illustrations": "6.37.3",
+    "@spscommerce/ds-shared": "7.0.0",
+    "@spscommerce/ds-colors": "7.0.0",
+    "@vanilla-extract/css": "^1.9.1",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.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.js"
+  }
+}

package/vite.config.js

@@ -0,0 +1,21 @@
+import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});