@sps-woodland/content-row 8.10.3 → 8.11.0

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

@@ -1,6 +1,7 @@
 export declare const expandedVar: any;
 export declare const expandedBorderRadiusVar: any;
 export declare const selectedBordersVar: any;
+export declare const reorderableButtonIcon: any;
 export declare const contentRow: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
     expanded: {
         true: {
@@ -39,6 +40,12 @@ export declare const contentRowColGroup: import("@vanilla-extract/recipes/dist/d
         };
         false: {};
     };
+    reorderable: {
+        true: {
+            minHeight: string;
+        };
+        false: {};
+    };
 }>;
 export declare const contentTableRow: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
     selected: {
@@ -96,3 +103,47 @@ export declare const contentRowExpansion: import("@vanilla-extract/recipes/dist/
     };
 }>;
 export declare const section: string;
+export declare const reorderableLayout: string;
+export declare const reorderableSection: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    reorderable: {
+        true: {
+            minHeight: string;
+            width: string;
+            height: "50%";
+            display: "flex";
+        };
+        false: {
+            padding: string;
+        };
+    };
+}>;
+export declare const indexContainerWrapper: string;
+export declare const indexContainer: string;
+export declare const indexContainerElement: string;
+export declare const reorderableButton: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    disabled: {
+        true: {
+            border: "none";
+            vars: {
+                [x: number]: string;
+            };
+        };
+        false: {
+            vars: {
+                [x: number]: string;
+            };
+        };
+    };
+    up: {
+        true: {
+            borderTopLeftRadius: string;
+        };
+        false: {};
+    };
+    down: {
+        true: {
+            borderBottomLeftRadius: string;
+        };
+        false: {};
+    };
+}>;

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { ComponentProps } from "@sps-woodland/core";
-export declare function ContentRow({ children, className, alternateLayout, initiallyExpanded, cardSpacing, expanded, onBeforeCollapsed, onBeforeExpanded, onSelectionChange, onCollapsed, onExpanded, selectable, selected, renderExpandedContent, disableSelection, disableExpansion, __autoLayout, ...rest }: ComponentProps<{
+export declare function ContentRow({ children, className, alternateLayout, initiallyExpanded, cardSpacing, expanded, onBeforeCollapsed, onBeforeExpanded, onSelectionChange, onCollapsed, onExpanded, selectable, selected, renderExpandedContent, disableSelection, disableExpansion, __autoLayout, __reorderable, __onOrderChange, __index, __canBeMovedUp, __canBeMovedDown, ...rest }: ComponentProps<{
     alternateLayout?: boolean;
     initiallyExpanded?: boolean;
     cardSpacing?: boolean;
@@ -16,4 +16,9 @@ export declare function ContentRow({ children, className, alternateLayout, initi
     disableSelection?: boolean;
     disableExpansion?: boolean;
     __autoLayout?: boolean;
+    __reorderable?: boolean;
+    __onOrderChange?: (currentIndex: number, newIndex: number) => void;
+    __index?: number;
+    __canBeMovedUp?: boolean;
+    __canBeMovedDown?: boolean;
 }, HTMLDivElement>): React.ReactElement;

package/lib/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),r=require("@sps-woodland/core"),q=require("@spscommerce/ds-react"),m=require("@spscommerce/utils");function G(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const o=G(W);function K(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function I(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);a&&(n=n.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),t.push.apply(t,n)}return t}function F(e){for(var a=1;a<arguments.length;a++){var t=arguments[a]!=null?arguments[a]:{};a%2?I(Object(t),!0).forEach(function(n){K(e,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):I(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})}return e}var B=(e,a,t)=>{for(var n of Object.keys(e)){var s;if(e[n]!==((s=a[n])!==null&&s!==void 0?s:t[n]))return!1}return!0},p=e=>a=>{var t=e.defaultClassName,n=F(F({},e.defaultVariants),a);for(var s in n){var d,i=(d=n[s])!==null&&d!==void 0?d:e.defaultVariants[s];if(i!=null){var l=i;typeof l=="boolean"&&(l=l===!0?"true":"false");var b=e.variantClassNames[s][l];b&&(t+=" "+b)}}for(var[u,C]of e.compoundVariants)B(u,n,e.defaultVariants)&&(t+=" "+C);return t},J=p({defaultClassName:"_1mxrufv0",variantClassNames:{lean:{true:"_1mxrufv1",false:"_1mxrufv2"},borderless:{true:"_1mxrufv3",false:"_1mxrufv4"},wrapContent:{true:"_1mxrufv5",false:"_1mxrufv6"}},defaultVariants:{lean:!1,borderless:!1,wrapContent:!1},compoundVariants:[]}),Q=p({defaultClassName:"_1mxrufv7",variantClassNames:{lean:{true:"_1mxrufv8",false:"_1mxrufv9"},borderless:{true:"_1mxrufva",false:"_1mxrufvb"},wrapContent:{true:"_1mxrufvc",false:"_1mxrufvd"}},defaultVariants:{lean:!1,borderless:!1,wrapContent:!1},compoundVariants:[]});function c({children:e,className:a,borderless:t,lean:n,widthPx:s,widthRem:d,style:i,wrapContent:l=!1,__autoLayout:b=!1,...u}){const C=s?s/16:d,f=C?{...i,width:`${C}rem`}:i;return b?o.createElement("td",{className:r.cl(Q({lean:n,borderless:t,wrapContent:l}),a),...u,style:f},e):o.createElement("div",{className:r.cl(J({lean:n,borderless:t,wrapContent:l}),a),...u,style:f},e)}r.Metadata.set(c,{name:"Content Row Col",props:{borderless:{type:"boolean"},lean:{type:"boolean"},widthPx:{type:"number"},widthRem:{type:"number"},wrapContent:{type:"boolean"}}});var U=p({defaultClassName:"_11ztjee3",variantClassNames:{expanded:{true:"_11ztjee4",false:"_11ztjee5"}},defaultVariants:{expanded:!1},compoundVariants:[]}),X=p({defaultClassName:"_11ztjee6",variantClassNames:{cardSpacing:{true:"_11ztjee7",false:"_11ztjee8"},expanded:{true:"_11ztjee9",false:"_11ztjeea"},selected:{true:"_11ztjeeb",false:"_11ztjeec"}},defaultVariants:{expanded:!1,selected:!1,cardSpacing:!1},compoundVariants:[[{expanded:!0,cardSpacing:!0},"_11ztjeed"]]}),O=p({defaultClassName:"_11ztjeeo",variantClassNames:{__autoLayout:{true:"_11ztjeep",false:"_11ztjeeq"}},defaultVariants:{__autoLayout:!1},compoundVariants:[]}),Y=p({defaultClassName:"_11ztjeee",variantClassNames:{selected:{true:"_11ztjeef",false:"_11ztjeeg"},expanded:{true:"_11ztjeeh",false:"_11ztjeei"}},defaultVariants:{selected:!1,expanded:!1},compoundVariants:[]}),Z="_11ztjeej",$="_11ztjeek",ee=p({defaultClassName:"_11ztjeel",variantClassNames:{disabled:{true:"_11ztjeem",false:"_11ztjeen"}},defaultVariants:{},compoundVariants:[]}),S="_11ztjeer";function E({children:e,className:a,__autoLayout:t=!1,...n}){return t?o.createElement("tr",null,o.createElement("td",{className:r.cl(O({__autoLayout:t}),a),colSpan:100,...n},e)):o.createElement("div",{className:r.cl(O({__autoLayout:t}),a),...n},e)}r.Metadata.set(E,{name:"Content Row Expansion"});function k({children:e,className:a,alternateLayout:t=!1,initiallyExpanded:n=!1,cardSpacing:s=!1,expanded:d,onBeforeCollapsed:i,onBeforeExpanded:l,onSelectionChange:b,onCollapsed:u,onExpanded:C,selectable:f=!1,selected:v,renderExpandedContent:y=!0,disableSelection:A=!1,disableExpansion:_=!1,__autoLayout:x=!1,...M}){const[P,[R]]=r.selectChildren(e,[{type:c},{type:E}]),{t:D}=o.useContext(r.I18nContext),[j,V]=o.useState(!x&&y?y:n),[T,z]=o.useState(n),w=typeof d=="boolean"?d:T;function L(N){N.stopPropagation(),w&&(!i||i())?(z(!1),(!y||x)&&V(!1),u&&u()):!w&&(!l||l())&&(z(!0),(!y||x)&&V(!0),C&&C())}const g=()=>o.createElement(q.SpsCheckbox,{disabled:A,checked:v,onChange:b}),h=o.createElement("button",{type:"button",className:r.cl($),onClick:L,"aria-label":D(`design-system:contentRow.${w?"collapse":"expand"}`),disabled:_},o.createElement(r.Icon,{className:r.cl(ee({disabled:_})),icon:w?"minus-circle":"plus-circle"}));if(x){const N=o.createElement("tr",null,o.createElement("td",{className:r.cl(Z),colSpan:100}));return o.createElement(o.Fragment,null,o.createElement("tr",{className:r.cl(Y({selected:v,expanded:w})),...M},f&&!t&&o.createElement(c,{widthPx:46,__autoLayout:!0},o.createElement(g,null)),R&&!t&&o.createElement(c,{widthPx:44,__autoLayout:!0},h),R&&f&&t&&o.createElement(c,{widthPx:46,__autoLayout:!0},o.createElement("section",{className:S},o.createElement(g,null)),o.createElement("section",{className:S},h)),P),j&&R,N)}return o.createElement("div",{className:r.cl(U({expanded:w}),a),...M},o.createElement("div",{className:r.cl(X({expanded:w,selected:v,cardSpacing:s}))},f&&!t&&o.createElement(c,{widthPx:46},o.createElement(g,null)),R&&!t&&o.createElement(c,{widthPx:44},h),R&&f&&t&&o.createElement(c,{widthPx:46},o.createElement("section",{className:S},o.createElement(g,null)),o.createElement("section",{className:S},h)),P),j&&R)}r.Metadata.set(k,{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"},renderExpandedContent:{type:"boolean",default:"true"},disableSelection:{type:"boolean",default:"false"},disableExpansion:{type:"boolean",default:"false"}}});var te=p({defaultClassName:"_1wuky9j0",variantClassNames:{wrapContent:{true:"_1wuky9j1",false:"_1wuky9j2"}},defaultVariants:{wrapContent:!1},compoundVariants:[]});const oe=new Set(["Content Row","Content Row Col","Content Row Expansion","Sorting Header","Sorting Header Cell"]);function H({children:e,className:a,wrapContent:t=!1,...n}){const s=o.useMemo(()=>r.modChildren(e,l=>r.Metadata.isWoodlandComponent(l.type)&&oe.has(r.Metadata.get(l.type).name)?[{__autoLayout:!0}]:[{}]),[e]),[[d],i]=o.useMemo(()=>r.selectChildren(s,[{type:l=>!!(r.Metadata.isWoodlandComponent(l.type)&&r.Metadata.get(l.type).name==="Sorting Header")}]),[s]);return o.createElement("table",{className:r.cl(te({wrapContent:t}),a),...n},d?o.createElement("thead",null,d):null,o.createElement("tbody",null,i))}r.Metadata.set(H,{name:"Row List Auto Layout",props:{wrapContent:{type:"boolean",default:"false"}}});const ne={components:[k,c,E],examples:{basic:{label:"Content Rows",examples:{basic:{react:m.code`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ne=require("react"),r=require("@sps-woodland/core"),B=require("@sps-woodland/buttons"),K=require("@spscommerce/ds-react"),j=require("@spscommerce/ds-shared"),p=require("@spscommerce/utils");function ae(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(a,o,n.get?n:{enumerable:!0,get:()=>t[o]})}}return a.default=t,Object.freeze(a)}const e=ae(ne);function re(t,a,o){return a in t?Object.defineProperty(t,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[a]=o,t}function G(t,a){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);a&&(n=n.filter(function(s){return Object.getOwnPropertyDescriptor(t,s).enumerable})),o.push.apply(o,n)}return o}function J(t){for(var a=1;a<arguments.length;a++){var o=arguments[a]!=null?arguments[a]:{};a%2?G(Object(o),!0).forEach(function(n){re(t,n,o[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):G(Object(o)).forEach(function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(o,n))})}return t}var se=(t,a,o)=>{for(var n of Object.keys(t)){var s;if(t[n]!==((s=a[n])!==null&&s!==void 0?s:o[n]))return!1}return!0},u=t=>a=>{var o=t.defaultClassName,n=J(J({},t.defaultVariants),a);for(var s in n){var i,m=(i=n[s])!==null&&i!==void 0?i:t.defaultVariants[s];if(m!=null){var l=m;typeof l=="boolean"&&(l=l===!0?"true":"false");var y=t.variantClassNames[s][l];y&&(o+=" "+y)}}for(var[C,f]of t.compoundVariants)se(C,n,t.defaultVariants)&&(o+=" "+f);return o},le=u({defaultClassName:"_1mxrufv0",variantClassNames:{lean:{true:"_1mxrufv1",false:"_1mxrufv2"},borderless:{true:"_1mxrufv3",false:"_1mxrufv4"},wrapContent:{true:"_1mxrufv5",false:"_1mxrufv6"}},defaultVariants:{lean:!1,borderless:!1,wrapContent:!1},compoundVariants:[]}),ie=u({defaultClassName:"_1mxrufv7",variantClassNames:{lean:{true:"_1mxrufv8",false:"_1mxrufv9"},borderless:{true:"_1mxrufva",false:"_1mxrufvb"},wrapContent:{true:"_1mxrufvc",false:"_1mxrufvd"}},defaultVariants:{lean:!1,borderless:!1,wrapContent:!1},compoundVariants:[]});function c({children:t,className:a,borderless:o,lean:n,widthPx:s,widthRem:i,style:m,wrapContent:l=!1,__autoLayout:y=!1,...C}){const f=s?s/16:i,w=f?{...m,width:`${f}rem`}:m;return y?e.createElement("td",{className:r.cl(ie({lean:n,borderless:o,wrapContent:l}),a),...C,style:w},t):e.createElement("div",{className:r.cl(le({lean:n,borderless:o,wrapContent:l}),a),...C,style:w},t)}r.Metadata.set(c,{name:"Content Row Col",props:{borderless:{type:"boolean"},lean:{type:"boolean"},widthPx:{type:"number"},widthRem:{type:"number"},wrapContent:{type:"boolean"}}});var de=u({defaultClassName:"_11ztjee4",variantClassNames:{expanded:{true:"_11ztjee5",false:"_11ztjee6"}},defaultVariants:{expanded:!1},compoundVariants:[]}),ce=u({defaultClassName:"_11ztjee7",variantClassNames:{cardSpacing:{true:"_11ztjee8",false:"_11ztjee9"},expanded:{true:"_11ztjeea",false:"_11ztjeeb"},selected:{true:"_11ztjeec",false:"_11ztjeed"},reorderable:{true:"_11ztjeee",false:"_11ztjeef"}},defaultVariants:{expanded:!1,selected:!1,cardSpacing:!1},compoundVariants:[[{expanded:!0,cardSpacing:!0},"_11ztjeeg"]]}),U=u({defaultClassName:"_11ztjeer",variantClassNames:{__autoLayout:{true:"_11ztjees",false:"_11ztjeet"}},defaultVariants:{__autoLayout:!1},compoundVariants:[]}),me=u({defaultClassName:"_11ztjeeh",variantClassNames:{selected:{true:"_11ztjeei",false:"_11ztjeej"},expanded:{true:"_11ztjeek",false:"_11ztjeel"}},defaultVariants:{selected:!1,expanded:!1},compoundVariants:[]}),ue="_11ztjeem",pe="_11ztjeen",Ce=u({defaultClassName:"_11ztjeeo",variantClassNames:{disabled:{true:"_11ztjeep",false:"_11ztjeeq"}},defaultVariants:{},compoundVariants:[]}),fe="_11ztjee10",we="_11ztjee11",be="_11ztjeez",Q=u({defaultClassName:"_11ztjee12",variantClassNames:{disabled:{true:"_11ztjee13",false:"_11ztjee14"},up:{true:"_11ztjee15",false:"_11ztjee16"},down:{true:"_11ztjee17",false:"_11ztjee18"}},defaultVariants:{disabled:!1,up:!1,down:!1},compoundVariants:[]}),Re="_11ztjeev",X=u({defaultClassName:"_11ztjeew",variantClassNames:{reorderable:{true:"_11ztjeex",false:"_11ztjeey"}},defaultVariants:{reorderable:!1},compoundVariants:[]}),k="_11ztjeeu";function z({children:t,className:a,__autoLayout:o=!1,...n}){return o?e.createElement("tr",null,e.createElement("td",{className:r.cl(U({__autoLayout:o}),a),colSpan:100,...n},t)):e.createElement("div",{className:r.cl(U({__autoLayout:o}),a),...n},t)}r.Metadata.set(z,{name:"Content Row Expansion"});function I({children:t,className:a,alternateLayout:o=!1,initiallyExpanded:n=!1,cardSpacing:s=!1,expanded:i,onBeforeCollapsed:m,onBeforeExpanded:l,onSelectionChange:y,onCollapsed:C,onExpanded:f,selectable:w=!1,selected:V,renderExpandedContent:g=!0,disableSelection:Z=!1,disableExpansion:F=!1,__autoLayout:S=!1,__reorderable:x=!1,__onOrderChange:h=()=>{},__index:d=0,__canBeMovedUp:O,__canBeMovedDown:H,..._}){const[A,[E]]=r.selectChildren(t,[{type:c},{type:z}]),{t:$}=e.useContext(r.I18nContext),[D,T]=e.useState(!S&&g?g:n),[ee,L]=e.useState(n),b=typeof i=="boolean"?i:ee,[P,M]=e.useState((d+1).toString()||"");e.useEffect(()=>{M((d+1).toString()||"")},[d]);function te(R){M(R.target.value)}function W(){Number(P)?h(d,Number(P)-1):(M((d+1).toString()||""),h(d,d))}function oe(R){R.stopPropagation(),b&&(!m||m())?(L(!1),(!g||S)&&T(!1),C&&C()):!b&&(!l||l())&&(L(!0),(!g||S)&&T(!0),f&&f())}const N=()=>e.createElement(K.SpsCheckbox,{disabled:Z,checked:V,onChange:y}),v=e.createElement("button",{type:"button",className:r.cl(pe),onClick:oe,"aria-label":$(`design-system:contentRow.${b?"collapse":"expand"}`),disabled:F},e.createElement(r.Icon,{className:r.cl(Ce({disabled:F})),icon:b?"minus-circle":"plus-circle"}));if(S){const R=e.createElement("tr",null,e.createElement("td",{className:r.cl(ue),colSpan:100}));return e.createElement(e.Fragment,null,e.createElement("tr",{className:r.cl(me({selected:V,expanded:b})),..._},w&&!o&&e.createElement(c,{widthPx:46,__autoLayout:!0},e.createElement(N,null)),E&&!o&&e.createElement(c,{widthPx:44,__autoLayout:!0},v),E&&w&&o&&e.createElement(c,{widthPx:46,__autoLayout:!0},e.createElement("section",{className:k},e.createElement(N,null)),e.createElement("section",{className:k},v)),A),D&&E,R)}const q=e.createElement("div",{className:r.cl(de({expanded:b}),a),..._},e.createElement("div",{className:r.cl(ce({expanded:b,selected:V,cardSpacing:s,reorderable:x}))},x&&e.createElement(c,{widthPx:53,style:{position:"relative"}},e.createElement("section",{className:X({reorderable:x})},e.createElement(B.Button,{className:Q({up:!0,disabled:!O}),kind:j.ButtonKind.ICON,icon:j.SpsIcon.CHEVRON_UP,onClick:()=>h(d,d-1),disabled:!O})),e.createElement("section",{className:X({reorderable:x})},e.createElement(B.Button,{className:Q({down:!0,disabled:!H}),kind:j.ButtonKind.ICON,icon:j.SpsIcon.CHEVRON_DOWN,onClick:()=>h(d,d+1),disabled:!H}))),w&&!o&&e.createElement(c,{widthPx:46},e.createElement(N,null)),E&&!o&&e.createElement(c,{widthPx:44},v),E&&w&&o&&e.createElement(c,{widthPx:46},e.createElement("section",{className:k},e.createElement(N,null)),e.createElement("section",{className:k},v)),A),D&&E);return x?e.createElement("div",{className:Re},x&&e.createElement("div",{className:r.cl(be,a)},e.createElement("div",{className:fe},e.createElement(K.SpsTextInput,{className:we,value:P,onChange:te,onBlur:()=>W(),onKeyUp:R=>{R.key==="Enter"&&W()},notClearable:!0}))),q):q}r.Metadata.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"},renderExpandedContent:{type:"boolean",default:"true"},disableSelection:{type:"boolean",default:"false"},disableExpansion:{type:"boolean",default:"false"}}});var ye=u({defaultClassName:"_1wuky9j0",variantClassNames:{wrapContent:{true:"_1wuky9j1",false:"_1wuky9j2"}},defaultVariants:{wrapContent:!1},compoundVariants:[]});const xe=new Set(["Content Row","Content Row Col","Content Row Expansion","Sorting Header","Sorting Header Cell"]);function Y({children:t,className:a,wrapContent:o=!1,...n}){const s=e.useMemo(()=>r.modChildren(t,l=>r.Metadata.isWoodlandComponent(l.type)&&xe.has(r.Metadata.get(l.type).name)?[{__autoLayout:!0}]:[{}]),[t]),[[i],m]=e.useMemo(()=>r.selectChildren(s,[{type:l=>!!(r.Metadata.isWoodlandComponent(l.type)&&r.Metadata.get(l.type).name==="Sorting Header")}]),[s]);return e.createElement("table",{className:r.cl(ye({wrapContent:o}),a),...n},i?e.createElement("thead",null,i):null,e.createElement("tbody",null,m))}r.Metadata.set(Y,{name:"Row List Auto Layout",props:{wrapContent:{type:"boolean",default:"false"}}});const Ee={components:[I,c,z],examples:{basic:{label:"Content Rows",examples:{basic:{react:p.code`
             import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
             import { Icon } from "@sps-woodland/core";
             import { sprinkles } from "@sps-woodland/tokens";
@@ -16,7 +16,7 @@
                 </ContentRow>
               )
             }
-          `},withCheckbox:{react:m.code`
+          `},withCheckbox:{react:p.code`
             import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
             import { Icon } from "@sps-woodland/core";
             import { sprinkles } from "@sps-woodland/tokens";
@@ -46,7 +46,7 @@
                 </ContentRow>
               )
             }
-          `},withCheckboxAndFavorite:{react:m.code`
+          `},withCheckboxAndFavorite:{react:p.code`
             import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
             import { Icon } from "@sps-woodland/core";
             import { sprinkles } from "@sps-woodland/tokens";
@@ -79,7 +79,7 @@
                 </ContentRow>
               )
             }
-          `}}},expandable:{label:"Expandable Content Rows",examples:{basic:{react:m.code`
+          `}}},expandable:{label:"Expandable Content Rows",examples:{basic:{react:p.code`
             import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
             import { Card } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
@@ -111,7 +111,7 @@
                 </ContentRow>
               )
             }
-          `},expandableWithCheckbox:{react:m.code`
+          `},expandableWithCheckbox:{react:p.code`
             import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
             import { Card } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
@@ -155,7 +155,7 @@
                 </ContentRow>
               )
             }
-          `},expandableWithCheckboxAlternate:{react:m.code`
+          `},expandableWithCheckboxAlternate:{react:p.code`
             import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
             import { Card } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
@@ -200,7 +200,7 @@
                 </ContentRow>
               )
             }
-          `},expandableWithCheckboxAndFavorite:{react:m.code`
+          `},expandableWithCheckboxAndFavorite:{react:p.code`
             import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
             import { Card } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
@@ -247,7 +247,7 @@
                 </ContentRow>
               )
             }
-          `},expandableWithCheckboxAndFavoriteAlternate:{react:m.code`
+          `},expandableWithCheckboxAndFavoriteAlternate:{react:p.code`
             import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
             import { Card } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
@@ -295,7 +295,7 @@
                 </ContentRow>
               )
             }
-          `}}},sortable:{label:"Sortable Content Rows",examples:{basic:{react:m.code`
+          `}}},sortable:{label:"Sortable Content Rows",examples:{basic:{react:p.code`
           import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
           import { Card } from "@sps-woodland/cards";
           import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
@@ -398,4 +398,4 @@
               </>
             )
           }
-          `}}}}},ae={"Content Rows":ne};exports.ContentRow=k;exports.ContentRowCol=c;exports.ContentRowExpansion=E;exports.MANIFEST=ae;exports.RowListAutoLayout=H;
+          `}}}}},ge={"Content Rows":Ee};exports.ContentRow=I;exports.ContentRowCol=c;exports.ContentRowExpansion=z;exports.MANIFEST=ge;exports.RowListAutoLayout=Y;

package/lib/index.es.js

@@ -1,8 +1,10 @@
 import * as e from "react";
-import { Metadata as p, cl as i, selectChildren as O, I18nContext as G, Icon as K, modChildren as B } from "@sps-woodland/core";
-import { SpsCheckbox as q } from "@spscommerce/ds-react";
-import { code as c } from "@spscommerce/utils";
-function J(t, a, o) {
+import { Metadata as C, cl as l, selectChildren as Y, I18nContext as ae, Icon as re, modChildren as se } from "@sps-woodland/core";
+import { Button as K } from "@sps-woodland/buttons";
+import { SpsTextInput as le, SpsCheckbox as ie } from "@spscommerce/ds-react";
+import { ButtonKind as B, SpsIcon as G } from "@spscommerce/ds-shared";
+import { code as u } from "@spscommerce/utils";
+function de(t, a, o) {
   return a in t ? Object.defineProperty(t, a, {
     value: o,
     enumerable: !0,
@@ -10,7 +12,7 @@ function J(t, a, o) {
     writable: !0
   }) : t[a] = o, t;
 }
-function I(t, a) {
+function q(t, a) {
   var o = Object.keys(t);
   if (Object.getOwnPropertySymbols) {
     var n = Object.getOwnPropertySymbols(t);
@@ -20,77 +22,77 @@ function I(t, a) {
   }
   return o;
 }
-function F(t) {
+function J(t) {
   for (var a = 1; a < arguments.length; a++) {
     var o = arguments[a] != null ? arguments[a] : {};
-    a % 2 ? I(Object(o), !0).forEach(function(n) {
-      J(t, n, o[n]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(o)) : I(Object(o)).forEach(function(n) {
+    a % 2 ? q(Object(o), !0).forEach(function(n) {
+      de(t, n, o[n]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(o)) : q(Object(o)).forEach(function(n) {
       Object.defineProperty(t, n, Object.getOwnPropertyDescriptor(o, n));
     });
   }
   return t;
 }
-var Q = (t, a, o) => {
+var ce = (t, a, o) => {
   for (var n of Object.keys(t)) {
     var r;
     if (t[n] !== ((r = a[n]) !== null && r !== void 0 ? r : o[n]))
       return !1;
   }
   return !0;
-}, u = (t) => (a) => {
-  var o = t.defaultClassName, n = F(F({}, t.defaultVariants), a);
+}, p = (t) => (a) => {
+  var o = t.defaultClassName, n = J(J({}, t.defaultVariants), a);
   for (var r in n) {
-    var l, d = (l = n[r]) !== null && l !== void 0 ? l : t.defaultVariants[r];
-    if (d != null) {
-      var s = d;
+    var i, c = (i = n[r]) !== null && i !== void 0 ? i : t.defaultVariants[r];
+    if (c != null) {
+      var s = c;
       typeof s == "boolean" && (s = s === !0 ? "true" : "false");
-      var R = (
+      var x = (
         // @ts-expect-error
         t.variantClassNames[r][s]
       );
-      R && (o += " " + R);
+      x && (o += " " + x);
     }
   }
-  for (var [C, f] of t.compoundVariants)
-    Q(C, n, t.defaultVariants) && (o += " " + f);
+  for (var [f, w] of t.compoundVariants)
+    ce(f, n, t.defaultVariants) && (o += " " + w);
   return o;
-}, U = u({ defaultClassName: "_1mxrufv0", variantClassNames: { lean: { true: "_1mxrufv1", false: "_1mxrufv2" }, borderless: { true: "_1mxrufv3", false: "_1mxrufv4" }, wrapContent: { true: "_1mxrufv5", false: "_1mxrufv6" } }, defaultVariants: { lean: !1, borderless: !1, wrapContent: !1 }, compoundVariants: [] }), X = u({ defaultClassName: "_1mxrufv7", variantClassNames: { lean: { true: "_1mxrufv8", false: "_1mxrufv9" }, borderless: { true: "_1mxrufva", false: "_1mxrufvb" }, wrapContent: { true: "_1mxrufvc", false: "_1mxrufvd" } }, defaultVariants: { lean: !1, borderless: !1, wrapContent: !1 }, compoundVariants: [] });
+}, me = p({ defaultClassName: "_1mxrufv0", variantClassNames: { lean: { true: "_1mxrufv1", false: "_1mxrufv2" }, borderless: { true: "_1mxrufv3", false: "_1mxrufv4" }, wrapContent: { true: "_1mxrufv5", false: "_1mxrufv6" } }, defaultVariants: { lean: !1, borderless: !1, wrapContent: !1 }, compoundVariants: [] }), pe = p({ defaultClassName: "_1mxrufv7", variantClassNames: { lean: { true: "_1mxrufv8", false: "_1mxrufv9" }, borderless: { true: "_1mxrufva", false: "_1mxrufvb" }, wrapContent: { true: "_1mxrufvc", false: "_1mxrufvd" } }, defaultVariants: { lean: !1, borderless: !1, wrapContent: !1 }, compoundVariants: [] });
 function m({
   children: t,
   className: a,
   borderless: o,
   lean: n,
   widthPx: r,
-  widthRem: l,
-  style: d,
+  widthRem: i,
+  style: c,
   wrapContent: s = !1,
-  __autoLayout: R = !1,
-  ...C
+  __autoLayout: x = !1,
+  ...f
 }) {
-  const f = r ? r / 16 : l, w = f ? {
-    ...d,
-    width: `${f}rem`
-  } : d;
-  return R ? /* @__PURE__ */ e.createElement(
+  const w = r ? r / 16 : i, b = w ? {
+    ...c,
+    width: `${w}rem`
+  } : c;
+  return x ? /* @__PURE__ */ e.createElement(
     "td",
     {
-      className: i(X({ lean: n, borderless: o, wrapContent: s }), a),
-      ...C,
-      style: w
+      className: l(pe({ lean: n, borderless: o, wrapContent: s }), a),
+      ...f,
+      style: b
     },
     t
   ) : /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: i(U({ lean: n, borderless: o, wrapContent: s }), a),
-      ...C,
-      style: w
+      className: l(me({ lean: n, borderless: o, wrapContent: s }), a),
+      ...f,
+      style: b
     },
     t
   );
 }
-p.set(m, {
+C.set(m, {
   name: "Content Row Col",
   props: {
     borderless: { type: "boolean" },
@@ -100,8 +102,8 @@ p.set(m, {
     wrapContent: { type: "boolean" }
   }
 });
-var Y = u({ defaultClassName: "_11ztjee3", variantClassNames: { expanded: { true: "_11ztjee4", false: "_11ztjee5" } }, defaultVariants: { expanded: !1 }, compoundVariants: [] }), Z = u({ defaultClassName: "_11ztjee6", variantClassNames: { cardSpacing: { true: "_11ztjee7", false: "_11ztjee8" }, expanded: { true: "_11ztjee9", false: "_11ztjeea" }, selected: { true: "_11ztjeeb", false: "_11ztjeec" } }, defaultVariants: { expanded: !1, selected: !1, cardSpacing: !1 }, compoundVariants: [[{ expanded: !0, cardSpacing: !0 }, "_11ztjeed"]] }), H = u({ defaultClassName: "_11ztjeeo", variantClassNames: { __autoLayout: { true: "_11ztjeep", false: "_11ztjeeq" } }, defaultVariants: { __autoLayout: !1 }, compoundVariants: [] }), $ = u({ defaultClassName: "_11ztjeee", variantClassNames: { selected: { true: "_11ztjeef", false: "_11ztjeeg" }, expanded: { true: "_11ztjeeh", false: "_11ztjeei" } }, defaultVariants: { selected: !1, expanded: !1 }, compoundVariants: [] }), ee = "_11ztjeej", te = "_11ztjeek", oe = u({ defaultClassName: "_11ztjeel", variantClassNames: { disabled: { true: "_11ztjeem", false: "_11ztjeen" } }, defaultVariants: {}, compoundVariants: [] }), S = "_11ztjeer";
-function k({
+var ue = p({ defaultClassName: "_11ztjee4", variantClassNames: { expanded: { true: "_11ztjee5", false: "_11ztjee6" } }, defaultVariants: { expanded: !1 }, compoundVariants: [] }), Ce = p({ defaultClassName: "_11ztjee7", variantClassNames: { cardSpacing: { true: "_11ztjee8", false: "_11ztjee9" }, expanded: { true: "_11ztjeea", false: "_11ztjeeb" }, selected: { true: "_11ztjeec", false: "_11ztjeed" }, reorderable: { true: "_11ztjeee", false: "_11ztjeef" } }, defaultVariants: { expanded: !1, selected: !1, cardSpacing: !1 }, compoundVariants: [[{ expanded: !0, cardSpacing: !0 }, "_11ztjeeg"]] }), U = p({ defaultClassName: "_11ztjeer", variantClassNames: { __autoLayout: { true: "_11ztjees", false: "_11ztjeet" } }, defaultVariants: { __autoLayout: !1 }, compoundVariants: [] }), fe = p({ defaultClassName: "_11ztjeeh", variantClassNames: { selected: { true: "_11ztjeei", false: "_11ztjeej" }, expanded: { true: "_11ztjeek", false: "_11ztjeel" } }, defaultVariants: { selected: !1, expanded: !1 }, compoundVariants: [] }), we = "_11ztjeem", be = "_11ztjeen", Re = p({ defaultClassName: "_11ztjeeo", variantClassNames: { disabled: { true: "_11ztjeep", false: "_11ztjeeq" } }, defaultVariants: {}, compoundVariants: [] }), ye = "_11ztjee10", xe = "_11ztjee11", Ee = "_11ztjeez", Q = p({ defaultClassName: "_11ztjee12", variantClassNames: { disabled: { true: "_11ztjee13", false: "_11ztjee14" }, up: { true: "_11ztjee15", false: "_11ztjee16" }, down: { true: "_11ztjee17", false: "_11ztjee18" } }, defaultVariants: { disabled: !1, up: !1, down: !1 }, compoundVariants: [] }), he = "_11ztjeev", X = p({ defaultClassName: "_11ztjeew", variantClassNames: { reorderable: { true: "_11ztjeex", false: "_11ztjeey" } }, defaultVariants: { reorderable: !1 }, compoundVariants: [] }), z = "_11ztjeeu";
+function I({
   children: t,
   className: a,
   __autoLayout: o = !1,
@@ -110,84 +112,138 @@ function k({
   return o ? /* @__PURE__ */ e.createElement("tr", null, /* @__PURE__ */ e.createElement(
     "td",
     {
-      className: i(H({ __autoLayout: o }), a),
+      className: l(U({ __autoLayout: o }), a),
       colSpan: 100,
       ...n
     },
     t
-  )) : /* @__PURE__ */ e.createElement("div", { className: i(H({ __autoLayout: o }), a), ...n }, t);
+  )) : /* @__PURE__ */ e.createElement("div", { className: l(U({ __autoLayout: o }), a), ...n }, t);
 }
-p.set(k, {
+C.set(I, {
   name: "Content Row Expansion"
 });
-function A({
+function Z({
   children: t,
   className: a,
   alternateLayout: o = !1,
   initiallyExpanded: n = !1,
   cardSpacing: r = !1,
-  expanded: l,
-  onBeforeCollapsed: d,
+  expanded: i,
+  onBeforeCollapsed: c,
   onBeforeExpanded: s,
-  onSelectionChange: R,
-  onCollapsed: C,
-  onExpanded: f,
-  selectable: w = !1,
-  selected: v,
-  renderExpandedContent: y = !0,
-  disableSelection: D = !1,
-  disableExpansion: _ = !1,
-  __autoLayout: h = !1,
-  ...P
+  onSelectionChange: x,
+  onCollapsed: f,
+  onExpanded: w,
+  selectable: b = !1,
+  selected: j,
+  renderExpandedContent: g = !0,
+  disableSelection: $ = !1,
+  disableExpansion: M = !1,
+  __autoLayout: N = !1,
+  __reorderable: E = !1,
+  __onOrderChange: S = () => {
+  },
+  __index: d = 0,
+  __canBeMovedUp: F,
+  __canBeMovedDown: H,
+  ...O
 }) {
-  const [V, [x]] = O(t, [
+  const [_, [h]] = Y(t, [
     { type: m },
-    { type: k }
-  ]), { t: T } = e.useContext(G), [j, z] = e.useState(
-    !h && y ? y : n
-  ), [L, M] = e.useState(n), b = typeof l == "boolean" ? l : L;
-  function W(N) {
-    N.stopPropagation(), b && (!d || d()) ? (M(!1), (!y || h) && z(!1), C && C()) : !b && (!s || s()) && (M(!0), (!y || h) && z(!0), f && f());
+    { type: I }
+  ]), { t: ee } = e.useContext(ae), [A, D] = e.useState(
+    !N && g ? g : n
+  ), [te, T] = e.useState(n), R = typeof i == "boolean" ? i : te, [V, P] = e.useState((d + 1).toString() || "");
+  e.useEffect(() => {
+    P((d + 1).toString() || "");
+  }, [d]);
+  function oe(y) {
+    P(y.target.value);
   }
-  const g = () => /* @__PURE__ */ e.createElement(q, { disabled: D, checked: v, onChange: R }), E = /* @__PURE__ */ e.createElement(
+  function L() {
+    Number(V) ? S(d, Number(V) - 1) : (P((d + 1).toString() || ""), S(d, d));
+  }
+  function ne(y) {
+    y.stopPropagation(), R && (!c || c()) ? (T(!1), (!g || N) && D(!1), f && f()) : !R && (!s || s()) && (T(!0), (!g || N) && D(!0), w && w());
+  }
+  const v = () => /* @__PURE__ */ e.createElement(ie, { disabled: $, checked: j, onChange: x }), k = /* @__PURE__ */ e.createElement(
     "button",
     {
       type: "button",
-      className: i(te),
-      onClick: W,
-      "aria-label": T(`design-system:contentRow.${b ? "collapse" : "expand"}`),
-      disabled: _
+      className: l(be),
+      onClick: ne,
+      "aria-label": ee(`design-system:contentRow.${R ? "collapse" : "expand"}`),
+      disabled: M
     },
     /* @__PURE__ */ e.createElement(
-      K,
+      re,
       {
-        className: i(oe({ disabled: _ })),
-        icon: b ? "minus-circle" : "plus-circle"
+        className: l(Re({ disabled: M })),
+        icon: R ? "minus-circle" : "plus-circle"
       }
     )
   );
-  if (h) {
-    const N = /* @__PURE__ */ e.createElement("tr", null, /* @__PURE__ */ e.createElement("td", { className: i(ee), colSpan: 100 }));
-    return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("tr", { className: i($({ selected: v, expanded: b })), ...P }, w && !o && /* @__PURE__ */ e.createElement(m, { widthPx: 46, __autoLayout: !0 }, /* @__PURE__ */ e.createElement(g, null)), x && !o && /* @__PURE__ */ e.createElement(m, { widthPx: 44, __autoLayout: !0 }, E), x && w && o && /* @__PURE__ */ e.createElement(m, { widthPx: 46, __autoLayout: !0 }, /* @__PURE__ */ e.createElement("section", { className: S }, /* @__PURE__ */ e.createElement(g, null)), /* @__PURE__ */ e.createElement("section", { className: S }, E)), V), j && x, N);
+  if (N) {
+    const y = /* @__PURE__ */ e.createElement("tr", null, /* @__PURE__ */ e.createElement("td", { className: l(we), colSpan: 100 }));
+    return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("tr", { className: l(fe({ selected: j, expanded: R })), ...O }, b && !o && /* @__PURE__ */ e.createElement(m, { widthPx: 46, __autoLayout: !0 }, /* @__PURE__ */ e.createElement(v, null)), h && !o && /* @__PURE__ */ e.createElement(m, { widthPx: 44, __autoLayout: !0 }, k), h && b && o && /* @__PURE__ */ e.createElement(m, { widthPx: 46, __autoLayout: !0 }, /* @__PURE__ */ e.createElement("section", { className: z }, /* @__PURE__ */ e.createElement(v, null)), /* @__PURE__ */ e.createElement("section", { className: z }, k)), _), A && h, y);
   }
-  return /* @__PURE__ */ e.createElement("div", { className: i(Y({ expanded: b }), a), ...P }, /* @__PURE__ */ e.createElement(
+  const W = /* @__PURE__ */ e.createElement("div", { className: l(ue({ expanded: R }), a), ...O }, /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: i(
-        Z({
-          expanded: b,
-          selected: v,
-          cardSpacing: r
+      className: l(
+        Ce({
+          expanded: R,
+          selected: j,
+          cardSpacing: r,
+          reorderable: E
         })
       )
     },
-    w && !o && /* @__PURE__ */ e.createElement(m, { widthPx: 46 }, /* @__PURE__ */ e.createElement(g, null)),
-    x && !o && /* @__PURE__ */ e.createElement(m, { widthPx: 44 }, E),
-    x && w && o && /* @__PURE__ */ e.createElement(m, { widthPx: 46 }, /* @__PURE__ */ e.createElement("section", { className: S }, /* @__PURE__ */ e.createElement(g, null)), /* @__PURE__ */ e.createElement("section", { className: S }, E)),
-    V
-  ), j && x);
+    E && /* @__PURE__ */ e.createElement(m, { widthPx: 53, style: { position: "relative" } }, /* @__PURE__ */ e.createElement("section", { className: X({ reorderable: E }) }, /* @__PURE__ */ e.createElement(
+      K,
+      {
+        className: Q({
+          up: !0,
+          disabled: !F
+        }),
+        kind: B.ICON,
+        icon: G.CHEVRON_UP,
+        onClick: () => S(d, d - 1),
+        disabled: !F
+      }
+    )), /* @__PURE__ */ e.createElement("section", { className: X({ reorderable: E }) }, /* @__PURE__ */ e.createElement(
+      K,
+      {
+        className: Q({
+          down: !0,
+          disabled: !H
+        }),
+        kind: B.ICON,
+        icon: G.CHEVRON_DOWN,
+        onClick: () => S(d, d + 1),
+        disabled: !H
+      }
+    ))),
+    b && !o && /* @__PURE__ */ e.createElement(m, { widthPx: 46 }, /* @__PURE__ */ e.createElement(v, null)),
+    h && !o && /* @__PURE__ */ e.createElement(m, { widthPx: 44 }, k),
+    h && b && o && /* @__PURE__ */ e.createElement(m, { widthPx: 46 }, /* @__PURE__ */ e.createElement("section", { className: z }, /* @__PURE__ */ e.createElement(v, null)), /* @__PURE__ */ e.createElement("section", { className: z }, k)),
+    _
+  ), A && h);
+  return E ? /* @__PURE__ */ e.createElement("div", { className: he }, E && /* @__PURE__ */ e.createElement("div", { className: l(Ee, a) }, /* @__PURE__ */ e.createElement("div", { className: ye }, /* @__PURE__ */ e.createElement(
+    le,
+    {
+      className: xe,
+      value: V,
+      onChange: oe,
+      onBlur: () => L(),
+      onKeyUp: (y) => {
+        y.key === "Enter" && L();
+      },
+      notClearable: !0
+    }
+  ))), W) : W;
 }
-p.set(A, {
+C.set(Z, {
   name: "Content Row",
   props: {
     alternateLayout: { type: "boolean", default: "false" },
@@ -206,15 +262,15 @@ p.set(A, {
     disableExpansion: { type: "boolean", default: "false" }
   }
 });
-var ne = u({ defaultClassName: "_1wuky9j0", variantClassNames: { wrapContent: { true: "_1wuky9j1", false: "_1wuky9j2" } }, defaultVariants: { wrapContent: !1 }, compoundVariants: [] });
-const ae = /* @__PURE__ */ new Set([
+var ge = p({ defaultClassName: "_1wuky9j0", variantClassNames: { wrapContent: { true: "_1wuky9j1", false: "_1wuky9j2" } }, defaultVariants: { wrapContent: !1 }, compoundVariants: [] });
+const Ne = /* @__PURE__ */ new Set([
   "Content Row",
   "Content Row Col",
   "Content Row Expansion",
   "Sorting Header",
   "Sorting Header Cell"
 ]);
-function re({
+function Se({
   children: t,
   className: a,
   wrapContent: o = !1,
@@ -223,40 +279,40 @@ function re({
   const r = e.useMemo(
     () => (
       // eslint-disable-next-line implicit-arrow-linebreak
-      B(t, (s) => p.isWoodlandComponent(s.type) && ae.has(p.get(s.type).name) ? [
+      se(t, (s) => C.isWoodlandComponent(s.type) && Ne.has(C.get(s.type).name) ? [
         {
           __autoLayout: !0
         }
       ] : [{}])
     ),
     [t]
-  ), [[l], d] = e.useMemo(
+  ), [[i], c] = e.useMemo(
     () => (
       // eslint-disable-next-line implicit-arrow-linebreak
-      O(r, [
+      Y(r, [
         {
-          type: (s) => !!(p.isWoodlandComponent(s.type) && p.get(s.type).name === "Sorting Header")
+          type: (s) => !!(C.isWoodlandComponent(s.type) && C.get(s.type).name === "Sorting Header")
         }
       ])
     ),
     [r]
   );
-  return /* @__PURE__ */ e.createElement("table", { className: i(ne({ wrapContent: o }), a), ...n }, l ? /* @__PURE__ */ e.createElement("thead", null, l) : null, /* @__PURE__ */ e.createElement("tbody", null, d));
+  return /* @__PURE__ */ e.createElement("table", { className: l(ge({ wrapContent: o }), a), ...n }, i ? /* @__PURE__ */ e.createElement("thead", null, i) : null, /* @__PURE__ */ e.createElement("tbody", null, c));
 }
-p.set(re, {
+C.set(Se, {
   name: "Row List Auto Layout",
   props: {
     wrapContent: { type: "boolean", default: "false" }
   }
 });
-const se = {
-  components: [A, m, k],
+const ve = {
+  components: [Z, m, I],
   examples: {
     basic: {
       label: "Content Rows",
       examples: {
         basic: {
-          react: c`
+          react: u`
             import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
             import { Icon } from "@sps-woodland/core";
             import { sprinkles } from "@sps-woodland/tokens";
@@ -277,7 +333,7 @@ const se = {
           `
         },
         withCheckbox: {
-          react: c`
+          react: u`
             import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
             import { Icon } from "@sps-woodland/core";
             import { sprinkles } from "@sps-woodland/tokens";
@@ -310,7 +366,7 @@ const se = {
           `
         },
         withCheckboxAndFavorite: {
-          react: c`
+          react: u`
             import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
             import { Icon } from "@sps-woodland/core";
             import { sprinkles } from "@sps-woodland/tokens";
@@ -351,7 +407,7 @@ const se = {
       label: "Expandable Content Rows",
       examples: {
         basic: {
-          react: c`
+          react: u`
             import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
             import { Card } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
@@ -386,7 +442,7 @@ const se = {
           `
         },
         expandableWithCheckbox: {
-          react: c`
+          react: u`
             import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
             import { Card } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
@@ -433,7 +489,7 @@ const se = {
           `
         },
         expandableWithCheckboxAlternate: {
-          react: c`
+          react: u`
             import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
             import { Card } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
@@ -481,7 +537,7 @@ const se = {
           `
         },
         expandableWithCheckboxAndFavorite: {
-          react: c`
+          react: u`
             import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
             import { Card } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
@@ -531,7 +587,7 @@ const se = {
           `
         },
         expandableWithCheckboxAndFavoriteAlternate: {
-          react: c`
+          react: u`
             import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
             import { Card } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
@@ -587,7 +643,7 @@ const se = {
       label: "Sortable Content Rows",
       examples: {
         basic: {
-          react: c`
+          react: u`
           import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
           import { Card } from "@sps-woodland/cards";
           import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
@@ -1039,13 +1095,13 @@ const se = {
     //   },
     // },
   }
-}, ce = {
-  "Content Rows": se
+}, Ie = {
+  "Content Rows": ve
 };
 export {
-  A as ContentRow,
+  Z as ContentRow,
   m as ContentRowCol,
-  k as ContentRowExpansion,
-  ce as MANIFEST,
-  re as RowListAutoLayout
+  I as ContentRowExpansion,
+  Ie as MANIFEST,
+  Se as RowListAutoLayout
 };

package/lib/style.css

@@ -1 +1 @@
-._11ztjee3{background:#fff;display:block}._11ztjee4{--_11ztjee0: block}._11ztjee5{--_11ztjee0: none}._11ztjee6{display:table;table-layout:fixed;width:100.06%;border-width:.0625rem;border-style:solid;border-color:#d2d4d4;border-radius:.25rem}._11ztjee7{border-radius:.25rem;margin-top:1rem}._11ztjee9{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}._11ztjeeb{background:#e6f2f8;border-color:#027db8}._11ztjeed{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}._11ztjeee{background:#fff}._11ztjeef{--_11ztjee2: oklch(56.21% .128 239.83);background:#e6f2f8}._11ztjeeg{--_11ztjee2: oklch(86.84% .002 197.12)}._11ztjeeh{--_11ztjee1: 0}._11ztjeei{--_11ztjee1: .25rem}._11ztjeej{height:1rem;background:transparent;border:0}._11ztjeek{background:none;border:0;padding:0}._11ztjeel{cursor:pointer;font-size:1rem;line-height:1.125rem;padding:0;vertical-align:middle}._11ztjeem{color:#d2d4d4;cursor:not-allowed}._11ztjeen{color:#027db8}._11ztjeen:hover{color:#08638d}._11ztjeeo{display:var(--_11ztjee0);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;padding:1rem}._11ztjeep{display:table-cell}._11ztjeeq{display:var(--_11ztjee0)}._11ztjeer{padding:1rem}._11ztjeer:first-child{margin:-1rem -1rem 0}._11ztjeer: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}._1mxrufv0{display:table-cell;padding:1rem;vertical-align:middle}._1mxrufv1{padding:.5rem 1rem}._1mxrufv4:not(:first-child){border-left:.0625rem solid oklch(86.84% .002 197.12)}._1mxrufv5{word-break:break-word}._1mxrufv7{padding:1rem;vertical-align:middle;border-style:solid;border-color:var(--_11ztjee2);border-top-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;border-right-width:0;text-align:left}._1mxrufv7:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:var(--_11ztjee1)}._1mxrufv7:last-child{border-right-width:.0625rem;border-top-right-radius:.25rem;border-bottom-right-radius:var(--_11ztjee1)}._1mxrufv8{padding:.5rem 1rem}._1mxrufva{border-left-width:0}._1mxrufvc{word-break:break-word}._1mxrufv0>*{vertical-align:middle}._1wuky9j0{table-layout:auto;width:100%;border-collapse:separate;border-spacing:0;white-space:normal;overflow:hidden}._1wuky9j1{word-break:break-word}
+._11ztjee4{background:#fff;border-radius:.25rem;display:block}._11ztjee5{--_11ztjee0: block}._11ztjee6{--_11ztjee0: none}._11ztjee7{display:table;table-layout:fixed;width:100.06%;border-width:.0625rem;border-style:solid;border-color:#d2d4d4;border-radius:.25rem}._11ztjee8{border-radius:.25rem;margin-top:1rem}._11ztjeea{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}._11ztjeec{background:#e6f2f8;border-color:#027db8}._11ztjeee{min-height:3.875rem}._11ztjeeg{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}._11ztjeeh{background:#fff}._11ztjeei{--_11ztjee2: oklch(56.21% .128 239.83);background:#e6f2f8}._11ztjeej{--_11ztjee2: oklch(86.84% .002 197.12)}._11ztjeek{--_11ztjee1: 0}._11ztjeel{--_11ztjee1: .25rem}._11ztjeem{height:1rem;background:transparent;border:0}._11ztjeen{background:none;border:0;padding:0}._11ztjeeo{cursor:pointer;font-size:1rem;line-height:1.125rem;padding:0;vertical-align:middle}._11ztjeep{color:#d2d4d4;cursor:not-allowed}._11ztjeeq{color:#027db8}._11ztjeeq:hover{color:#08638d}._11ztjeer{display:var(--_11ztjee0);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;padding:1rem}._11ztjees{display:table-cell}._11ztjeet{display:var(--_11ztjee0)}._11ztjeeu{padding:1rem}._11ztjeeu:first-child{margin:-1rem -1rem 0}._11ztjeeu: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}._11ztjeev{display:flex}._11ztjeew{position:absolute}._11ztjeew:first-child{margin:-1rem -1rem 0;top:1rem}._11ztjeew: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;bottom:1rem}._11ztjeex{min-height:1.78125rem;width:3.3125rem;height:50%;display:flex}._11ztjeey{padding:1rem}._11ztjeez{display:block}._11ztjee10{border-width:.0625rem;border-style:solid;border-color:#d2d4d4;border-radius:.25rem;background:#fff;height:100%;display:table;table-layout:fixed;min-height:3.5rem;width:3.5rem;margin-right:.5rem;padding:.5rem}._11ztjee11{display:table-cell;vertical-align:middle}._11ztjee12{border-radius:0;padding:0}._11ztjee13{--_11ztjee3: none;border:none}._11ztjee14{--_11ztjee3: inline}._11ztjee15{border-top-left-radius:.1875rem}._11ztjee17{border-bottom-left-radius:.1875rem}._11ztjeew ._11ztjee12{width:100%;height:100%}._11ztjeew ._11ztjee12 button{padding:0;width:100%;height:100%;min-height:1.78125rem;min-width:3.3125rem}._11ztjeew ._11ztjee12 button>i{display:var(--_11ztjee3)}._11ztjee11 input{text-align:center}._1mxrufv0{display:table-cell;padding:1rem;vertical-align:middle}._1mxrufv1{padding:.5rem 1rem}._1mxrufv4:not(:first-child){border-left:.0625rem solid oklch(86.84% .002 197.12)}._1mxrufv5{word-break:break-word}._1mxrufv7{padding:1rem;vertical-align:middle;border-style:solid;border-color:var(--_11ztjee2);border-top-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;border-right-width:0;text-align:left}._1mxrufv7:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:var(--_11ztjee1)}._1mxrufv7:last-child{border-right-width:.0625rem;border-top-right-radius:.25rem;border-bottom-right-radius:var(--_11ztjee1)}._1mxrufv8{padding:.5rem 1rem}._1mxrufva{border-left-width:0}._1mxrufvc{word-break:break-word}._1mxrufv0>*{vertical-align:middle}._1wuky9j0{table-layout:auto;width:100%;border-collapse:separate;border-spacing:0;white-space:normal;overflow:hidden}._1wuky9j1{word-break:break-word}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/content-row",
   "description": "SPS Woodland Design System page title component",
-  "version": "8.10.3",
+  "version": "8.11.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/page-title",
@@ -30,11 +30,12 @@
     "@spscommerce/utils": "^7.0.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@sps-woodland/core": "8.10.3",
-    "@sps-woodland/tokens": "8.10.3",
-    "@spscommerce/ds-colors": "8.10.3",
-    "@spscommerce/ds-react": "8.10.3",
-    "@spscommerce/ds-shared": "8.10.3"
+    "@sps-woodland/core": "8.11.0",
+    "@sps-woodland/tokens": "8.11.0",
+    "@sps-woodland/buttons": "8.11.0",
+    "@spscommerce/ds-colors": "8.11.0",
+    "@spscommerce/ds-react": "8.11.0",
+    "@spscommerce/ds-shared": "8.11.0"
   },
   "devDependencies": {
     "@spscommerce/ds-illustrations": "^6.12.1",
@@ -43,11 +44,12 @@
     "@vanilla-extract/recipes": "^0.2.5",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@sps-woodland/core": "8.10.3",
-    "@sps-woodland/tokens": "8.10.3",
-    "@spscommerce/ds-colors": "8.10.3",
-    "@spscommerce/ds-react": "8.10.3",
-    "@spscommerce/ds-shared": "8.10.3"
+    "@sps-woodland/core": "8.11.0",
+    "@sps-woodland/tokens": "8.11.0",
+    "@sps-woodland/buttons": "8.11.0",
+    "@spscommerce/ds-colors": "8.11.0",
+    "@spscommerce/ds-react": "8.11.0",
+    "@spscommerce/ds-shared": "8.11.0"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",