@measured/puck 0.16.3-canary.af421c6 → 0.17.0-canary.35170f8

package/dist/index.css

@@ -204,27 +204,27 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
-._Input_3pq3z_1 {
+._InputWrapper_1l5m8_1 {
   color: var(--puck-color-grey-04);
   padding: 16px;
   padding-bottom: 12px;
   display: block;
 }
-._Input_3pq3z_1 ._Input_3pq3z_1 {
+._InputWrapper_1l5m8_1 + ._InputWrapper_1l5m8_1 {
+  border-top: 1px solid var(--puck-color-grey-09);
+  margin-top: 8px;
+}
+._Input_1l5m8_1 ._InputWrapper_1l5m8_1 {
   padding: 0px;
 }
-._Input_3pq3z_1 * {
+._Input_1l5m8_1 * {
   box-sizing: border-box;
 }
-._Input_3pq3z_1 + ._Input_3pq3z_1 {
-  border-top: 1px solid var(--puck-color-grey-09);
-  margin-top: 8px;
-}
-._Input_3pq3z_1 ._Input_3pq3z_1 + ._Input_3pq3z_1 {
+._Input_1l5m8_1 ._InputWrapper_1l5m8_1 + ._InputWrapper_1l5m8_1 {
   border-top: 0px;
   margin-top: 12px;
 }
-._Input-label_3pq3z_26 {
+._Input-label_1l5m8_26 {
   align-items: center;
   color: var(--puck-color-grey-04);
   display: flex;
@@ -232,17 +232,17 @@
   font-size: var(--puck-font-size-xxs);
   font-weight: 600;
 }
-._Input-labelIcon_3pq3z_35 {
+._Input-labelIcon_1l5m8_35 {
   color: var(--puck-color-grey-07);
   display: flex;
   margin-right: 4px;
   padding-left: 4px;
 }
-._Input-disabledIcon_3pq3z_42 {
+._Input-disabledIcon_1l5m8_42 {
   color: var(--puck-color-grey-05);
   margin-left: auto;
 }
-._Input-input_3pq3z_47 {
+._Input-input_1l5m8_47 {
   background: var(--puck-color-white);
   border-width: 1px;
   border-style: solid;
@@ -254,7 +254,7 @@
   transition: border-color 50ms ease-in;
   width: 100%;
 }
-select._Input-input_3pq3z_47 {
+select._Input-input_1l5m8_47 {
   appearance: none;
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
   background-size: 12px;
@@ -264,25 +264,25 @@ select._Input-input_3pq3z_47 {
   cursor: pointer;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Input_3pq3z_1:has(> input):hover ._Input-input_3pq3z_47:not([readonly]),
-  ._Input_3pq3z_1:has(> textarea):hover ._Input-input_3pq3z_47:not([readonly]) {
+  ._Input_1l5m8_1:has(> input):hover ._Input-input_1l5m8_47:not([readonly]),
+  ._Input_1l5m8_1:has(> textarea):hover ._Input-input_1l5m8_47:not([readonly]) {
     border-color: var(--puck-color-grey-05);
     transition: none;
   }
-  ._Input_3pq3z_1:has(> select):hover ._Input-input_3pq3z_47:not([disabled]) {
+  ._Input_1l5m8_1:has(> select):hover ._Input-input_1l5m8_47:not([disabled]) {
     background-color: var(--puck-color-azure-12);
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a5a5a'><polygon points='0,0 100,0 50,50'/></svg>");
     border-color: var(--puck-color-grey-05);
     transition: none;
   }
 }
-._Input-input_3pq3z_47:focus {
+._Input-input_1l5m8_47:focus {
   border-color: var(--puck-color-grey-05);
   outline: 2px solid var(--puck-color-azure-05);
   transition: none;
 }
-._Input--readOnly_3pq3z_91 > ._Input-input_3pq3z_47,
-._Input--readOnly_3pq3z_91 > select._Input-input_3pq3z_47 {
+._Input--readOnly_1l5m8_91 > ._Input-input_1l5m8_47,
+._Input--readOnly_1l5m8_91 > select._Input-input_1l5m8_47 {
   background-color: var(--puck-color-grey-11);
   border-color: var(--puck-color-grey-09);
   color: var(--puck-color-grey-04);
@@ -291,34 +291,34 @@ select._Input-input_3pq3z_47 {
   outline: 0;
   transition: none;
 }
-._Input-radioGroupItems_3pq3z_102 {
+._Input-radioGroupItems_1l5m8_102 {
   display: flex;
   border: 1px solid var(--puck-color-grey-09);
   border-radius: 4px;
   flex-wrap: wrap;
 }
-._Input-radio_3pq3z_102 {
+._Input-radio_1l5m8_102 {
   border-right: 1px solid var(--puck-color-grey-09);
   flex-grow: 1;
 }
-._Input-radio_3pq3z_102:first-of-type {
+._Input-radio_1l5m8_102:first-of-type {
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;
 }
-._Input-radio_3pq3z_102:first-of-type ._Input-radioInner_3pq3z_119 {
+._Input-radio_1l5m8_102:first-of-type ._Input-radioInner_1l5m8_119 {
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
 }
-._Input-radio_3pq3z_102:last-of-type {
+._Input-radio_1l5m8_102:last-of-type {
   border-bottom-right-radius: 4px;
   border-right: 0;
   border-top-right-radius: 4px;
 }
-._Input-radio_3pq3z_102:last-of-type ._Input-radioInner_3pq3z_119 {
+._Input-radio_1l5m8_102:last-of-type ._Input-radioInner_1l5m8_119 {
   border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
 }
-._Input-radioInner_3pq3z_119 {
+._Input-radioInner_1l5m8_119 {
   background-color: var(--puck-color-white);
   color: var(--puck-color-grey-04);
   cursor: pointer;
@@ -327,32 +327,32 @@ select._Input-input_3pq3z_47 {
   text-align: center;
   transition: background-color 50ms ease-in;
 }
-._Input-radio_3pq3z_102:has(:focus-visible) {
+._Input-radio_1l5m8_102:has(:focus-visible) {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: 2px;
   position: relative;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Input-radioInner_3pq3z_119:hover {
+  ._Input-radioInner_1l5m8_119:hover {
     background-color: var(--puck-color-azure-12);
     transition: none;
   }
 }
-._Input--readOnly_3pq3z_91 ._Input-radioInner_3pq3z_119 {
+._Input--readOnly_1l5m8_91 ._Input-radioInner_1l5m8_119 {
   background-color: var(--puck-color-white);
   color: var(--puck-color-grey-04);
   cursor: default;
 }
-._Input-radio_3pq3z_102 ._Input-radioInput_3pq3z_164:checked ~ ._Input-radioInner_3pq3z_119 {
+._Input-radio_1l5m8_102 ._Input-radioInput_1l5m8_164:checked ~ ._Input-radioInner_1l5m8_119 {
   background-color: var(--puck-color-azure-11);
   color: var(--puck-color-azure-04);
   font-weight: 500;
 }
-._Input--readOnly_3pq3z_91 ._Input-radioInput_3pq3z_164:checked ~ ._Input-radioInner_3pq3z_119 {
+._Input--readOnly_1l5m8_91 ._Input-radioInput_1l5m8_164:checked ~ ._Input-radioInner_1l5m8_119 {
   background-color: var(--puck-color-grey-11);
   color: var(--puck-color-grey-04);
 }
-._Input-radio_3pq3z_102 ._Input-radioInput_3pq3z_164 {
+._Input-radio_1l5m8_102 ._Input-radioInput_1l5m8_164 {
   clip: rect(0 0 0 0);
   clip-path: inset(100%);
   height: 1px;
@@ -361,7 +361,7 @@ select._Input-input_3pq3z_47 {
   white-space: nowrap;
   width: 1px;
 }
-textarea._Input-input_3pq3z_47 {
+textarea._Input-input_1l5m8_47 {
   margin-bottom: -4px;
 }
 
@@ -607,10 +607,10 @@ textarea._Input-input_3pq3z_47 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
-._ExternalInput-actions_wprq3_1 {
+._ExternalInput-actions_8wgzm_1 {
   display: flex;
 }
-._ExternalInput-button_wprq3_5 {
+._ExternalInput-button_8wgzm_5 {
   display: flex;
   gap: 8px;
   align-items: center;
@@ -628,16 +628,16 @@ textarea._Input-input_3pq3z_47 {
   overflow: hidden;
   flex-grow: 1;
 }
-._ExternalInput--dataSelected_wprq3_24 ._ExternalInput-button_wprq3_5 {
+._ExternalInput--dataSelected_8wgzm_24 ._ExternalInput-button_8wgzm_5 {
   color: var(--puck-color-grey-03);
   display: block;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
-._ExternalInput--readOnly_wprq3_31 ._ExternalInput-button_wprq3_5 {
+._ExternalInput--readOnly_8wgzm_31 ._ExternalInput-button_8wgzm_5 {
   background-color: var(--puck-color-grey-11);
 }
-._ExternalInput-detachButton_wprq3_35 {
+._ExternalInput-detachButton_8wgzm_35 {
   border: 1px solid var(--puck-color-grey-09);
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -652,28 +652,28 @@ textarea._Input-input_3pq3z_47 {
   transition: background-color 50ms ease-in, color 50ms ease-in;
   margin-left: -1px;
 }
-._ExternalInput-button_wprq3_5:focus-visible,
-._ExternalInput-detachButton_wprq3_35:focus-visible {
+._ExternalInput-button_8wgzm_5:focus-visible,
+._ExternalInput-detachButton_8wgzm_35:focus-visible {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: 2px;
   z-index: 1;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-button_wprq3_5:hover,
-  ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-detachButton_wprq3_35:hover {
+  ._ExternalInput_8wgzm_1:not(._ExternalInput--readOnly_8wgzm_31) ._ExternalInput-button_8wgzm_5:hover,
+  ._ExternalInput_8wgzm_1:not(._ExternalInput--readOnly_8wgzm_31) ._ExternalInput-detachButton_8wgzm_35:hover {
     background: var(--puck-color-azure-12);
     transition: none;
   }
-  ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-detachButton_wprq3_35:hover {
+  ._ExternalInput_8wgzm_1:not(._ExternalInput--readOnly_8wgzm_31) ._ExternalInput-detachButton_8wgzm_35:hover {
     color: var(--puck-color-azure-04);
   }
 }
-._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-button_wprq3_5:active,
-._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-detachButton_wprq3_35:active {
+._ExternalInput_8wgzm_1:not(._ExternalInput--readOnly_8wgzm_31) ._ExternalInput-button_8wgzm_5:active,
+._ExternalInput_8wgzm_1:not(._ExternalInput--readOnly_8wgzm_31) ._ExternalInput-detachButton_8wgzm_35:active {
   background: var(--puck-color-azure-11);
   transition: none;
 }
-._ExternalInputModal_wprq3_79 {
+._ExternalInputModal_8wgzm_79 {
   color: var(--puck-color-black);
   display: grid;
   grid-template-rows: min-content minmax(128px, 100%) min-content;
@@ -682,35 +682,35 @@ textarea._Input-input_3pq3z_47 {
   min-height: 50dvh;
   max-height: 90dvh;
 }
-._ExternalInputModal-grid_wprq3_89 {
+._ExternalInputModal-grid_8wgzm_89 {
   display: flex;
   flex-direction: column;
 }
 @media (min-width: 458px) {
-  ._ExternalInputModal-grid_wprq3_89 {
+  ._ExternalInputModal-grid_8wgzm_89 {
     display: grid;
     grid-template-columns: 100%;
   }
-  ._ExternalInputModal--filtersToggled_wprq3_100 ._ExternalInputModal-grid_wprq3_89 {
+  ._ExternalInputModal--filtersToggled_8wgzm_100 ._ExternalInputModal-grid_8wgzm_89 {
     grid-template-columns: 25% 75%;
   }
 }
-._ExternalInputModal-filters_wprq3_105 {
+._ExternalInputModal-filters_8wgzm_105 {
   border-bottom: 1px solid var(--puck-color-grey-09);
 }
-._ExternalInputModal--filtersToggled_wprq3_100 ._ExternalInputModal-filters_wprq3_105 {
+._ExternalInputModal--filtersToggled_8wgzm_100 ._ExternalInputModal-filters_8wgzm_105 {
   display: none;
 }
 @media (min-width: 458px) {
-  ._ExternalInputModal-filters_wprq3_105 {
+  ._ExternalInputModal-filters_8wgzm_105 {
     border-right: 1px solid var(--puck-color-grey-09);
     display: none;
   }
-  ._ExternalInputModal--filtersToggled_wprq3_100 ._ExternalInputModal-filters_wprq3_105 {
+  ._ExternalInputModal--filtersToggled_8wgzm_100 ._ExternalInputModal-filters_8wgzm_105 {
     display: block;
   }
 }
-._ExternalInputModal-masthead_wprq3_124 {
+._ExternalInputModal-masthead_8wgzm_124 {
   background-color: var(--puck-color-grey-12);
   border-bottom: 1px solid var(--puck-color-grey-09);
   display: flex;
@@ -718,13 +718,13 @@ textarea._Input-input_3pq3z_47 {
   gap: 24px;
   padding: 24px;
 }
-._ExternalInputModal-tableWrapper_wprq3_133 {
+._ExternalInputModal-tableWrapper_8wgzm_133 {
   position: relative;
   overflow-x: auto;
   overflow-y: auto;
   flex-grow: 1;
 }
-._ExternalInputModal-table_wprq3_133 {
+._ExternalInputModal-table_8wgzm_133 {
   border-collapse: unset;
   border-spacing: 0px;
   color: var(--puck-color-grey-02);
@@ -732,51 +732,51 @@ textarea._Input-input_3pq3z_47 {
   z-index: 0;
   min-width: 100%;
 }
-._ExternalInputModal-thead_wprq3_149 {
+._ExternalInputModal-thead_8wgzm_149 {
   background-color: var(--puck-color-white);
   position: sticky;
   top: 0;
   z-index: 1;
 }
-._ExternalInputModal-th_wprq3_149 {
+._ExternalInputModal-th_8wgzm_149 {
   border-bottom: 1px solid var(--puck-color-grey-09);
   color: var(--puck-color-grey-04);
   font-weight: 500;
   font-size: 14px;
   padding: 16px 24px;
 }
-._ExternalInputModal-td_wprq3_164 {
+._ExternalInputModal-td_8wgzm_164 {
   border-bottom: 1px solid var(--puck-color-grey-10);
   padding: 16px 24px;
 }
-._ExternalInputModal-tr_wprq3_169 ._ExternalInputModal-td_wprq3_164:first-of-type {
+._ExternalInputModal-tr_8wgzm_169 ._ExternalInputModal-td_8wgzm_164:first-of-type {
   font-weight: 500;
   width: 1%;
   white-space: nowrap;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ExternalInputModal-tbody_wprq3_176 ._ExternalInputModal-tr_wprq3_169:hover {
+  ._ExternalInputModal-tbody_8wgzm_176 ._ExternalInputModal-tr_8wgzm_169:hover {
     background: var(--puck-color-azure-12);
     color: var(--puck-color-azure-04);
     cursor: pointer;
     position: relative;
     margin-left: -5px;
   }
-  ._ExternalInputModal-tbody_wprq3_176 ._ExternalInputModal-tr_wprq3_169:hover ._ExternalInputModal-td_wprq3_164:first-of-type {
+  ._ExternalInputModal-tbody_8wgzm_176 ._ExternalInputModal-tr_8wgzm_169:hover ._ExternalInputModal-td_8wgzm_164:first-of-type {
     border-left: 4px solid var(--puck-color-azure-04);
     padding-left: 20px;
   }
 }
-._ExternalInputModal-tbody_wprq3_176 ._ExternalInputModal-tr_wprq3_169:last-of-type ._ExternalInputModal-td_wprq3_164 {
+._ExternalInputModal-tbody_8wgzm_176 ._ExternalInputModal-tr_8wgzm_169:last-of-type ._ExternalInputModal-td_8wgzm_164 {
   border-bottom: none;
 }
-._ExternalInputModal-tableWrapper_wprq3_133 {
+._ExternalInputModal-tableWrapper_8wgzm_133 {
   display: none;
 }
-._ExternalInputModal--hasData_wprq3_202 ._ExternalInputModal-tableWrapper_wprq3_133 {
+._ExternalInputModal--hasData_8wgzm_202 ._ExternalInputModal-tableWrapper_8wgzm_133 {
   display: block;
 }
-._ExternalInputModal-loadingBanner_wprq3_206 {
+._ExternalInputModal-loadingBanner_8wgzm_206 {
   display: none;
   background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
   padding: 64px;
@@ -788,21 +788,21 @@ textarea._Input-input_3pq3z_47 {
   right: 0;
   bottom: 0;
 }
-._ExternalInputModal--isLoading_wprq3_223 ._ExternalInputModal-loadingBanner_wprq3_206 {
+._ExternalInputModal--isLoading_8wgzm_223 ._ExternalInputModal-loadingBanner_8wgzm_206 {
   display: flex;
 }
-._ExternalInputModal-searchForm_wprq3_227 {
+._ExternalInputModal-searchForm_8wgzm_227 {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   flex-grow: 1;
 }
 @media (min-width: 458px) {
-  ._ExternalInputModal-searchForm_wprq3_227 {
+  ._ExternalInputModal-searchForm_8wgzm_227 {
     flex-wrap: nowrap;
   }
 }
-._ExternalInputModal-search_wprq3_227 {
+._ExternalInputModal-search_8wgzm_227 {
   display: flex;
   background: var(--puck-color-white);
   border-width: 1px;
@@ -812,18 +812,18 @@ textarea._Input-input_3pq3z_47 {
   flex-grow: 1;
   transition: border-color 50ms ease-in;
 }
-._ExternalInputModal-search_wprq3_227:focus-within {
+._ExternalInputModal-search_8wgzm_227:focus-within {
   border-color: var(--puck-color-grey-05);
   outline: 2px solid var(--puck-color-azure-05);
   transition: none;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ExternalInputModal-search_wprq3_227:hover {
+  ._ExternalInputModal-search_8wgzm_227:hover {
     border-color: var(--puck-color-grey-05);
     transition: none;
   }
 }
-._ExternalInputModal-searchIcon_wprq3_264 {
+._ExternalInputModal-searchIcon_8wgzm_264 {
   align-items: center;
   background: var(--puck-color-grey-12);
   border-bottom-left-radius: 4px;
@@ -835,17 +835,17 @@ textarea._Input-input_3pq3z_47 {
   padding: 12px 15px;
   transition: color 50ms ease-in;
 }
-._ExternalInputModal-search_wprq3_227:focus-within ._ExternalInputModal-searchIcon_wprq3_264 {
+._ExternalInputModal-search_8wgzm_227:focus-within ._ExternalInputModal-searchIcon_8wgzm_264 {
   color: var(--puck-color-grey-04);
   transition: none;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ExternalInputModal-search_wprq3_227:hover ._ExternalInputModal-searchIcon_wprq3_264 {
+  ._ExternalInputModal-search_8wgzm_227:hover ._ExternalInputModal-searchIcon_8wgzm_264 {
     color: var(--puck-color-grey-04);
     transition: none;
   }
 }
-._ExternalInputModal-searchIconText_wprq3_289 {
+._ExternalInputModal-searchIconText_8wgzm_289 {
   clip: rect(0 0 0 0);
   clip-path: inset(100%);
   height: 1px;
@@ -854,7 +854,7 @@ textarea._Input-input_3pq3z_47 {
   white-space: nowrap;
   width: 1px;
 }
-._ExternalInputModal-searchInput_wprq3_299 {
+._ExternalInputModal-searchInput_8wgzm_299 {
   border: none;
   border-radius: 4px;
   background: var(--puck-color-white);
@@ -863,30 +863,32 @@ textarea._Input-input_3pq3z_47 {
   padding: 12px 15px;
   width: 100%;
 }
-._ExternalInputModal-searchInput_wprq3_299:focus {
+._ExternalInputModal-searchInput_8wgzm_299:focus {
   outline: 0;
 }
-._ExternalInputModal-searchActions_wprq3_313 {
+._ExternalInputModal-searchActions_8wgzm_313 {
   display: flex;
   gap: 8px;
   height: 44px;
   width: 100%;
 }
 @media (min-width: 458px) {
-  ._ExternalInputModal-searchActions_wprq3_313 {
+  ._ExternalInputModal-searchActions_8wgzm_313 {
     width: auto;
   }
 }
-._ExternalInputModal-searchActionIcon_wprq3_326 {
+._ExternalInputModal-searchActionIcon_8wgzm_326 {
   align-self: center;
 }
-._ExternalInputModal-footer_wprq3_330 {
+._ExternalInputModal-footerContainer_8wgzm_330 {
   background-color: var(--puck-color-grey-12);
   border-top: 1px solid var(--puck-color-grey-09);
   color: var(--puck-color-grey-04);
+  padding: 16px;
+}
+._ExternalInputModal-footer_8wgzm_330 {
   font-weight: 500;
   font-size: 14px;
-  padding: 16px;
   text-align: right;
 }
 

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-BoWgijLi.mjs';
-export { L as Adaptor, J as ArrayField, r as ArrayState, a2 as AsFieldProps, B as BaseData, y as BaseField, t as ComponentConfig, w as ComponentData, x as Content, X as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, W as ExternalField, Q as ExternalFieldWithAdaptor, p as FieldRenderFunctions, Y as Fields, q as ItemWithId, M as MappedItem, N as NumberField, K as ObjectField, n as OverrideKey, s as PuckComponent, Z as PuckContext, G as RadioField, v as RootData, R as RootDataWithProps, u as RootDataWithoutProps, S as SelectField, T as TextField, z as TextareaField, m as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, o as overrideKeys, a4 as resolveAllData } from './resolve-all-data-BoWgijLi.mjs';
+import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-Ch-Pcasj.mjs';
+export { L as Adaptor, J as ArrayField, r as ArrayState, a2 as AsFieldProps, B as BaseData, y as BaseField, t as ComponentConfig, w as ComponentData, x as Content, X as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, W as ExternalField, Q as ExternalFieldWithAdaptor, p as FieldRenderFunctions, Y as Fields, q as ItemWithId, M as MappedItem, N as NumberField, K as ObjectField, n as OverrideKey, s as PuckComponent, Z as PuckContext, G as RadioField, v as RootData, R as RootDataWithProps, u as RootDataWithoutProps, S as SelectField, T as TextField, z as TextareaField, m as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, o as overrideKeys, a4 as resolveAllData } from './resolve-all-data-Ch-Pcasj.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-BoWgijLi.js';
-export { L as Adaptor, J as ArrayField, r as ArrayState, a2 as AsFieldProps, B as BaseData, y as BaseField, t as ComponentConfig, w as ComponentData, x as Content, X as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, W as ExternalField, Q as ExternalFieldWithAdaptor, p as FieldRenderFunctions, Y as Fields, q as ItemWithId, M as MappedItem, N as NumberField, K as ObjectField, n as OverrideKey, s as PuckComponent, Z as PuckContext, G as RadioField, v as RootData, R as RootDataWithProps, u as RootDataWithoutProps, S as SelectField, T as TextField, z as TextareaField, m as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, o as overrideKeys, a4 as resolveAllData } from './resolve-all-data-BoWgijLi.js';
+import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-Ch-Pcasj.js';
+export { L as Adaptor, J as ArrayField, r as ArrayState, a2 as AsFieldProps, B as BaseData, y as BaseField, t as ComponentConfig, w as ComponentData, x as Content, X as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, W as ExternalField, Q as ExternalFieldWithAdaptor, p as FieldRenderFunctions, Y as Fields, q as ItemWithId, M as MappedItem, N as NumberField, K as ObjectField, n as OverrideKey, s as PuckComponent, Z as PuckContext, G as RadioField, v as RootData, R as RootDataWithProps, u as RootDataWithoutProps, S as SelectField, T as TextField, z as TextareaField, m as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, o as overrideKeys, a4 as resolveAllData } from './resolve-all-data-Ch-Pcasj.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';

package/dist/index.js

@@ -276,7 +276,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "Input": "_Input_3pq3z_1", "Input-label": "_Input-label_3pq3z_26", "Input-labelIcon": "_Input-labelIcon_3pq3z_35", "Input-disabledIcon": "_Input-disabledIcon_3pq3z_42", "Input-input": "_Input-input_3pq3z_47", "Input--readOnly": "_Input--readOnly_3pq3z_91", "Input-radioGroupItems": "_Input-radioGroupItems_3pq3z_102", "Input-radio": "_Input-radio_3pq3z_102", "Input-radioInner": "_Input-radioInner_3pq3z_119", "Input-radioInput": "_Input-radioInput_3pq3z_164" };
+var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input": "_Input_1l5m8_1", "Input-label": "_Input-label_1l5m8_26", "Input-labelIcon": "_Input-labelIcon_1l5m8_35", "Input-disabledIcon": "_Input-disabledIcon_1l5m8_42", "Input-input": "_Input-input_1l5m8_47", "Input--readOnly": "_Input--readOnly_1l5m8_91", "Input-radioGroupItems": "_Input-radioGroupItems_1l5m8_102", "Input-radio": "_Input-radio_1l5m8_102", "Input-radioInner": "_Input-radioInner_1l5m8_119", "Input-radioInput": "_Input-radioInput_1l5m8_164" };
 
 // components/AutoField/index.tsx
 var import_react13 = require("react");
@@ -1071,7 +1071,8 @@ var defaultAppState = {
       },
       options: [],
       controlsVisible: true
-    }
+    },
+    field: { focus: null }
   }
 };
 var defaultContext = {
@@ -1415,11 +1416,13 @@ var ArrayField = ({
                 event.source.index,
                 (_b = event.destination) == null ? void 0 : _b.index
               );
-              onChange(newValue, {
+              const newUi = {
                 arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
                   [id]: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
                 })
-              });
+              };
+              setUi(newUi, false);
+              onChange(newValue, newUi);
               setLocalState({
                 value: newValue,
                 arrayState: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
@@ -1485,32 +1488,60 @@ var ArrayField = ({
                               children: [
                                 field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
                                 /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassNameItem("rhs"), children: [
-                                  !readOnly && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                                    IconButton,
-                                    {
-                                      type: "button",
-                                      disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
-                                      onClick: (e) => {
-                                        e.stopPropagation();
-                                        const existingValue = [
-                                          ...value || []
-                                        ];
-                                        const existingItems = [
-                                          ...arrayState.items || []
-                                        ];
-                                        existingValue.splice(i, 1);
-                                        existingItems.splice(i, 1);
-                                        onChange(
-                                          existingValue,
-                                          mapArrayStateToUi({
-                                            items: existingItems
-                                          })
-                                        );
-                                      },
-                                      title: "Delete",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Trash, { size: 16 })
-                                    }
-                                  ) }) }),
+                                  !readOnly && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassNameItem("actions"), children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                      IconButton,
+                                      {
+                                        type: "button",
+                                        disabled: !!addDisabled,
+                                        onClick: (e) => {
+                                          e.stopPropagation();
+                                          const existingValue = [
+                                            ...value || []
+                                          ];
+                                          existingValue.splice(
+                                            i,
+                                            0,
+                                            existingValue[i]
+                                          );
+                                          onChange(
+                                            existingValue,
+                                            mapArrayStateToUi(
+                                              regenerateArrayState(existingValue)
+                                            )
+                                          );
+                                        },
+                                        title: "Duplicate",
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Copy, { size: 16 })
+                                      }
+                                    ) }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                      IconButton,
+                                      {
+                                        type: "button",
+                                        disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
+                                        onClick: (e) => {
+                                          e.stopPropagation();
+                                          const existingValue = [
+                                            ...value || []
+                                          ];
+                                          const existingItems = [
+                                            ...arrayState.items || []
+                                          ];
+                                          existingValue.splice(i, 1);
+                                          existingItems.splice(i, 1);
+                                          onChange(
+                                            existingValue,
+                                            mapArrayStateToUi({
+                                              items: existingItems
+                                            })
+                                          );
+                                        },
+                                        title: "Delete",
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Trash, { size: 16 })
+                                      }
+                                    ) })
+                                  ] }),
                                   /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DragIcon, {}) })
                                 ] })
                               ]
@@ -1607,7 +1638,7 @@ var DefaultField = ({
           autoComplete: "off",
           type: field.type,
           name,
-          value: typeof value === "undefined" ? "" : value,
+          value: typeof value === "undefined" ? "" : value.toString(),
           onChange: (e) => {
             if (field.type === "number") {
               onChange(Number(e.currentTarget.value));
@@ -1636,7 +1667,7 @@ var import_react10 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
-var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_wprq3_1", "ExternalInput-button": "_ExternalInput-button_wprq3_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_wprq3_24", "ExternalInput--readOnly": "_ExternalInput--readOnly_wprq3_31", "ExternalInput-detachButton": "_ExternalInput-detachButton_wprq3_35", "ExternalInput": "_ExternalInput_wprq3_1", "ExternalInputModal": "_ExternalInputModal_wprq3_79", "ExternalInputModal-grid": "_ExternalInputModal-grid_wprq3_89", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_wprq3_100", "ExternalInputModal-filters": "_ExternalInputModal-filters_wprq3_105", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_wprq3_124", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_wprq3_133", "ExternalInputModal-table": "_ExternalInputModal-table_wprq3_133", "ExternalInputModal-thead": "_ExternalInputModal-thead_wprq3_149", "ExternalInputModal-th": "_ExternalInputModal-th_wprq3_149", "ExternalInputModal-td": "_ExternalInputModal-td_wprq3_164", "ExternalInputModal-tr": "_ExternalInputModal-tr_wprq3_169", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_wprq3_176", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_wprq3_202", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_wprq3_206", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_wprq3_223", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_wprq3_227", "ExternalInputModal-search": "_ExternalInputModal-search_wprq3_227", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_wprq3_264", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_wprq3_289", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_wprq3_299", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_wprq3_313", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_wprq3_326", "ExternalInputModal-footer": "_ExternalInputModal-footer_wprq3_330" };
+var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_8wgzm_1", "ExternalInput-button": "_ExternalInput-button_8wgzm_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_8wgzm_24", "ExternalInput--readOnly": "_ExternalInput--readOnly_8wgzm_31", "ExternalInput-detachButton": "_ExternalInput-detachButton_8wgzm_35", "ExternalInput": "_ExternalInput_8wgzm_1", "ExternalInputModal": "_ExternalInputModal_8wgzm_79", "ExternalInputModal-grid": "_ExternalInputModal-grid_8wgzm_89", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_8wgzm_100", "ExternalInputModal-filters": "_ExternalInputModal-filters_8wgzm_105", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_8wgzm_124", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_8wgzm_133", "ExternalInputModal-table": "_ExternalInputModal-table_8wgzm_133", "ExternalInputModal-thead": "_ExternalInputModal-thead_8wgzm_149", "ExternalInputModal-th": "_ExternalInputModal-th_8wgzm_149", "ExternalInputModal-td": "_ExternalInputModal-td_8wgzm_164", "ExternalInputModal-tr": "_ExternalInputModal-tr_8wgzm_169", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_8wgzm_176", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_8wgzm_202", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_8wgzm_206", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_8wgzm_223", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_8wgzm_227", "ExternalInputModal-search": "_ExternalInputModal-search_8wgzm_227", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_8wgzm_264", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_8wgzm_289", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_8wgzm_299", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_8wgzm_313", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_8wgzm_326", "ExternalInputModal-footerContainer": "_ExternalInputModal-footerContainer_8wgzm_330", "ExternalInputModal-footer": "_ExternalInputModal-footer_8wgzm_330" };
 
 // components/Modal/index.tsx
 init_react_import();
@@ -1793,7 +1824,7 @@ var ExternalInput = ({
     const validKeys = /* @__PURE__ */ new Set();
     for (const item of mappedData) {
       for (const key of Object.keys(item)) {
-        if (typeof item[key] === "string" || typeof item[key] === "number") {
+        if (typeof item[key] === "string" || typeof item[key] === "number" || (0, import_react10.isValidElement)(item[key])) {
           validKeys.add(key);
         }
       }
@@ -1814,6 +1845,14 @@ var ExternalInput = ({
     }),
     [id, field]
   );
+  const Footer = (0, import_react10.useCallback)(
+    (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: getClassNameModal("footer"), children: [
+      props.items.length,
+      " result",
+      props.items.length === 1 ? "" : "s"
+    ] }),
+    [field.renderFooter]
+  );
   (0, import_react10.useEffect)(() => {
     search(searchQuery, filters);
   }, []);
@@ -1953,11 +1992,7 @@ var ExternalInput = ({
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Loader, { size: 24 }) })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: getClassNameModal("footer"), children: [
-                mappedData.length,
-                " result",
-                mappedData.length === 1 ? "" : "s"
-              ] })
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Footer, { items: mappedData }) })
             ]
           }
         ) })
@@ -2237,6 +2272,7 @@ var useSafeId = () => {
 // components/AutoField/index.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var getClassName15 = get_class_name_factory_default("Input", styles_module_default2);
+var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default2);
 var FieldLabel = ({
   children,
   icon,
@@ -2284,7 +2320,7 @@ var FieldLabelInternal2 = ({
 };
 function AutoFieldInternal(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { overrides } = useAppContext();
+  const { dispatch, overrides } = useAppContext();
   const { id, Label = FieldLabelInternal2 } = props;
   const field = props.field;
   const label = field.label;
@@ -2316,23 +2352,45 @@ function AutoFieldInternal(props) {
     Label,
     id: resolvedId
   });
+  const onFocus = (0, import_react13.useCallback)(
+    (e) => {
+      if (mergedProps.name && e.target.nodeName === "INPUT") {
+        e.stopPropagation();
+        dispatch({
+          type: "setUi",
+          ui: {
+            field: { focus: mergedProps.name }
+          }
+        });
+      }
+    },
+    [mergedProps.name]
+  );
+  const onBlur = (0, import_react13.useCallback)((e) => {
+    if ("name" in e.target) {
+      dispatch({
+        type: "setUi",
+        ui: {
+          field: { focus: null }
+        }
+      });
+    }
+  }, []);
   if (field.type === "custom") {
     if (!field.render) {
       return null;
     }
     const CustomField = field.render;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName15(), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CustomField, __spreadValues({}, mergedProps)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName15(), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CustomField, __spreadValues({}, mergedProps)) }) });
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Render2, __spreadProps(__spreadValues({}, mergedProps), { children })) });
 }
-var RECENT_CHANGE_TIMEOUT = 200;
 function AutoFieldPrivate(props) {
+  const { state } = useAppContext();
   const { value, onChange } = props;
   const [localValue, setLocalValue] = (0, import_react13.useState)(value);
-  const [recentlyChanged, setRecentlyChanged] = (0, import_react13.useState)(false);
-  const timeoutRef = (0, import_react13.useRef)();
   const onChangeDb = (0, import_use_debounce.useDebouncedCallback)(
     (val, ui) => {
       onChange(val, ui);
@@ -2342,15 +2400,10 @@ function AutoFieldPrivate(props) {
   );
   const onChangeLocal = (0, import_react13.useCallback)((val, ui) => {
     setLocalValue(val);
-    setRecentlyChanged(true);
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => {
-      setRecentlyChanged(false);
-    }, RECENT_CHANGE_TIMEOUT);
     onChangeDb(val, ui);
   }, []);
   (0, import_react13.useEffect)(() => {
-    if (!recentlyChanged) {
+    if (state.ui.field.focus !== props.name) {
       setLocalValue(value);
     }
   }, [value]);

package/dist/index.mjs

@@ -178,14 +178,13 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "Input": "_Input_3pq3z_1", "Input-label": "_Input-label_3pq3z_26", "Input-labelIcon": "_Input-labelIcon_3pq3z_35", "Input-disabledIcon": "_Input-disabledIcon_3pq3z_42", "Input-input": "_Input-input_3pq3z_47", "Input--readOnly": "_Input--readOnly_3pq3z_91", "Input-radioGroupItems": "_Input-radioGroupItems_3pq3z_102", "Input-radio": "_Input-radio_3pq3z_102", "Input-radioInner": "_Input-radioInner_3pq3z_119", "Input-radioInput": "_Input-radioInput_3pq3z_164" };
+var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input": "_Input_1l5m8_1", "Input-label": "_Input-label_1l5m8_26", "Input-labelIcon": "_Input-labelIcon_1l5m8_35", "Input-disabledIcon": "_Input-disabledIcon_1l5m8_42", "Input-input": "_Input-input_1l5m8_47", "Input--readOnly": "_Input--readOnly_1l5m8_91", "Input-radioGroupItems": "_Input-radioGroupItems_1l5m8_102", "Input-radio": "_Input-radio_1l5m8_102", "Input-radioInner": "_Input-radioInner_1l5m8_119", "Input-radioInput": "_Input-radioInput_1l5m8_164" };
 
 // components/AutoField/index.tsx
 import {
   useCallback as useCallback5,
   useEffect as useEffect9,
   useMemo as useMemo2,
-  useRef as useRef2,
   useState as useState10
 } from "react";
 
@@ -880,7 +879,8 @@ var defaultAppState = {
       },
       options: [],
       controlsVisible: true
-    }
+    },
+    field: { focus: null }
   }
 };
 var defaultContext = {
@@ -1228,11 +1228,13 @@ var ArrayField = ({
                 event.source.index,
                 (_b = event.destination) == null ? void 0 : _b.index
               );
-              onChange(newValue, {
+              const newUi = {
                 arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
                   [id]: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
                 })
-              });
+              };
+              setUi(newUi, false);
+              onChange(newValue, newUi);
               setLocalState({
                 value: newValue,
                 arrayState: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
@@ -1298,32 +1300,60 @@ var ArrayField = ({
                               children: [
                                 field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
                                 /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("rhs"), children: [
-                                  !readOnly && /* @__PURE__ */ jsx9("div", { className: getClassNameItem("actions"), children: /* @__PURE__ */ jsx9("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx9(
-                                    IconButton,
-                                    {
-                                      type: "button",
-                                      disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
-                                      onClick: (e) => {
-                                        e.stopPropagation();
-                                        const existingValue = [
-                                          ...value || []
-                                        ];
-                                        const existingItems = [
-                                          ...arrayState.items || []
-                                        ];
-                                        existingValue.splice(i, 1);
-                                        existingItems.splice(i, 1);
-                                        onChange(
-                                          existingValue,
-                                          mapArrayStateToUi({
-                                            items: existingItems
-                                          })
-                                        );
-                                      },
-                                      title: "Delete",
-                                      children: /* @__PURE__ */ jsx9(Trash, { size: 16 })
-                                    }
-                                  ) }) }),
+                                  !readOnly && /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("actions"), children: [
+                                    /* @__PURE__ */ jsx9("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx9(
+                                      IconButton,
+                                      {
+                                        type: "button",
+                                        disabled: !!addDisabled,
+                                        onClick: (e) => {
+                                          e.stopPropagation();
+                                          const existingValue = [
+                                            ...value || []
+                                          ];
+                                          existingValue.splice(
+                                            i,
+                                            0,
+                                            existingValue[i]
+                                          );
+                                          onChange(
+                                            existingValue,
+                                            mapArrayStateToUi(
+                                              regenerateArrayState(existingValue)
+                                            )
+                                          );
+                                        },
+                                        title: "Duplicate",
+                                        children: /* @__PURE__ */ jsx9(Copy, { size: 16 })
+                                      }
+                                    ) }),
+                                    /* @__PURE__ */ jsx9("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx9(
+                                      IconButton,
+                                      {
+                                        type: "button",
+                                        disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
+                                        onClick: (e) => {
+                                          e.stopPropagation();
+                                          const existingValue = [
+                                            ...value || []
+                                          ];
+                                          const existingItems = [
+                                            ...arrayState.items || []
+                                          ];
+                                          existingValue.splice(i, 1);
+                                          existingItems.splice(i, 1);
+                                          onChange(
+                                            existingValue,
+                                            mapArrayStateToUi({
+                                              items: existingItems
+                                            })
+                                          );
+                                        },
+                                        title: "Delete",
+                                        children: /* @__PURE__ */ jsx9(Trash, { size: 16 })
+                                      }
+                                    ) })
+                                  ] }),
                                   /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9(DragIcon, {}) })
                                 ] })
                               ]
@@ -1420,7 +1450,7 @@ var DefaultField = ({
           autoComplete: "off",
           type: field.type,
           name,
-          value: typeof value === "undefined" ? "" : value,
+          value: typeof value === "undefined" ? "" : value.toString(),
           onChange: (e) => {
             if (field.type === "number") {
               onChange(Number(e.currentTarget.value));
@@ -1445,11 +1475,17 @@ import { useEffect as useEffect8 } from "react";
 
 // components/ExternalInput/index.tsx
 init_react_import();
-import { useMemo, useEffect as useEffect7, useState as useState8, useCallback as useCallback4 } from "react";
+import {
+  useMemo,
+  useEffect as useEffect7,
+  useState as useState8,
+  useCallback as useCallback4,
+  isValidElement
+} from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
-var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_wprq3_1", "ExternalInput-button": "_ExternalInput-button_wprq3_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_wprq3_24", "ExternalInput--readOnly": "_ExternalInput--readOnly_wprq3_31", "ExternalInput-detachButton": "_ExternalInput-detachButton_wprq3_35", "ExternalInput": "_ExternalInput_wprq3_1", "ExternalInputModal": "_ExternalInputModal_wprq3_79", "ExternalInputModal-grid": "_ExternalInputModal-grid_wprq3_89", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_wprq3_100", "ExternalInputModal-filters": "_ExternalInputModal-filters_wprq3_105", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_wprq3_124", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_wprq3_133", "ExternalInputModal-table": "_ExternalInputModal-table_wprq3_133", "ExternalInputModal-thead": "_ExternalInputModal-thead_wprq3_149", "ExternalInputModal-th": "_ExternalInputModal-th_wprq3_149", "ExternalInputModal-td": "_ExternalInputModal-td_wprq3_164", "ExternalInputModal-tr": "_ExternalInputModal-tr_wprq3_169", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_wprq3_176", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_wprq3_202", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_wprq3_206", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_wprq3_223", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_wprq3_227", "ExternalInputModal-search": "_ExternalInputModal-search_wprq3_227", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_wprq3_264", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_wprq3_289", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_wprq3_299", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_wprq3_313", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_wprq3_326", "ExternalInputModal-footer": "_ExternalInputModal-footer_wprq3_330" };
+var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_8wgzm_1", "ExternalInput-button": "_ExternalInput-button_8wgzm_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_8wgzm_24", "ExternalInput--readOnly": "_ExternalInput--readOnly_8wgzm_31", "ExternalInput-detachButton": "_ExternalInput-detachButton_8wgzm_35", "ExternalInput": "_ExternalInput_8wgzm_1", "ExternalInputModal": "_ExternalInputModal_8wgzm_79", "ExternalInputModal-grid": "_ExternalInputModal-grid_8wgzm_89", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_8wgzm_100", "ExternalInputModal-filters": "_ExternalInputModal-filters_8wgzm_105", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_8wgzm_124", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_8wgzm_133", "ExternalInputModal-table": "_ExternalInputModal-table_8wgzm_133", "ExternalInputModal-thead": "_ExternalInputModal-thead_8wgzm_149", "ExternalInputModal-th": "_ExternalInputModal-th_8wgzm_149", "ExternalInputModal-td": "_ExternalInputModal-td_8wgzm_164", "ExternalInputModal-tr": "_ExternalInputModal-tr_8wgzm_169", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_8wgzm_176", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_8wgzm_202", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_8wgzm_206", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_8wgzm_223", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_8wgzm_227", "ExternalInputModal-search": "_ExternalInputModal-search_8wgzm_227", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_8wgzm_264", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_8wgzm_289", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_8wgzm_299", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_8wgzm_313", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_8wgzm_326", "ExternalInputModal-footerContainer": "_ExternalInputModal-footerContainer_8wgzm_330", "ExternalInputModal-footer": "_ExternalInputModal-footer_8wgzm_330" };
 
 // components/Modal/index.tsx
 init_react_import();
@@ -1606,7 +1642,7 @@ var ExternalInput = ({
     const validKeys = /* @__PURE__ */ new Set();
     for (const item of mappedData) {
       for (const key of Object.keys(item)) {
-        if (typeof item[key] === "string" || typeof item[key] === "number") {
+        if (typeof item[key] === "string" || typeof item[key] === "number" || isValidElement(item[key])) {
           validKeys.add(key);
         }
       }
@@ -1627,6 +1663,14 @@ var ExternalInput = ({
     }),
     [id, field]
   );
+  const Footer = useCallback4(
+    (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ jsxs7("span", { className: getClassNameModal("footer"), children: [
+      props.items.length,
+      " result",
+      props.items.length === 1 ? "" : "s"
+    ] }),
+    [field.renderFooter]
+  );
   useEffect7(() => {
     search(searchQuery, filters);
   }, []);
@@ -1766,11 +1810,7 @@ var ExternalInput = ({
                   /* @__PURE__ */ jsx14("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ jsx14(Loader, { size: 24 }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs7("div", { className: getClassNameModal("footer"), children: [
-                mappedData.length,
-                " result",
-                mappedData.length === 1 ? "" : "s"
-              ] })
+              /* @__PURE__ */ jsx14("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ jsx14(Footer, { items: mappedData }) })
             ]
           }
         ) })
@@ -2050,6 +2090,7 @@ var useSafeId = () => {
 // components/AutoField/index.tsx
 import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var getClassName15 = get_class_name_factory_default("Input", styles_module_default2);
+var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default2);
 var FieldLabel = ({
   children,
   icon,
@@ -2097,7 +2138,7 @@ var FieldLabelInternal2 = ({
 };
 function AutoFieldInternal(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { overrides } = useAppContext();
+  const { dispatch, overrides } = useAppContext();
   const { id, Label = FieldLabelInternal2 } = props;
   const field = props.field;
   const label = field.label;
@@ -2129,23 +2170,45 @@ function AutoFieldInternal(props) {
     Label,
     id: resolvedId
   });
+  const onFocus = useCallback5(
+    (e) => {
+      if (mergedProps.name && e.target.nodeName === "INPUT") {
+        e.stopPropagation();
+        dispatch({
+          type: "setUi",
+          ui: {
+            field: { focus: mergedProps.name }
+          }
+        });
+      }
+    },
+    [mergedProps.name]
+  );
+  const onBlur = useCallback5((e) => {
+    if ("name" in e.target) {
+      dispatch({
+        type: "setUi",
+        ui: {
+          field: { focus: null }
+        }
+      });
+    }
+  }, []);
   if (field.type === "custom") {
     if (!field.render) {
       return null;
     }
     const CustomField = field.render;
-    return /* @__PURE__ */ jsx20("div", { className: getClassName15(), children: /* @__PURE__ */ jsx20(CustomField, __spreadValues({}, mergedProps)) });
+    return /* @__PURE__ */ jsx20("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx20("div", { className: getClassName15(), children: /* @__PURE__ */ jsx20(CustomField, __spreadValues({}, mergedProps)) }) });
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  return /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }));
+  return /* @__PURE__ */ jsx20("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children })) });
 }
-var RECENT_CHANGE_TIMEOUT = 200;
 function AutoFieldPrivate(props) {
+  const { state } = useAppContext();
   const { value, onChange } = props;
   const [localValue, setLocalValue] = useState10(value);
-  const [recentlyChanged, setRecentlyChanged] = useState10(false);
-  const timeoutRef = useRef2();
   const onChangeDb = useDebouncedCallback(
     (val, ui) => {
       onChange(val, ui);
@@ -2155,15 +2218,10 @@ function AutoFieldPrivate(props) {
   );
   const onChangeLocal = useCallback5((val, ui) => {
     setLocalValue(val);
-    setRecentlyChanged(true);
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => {
-      setRecentlyChanged(false);
-    }, RECENT_CHANGE_TIMEOUT);
     onChangeDb(val, ui);
   }, []);
   useEffect9(() => {
-    if (!recentlyChanged) {
+    if (state.ui.field.focus !== props.name) {
       setLocalValue(value);
     }
   }, [value]);

package/dist/{resolve-all-data-BoWgijLi.d.mts → resolve-all-data-Ch-Pcasj.d.mts}

@@ -91,9 +91,12 @@ type ExternalField<Props extends {
         filters: Record<string, any>;
     }) => Promise<any[] | null>;
     mapProp?: (value: any) => Props;
-    mapRow?: (value: any) => Record<string, string | number>;
+    mapRow?: (value: any) => Record<string, string | number | ReactElement>;
     getItemSummary?: (item: Props, index?: number) => string;
     showSearch?: boolean;
+    renderFooter?: (props: {
+        items: any[];
+    }) => ReactElement;
     initialQuery?: string;
     filterFields?: Record<string, Field>;
     initialFilters?: Record<string, any>;
@@ -271,6 +274,9 @@ type UiState = {
         controlsVisible: boolean;
         options: Viewport[];
     };
+    field: {
+        focus?: string | null;
+    };
 };
 type AppState<UserData extends Data = Data> = {
     data: UserData;

package/dist/{resolve-all-data-BoWgijLi.d.ts → resolve-all-data-Ch-Pcasj.d.ts}

@@ -91,9 +91,12 @@ type ExternalField<Props extends {
         filters: Record<string, any>;
     }) => Promise<any[] | null>;
     mapProp?: (value: any) => Props;
-    mapRow?: (value: any) => Record<string, string | number>;
+    mapRow?: (value: any) => Record<string, string | number | ReactElement>;
     getItemSummary?: (item: Props, index?: number) => string;
     showSearch?: boolean;
+    renderFooter?: (props: {
+        items: any[];
+    }) => ReactElement;
     initialQuery?: string;
     filterFields?: Record<string, Field>;
     initialFilters?: Record<string, any>;
@@ -271,6 +274,9 @@ type UiState = {
         controlsVisible: boolean;
         options: Viewport[];
     };
+    field: {
+        focus?: string | null;
+    };
 };
 type AppState<UserData extends Data = Data> = {
     data: UserData;

package/dist/rsc.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './resolve-all-data-BoWgijLi.mjs';
-export { a4 as resolveAllData } from './resolve-all-data-BoWgijLi.mjs';
+import { C as Config, D as Data } from './resolve-all-data-Ch-Pcasj.mjs';
+export { a4 as resolveAllData } from './resolve-all-data-Ch-Pcasj.mjs';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config>({ config, data, }: {

package/dist/rsc.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './resolve-all-data-BoWgijLi.js';
-export { a4 as resolveAllData } from './resolve-all-data-BoWgijLi.js';
+import { C as Config, D as Data } from './resolve-all-data-Ch-Pcasj.js';
+export { a4 as resolveAllData } from './resolve-all-data-Ch-Pcasj.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config>({ config, data, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.16.3-canary.af421c6",
+  "version": "0.17.0-canary.35170f8",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",