@alixpartners/ui-components 2.3.1 → 2.3.2

package/dist/assets/Creatable.css

@@ -1 +1 @@
-.Creatable-module__dropdownContainer___y0ptC{display:flex;flex-direction:column;gap:4px;width:100%;min-width:0;position:relative;gap:6px}.Creatable-module__dropdownLabel___RyuSY{font-size:14px;font-weight:500;color:#4a4a4a;line-height:1.2;display:flex;align-items:center;gap:4px}.Creatable-module__dropdownLabel___RyuSY .Creatable-module__label-text___jlV2x{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__dropdownLabel___RyuSY.Creatable-module__dropdownLabelDisabled___nhYc0{pointer-events:none;color:#b2b2b2}.Creatable-module__dropdownLabel___RyuSY.Creatable-module__dropdownLabelDisabled___nhYc0 .Creatable-module__label-tooltip-icon___G7Bou{color:#ccc}.Creatable-module__required___g26DB{color:#cb282e;font-weight:600}.Creatable-module__label-tooltip-icon___G7Bou{color:#4a4a4a;font-size:16px;cursor:pointer}.Creatable-module__dropdownWrapper___wu-B3{position:relative;width:100%;min-width:0}.Creatable-module__dropdown-menu-trigger___se8sO{display:inline-block;width:100%}.Creatable-module__dropdownTrigger___6yi8Y{width:100%;height:32px;padding:6px 8px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:240px;box-sizing:border-box}.Creatable-module__dropdownTrigger___6yi8Y:hover:not(.Creatable-module__dropdownTriggerDisabled___T9yC0){border-color:#5cb335}.Creatable-module__dropdownTrigger___6yi8Y:focus{outline:none;border-color:#5cb335}.Creatable-module__dropdownTrigger___6yi8Y.Creatable-module__dropdownTriggerOpen___acLIm{border-color:#5cb335;border-radius:4px}.Creatable-module__dropdownTrigger___6yi8Y.Creatable-module__dropdownTriggerDisabled___T9yC0{background-color:#f5f5f5;border-color:#ccc;cursor:not-allowed}.Creatable-module__dropdownTrigger___6yi8Y.Creatable-module__dropdownTriggerError___Kx1v-{border-color:#bf494e}.Creatable-module__selectedItemsCreatable___P0mME{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh{border-radius:240px;height:20px;padding:0 5px 0 9px;max-width:120px}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh .Creatable-module__selectedItemLabel___m0LSV{color:#3f7b25}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh .Creatable-module__removeButton___tjxwh{border:none;background:none;cursor:pointer;padding:0;margin:0;display:flex;align-items:center}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh .Creatable-module__removeIcon___KQKbD{font-size:12px;height:12px;width:12px;color:#727272}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__singleSelectedCreatableItem___tanxX{display:flex;justify-content:space-between;align-items:center;flex:1;min-width:0;border-right:solid 1px #cccccc;padding-right:3px}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__singleSelectedCreatableItem___tanxX .Creatable-module__selectedItemLabel___m0LSV{color:#28292c;font-size:14px}.Creatable-module__singleSelectedCreatableItemRemoveButton___Qi9Si{transform:rotate(45deg)}.Creatable-module__selectedItem___0LADh{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;background-color:#dff0db;border:1px solid #dff0db;border-radius:12px;font-size:12px;color:#4a4a4a;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__selectedItemLabel___m0LSV{display:inline-block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__selectedOptionLabel___nzo1b{color:#28292c;font-size:14px}.Creatable-module__placeholder___cH4oH{color:#878787;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__dropdownActions___FmHZe{display:flex;align-items:center;gap:4px;flex-shrink:0}.Creatable-module__dropdownArrow___SJmKg{color:#4a4a4a;font-size:16px!important;transition:transform .2s ease}.Creatable-module__dropdownArrow___SJmKg.Creatable-module__dropdownArrowOpen___T3E0S{transform:rotate(180deg)}.Creatable-module__dropdownMenu___HEhC3{background-color:#fff;border:1px solid #cccccc;border-radius:4px;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column;width:100%;max-width:640px;min-width:80x;box-sizing:border-box;box-shadow:0 0 4px #00000029}.Creatable-module__dropdown-container-grouped___gZle- .Creatable-module__dropdownMenu___HEhC3{min-width:212px}.Creatable-module__dropdown-container-multi-select___1U1U4 .Creatable-module__dropdownMenu___HEhC3{min-width:224px}.Creatable-module__dropdownMenuToolbar___Hqezv{display:flex;flex-direction:column;gap:16px;padding:8px 12px;border-bottom:1px solid #cccccc}.Creatable-module__searchContainer___zaiNa{position:relative;display:flex;align-items:center;gap:16px}.Creatable-module__searchContainer___zaiNa .Creatable-module__search___dphw1{flex:1}.Creatable-module__dropdownCreatableSearchContainer___AgXA3{box-sizing:border-box;width:100%;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px;background:#fff;border:1px solid #cccccc;border-radius:4px;height:32px;padding:0 8px}.Creatable-module__dropdownCreatableSearchContainer___AgXA3:focus{border-color:#5cb335;outline:none}.Creatable-module__dropdownCreatableSearchContainer___AgXA3:focus-within{border-color:#5cb335}.Creatable-module__dropdownCreatableSearchContainer___AgXA3.Creatable-module__disabled___ZIdus{cursor:not-allowed;opacity:.6}.Creatable-module__dropdownCreatableError___FYVla{border-color:#bf494e}.Creatable-module__creatableInput___KaKxv{flex:1 1 120px;min-width:80px;border:none;outline:none;background:transparent;height:20px;padding:6px 0;color:#28292c;font-size:14px}.Creatable-module__creatableInput___KaKxv::placeholder{color:#878787}.Creatable-module__creatableInput___KaKxv:disabled{color:#b2b2b2}.Creatable-module__searchInput___03a1-{width:100%;padding:8px 32px 8px 12px;border:1px solid #cccccc;border-radius:4px;font-size:14px;color:#28292c;background-color:#fff}.Creatable-module__searchInput___03a1-:focus{outline:none;border-color:#5cb335}.Creatable-module__searchInput___03a1-::placeholder{color:#878787}.Creatable-module__searchIcon___TA3Y3{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#4a4a4a;font-size:16px;pointer-events:none}.Creatable-module__optionsList___VZgJf{padding:8px;flex:1;overflow-y:auto;max-height:200px}.Creatable-module__categoryGroup___g8f-g{display:flex;flex-direction:column}.Creatable-module__optionsList___VZgJf .Creatable-module__categoryGroup___g8f-g:first-child .Creatable-module__categoryDivider___QUgR9{border-top:none}.Creatable-module__categoryDivider___QUgR9{padding:8px;border-top:1px solid #cccccc;background-color:#fff;display:flex;align-items:center}.Creatable-module__categoryLabel___YhGp9{font-size:12px;font-weight:600;color:#727272;text-transform:uppercase;letter-spacing:.5px}.Creatable-module__optionItem___Ys808{width:100%;padding:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;text-align:left;font-size:14px;color:#4a4a4a;min-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;box-sizing:border-box}.Creatable-module__optionItem___Ys808:hover:not(.Creatable-module__optionItemDisabled___jvfGz){background-color:#dff0db}.Creatable-module__optionItem___Ys808:focus{outline:none}.Creatable-module__optionItem___Ys808.Creatable-module__optionItemDisabled___jvfGz{color:#b2b2b2;cursor:not-allowed;opacity:.6}.Creatable-module__optionItem___Ys808.Creatable-module__optionItemFocused___OfIQd{background-color:#dff0db}.Creatable-module__optionContent___9RCsJ{display:flex;align-items:center;justify-content:space-between;width:100%}.Creatable-module__optionLabel___FJfM1{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Roboto,sans-serif!important}.Creatable-module__tickIcon___VjpDN{color:inherit;font-size:14px;flex-shrink:0;margin-left:8px}.Creatable-module__creatableIcon___MQ0Ak{color:inherit;font-size:14px;flex-shrink:0;margin-right:8px}.Creatable-module__noOptions___H8Kbu{padding:8px;text-align:center;color:#878787;font-size:14px;font-style:italic}.Creatable-module__maxItemsWarning___-qcUr{padding:8px;border-top:1px solid #cccccc;background-color:#f8f9fa;font-size:12px;color:#727272;text-align:center}.Creatable-module__helpers___GmPY4{height:14px;display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0}.Creatable-module__helpText___89mXU{font-size:12px;color:#727272;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__helpTextDisabled___shU6E{color:#b2b2b2}.Creatable-module__helpLink___IdU0g{color:#0369a3;font-size:12px;font-weight:500;line-height:1;text-decoration:none;flex-shrink:0}.Creatable-module__helpLink___IdU0g:hover{text-decoration:underline}.Creatable-module__helpLinkDisabled___B8rpy{color:#878787}.Creatable-module__errorMessage___HRKr5{font-size:12px;color:#bf494e;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar{width:4px}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-track{background:transparent}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:240px}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-thumb:hover{background-color:#878787}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-thumb:active{background-color:#4a4a4a}.Creatable-module__selectAllContainer___l9hbm{display:flex;gap:16px;background-color:#fff;justify-content:space-between;align-items:center;padding-bottom:8px}.Creatable-module__searchContainer___zaiNa:has(+.Creatable-module__selectAllContainer___l9hbm){border-bottom:none}.Creatable-module__actionButtons___tlqG9{display:flex;justify-content:space-between;gap:8px;padding:12px;border-top:1px solid #cccccc;background-color:#fff}
+.Creatable-module__dropdownContainer___y0ptC{display:flex;flex-direction:column;gap:4px;width:100%;min-width:0;position:relative;gap:6px}.Creatable-module__dropdownLabel___RyuSY{font-size:14px;font-weight:500;color:#4a4a4a;line-height:1.2;display:flex;align-items:center;gap:4px}.Creatable-module__dropdownLabel___RyuSY .Creatable-module__label-text___jlV2x{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__dropdownLabel___RyuSY.Creatable-module__dropdownLabelDisabled___nhYc0{pointer-events:none;color:#b2b2b2}.Creatable-module__dropdownLabel___RyuSY.Creatable-module__dropdownLabelDisabled___nhYc0 .Creatable-module__label-tooltip-icon___G7Bou{color:#ccc}.Creatable-module__required___g26DB{color:#cb282e;font-weight:600}.Creatable-module__label-tooltip-icon___G7Bou{color:#4a4a4a;font-size:16px;cursor:pointer}.Creatable-module__dropdownWrapper___wu-B3{position:relative;width:100%;min-width:0}.Creatable-module__dropdown-menu-trigger___se8sO{display:inline-block;width:100%}.Creatable-module__dropdownTrigger___6yi8Y{width:100%;height:32px;padding:6px 8px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:240px;box-sizing:border-box}.Creatable-module__dropdownTrigger___6yi8Y:hover:not(.Creatable-module__dropdownTriggerDisabled___T9yC0){border-color:#5cb335}.Creatable-module__dropdownTrigger___6yi8Y:focus{outline:none;border-color:#5cb335}.Creatable-module__dropdownTrigger___6yi8Y.Creatable-module__dropdownTriggerOpen___acLIm{border-color:#5cb335;border-radius:4px}.Creatable-module__dropdownTrigger___6yi8Y.Creatable-module__dropdownTriggerDisabled___T9yC0{background-color:#f5f5f5;border-color:#ccc;cursor:not-allowed}.Creatable-module__dropdownTrigger___6yi8Y.Creatable-module__dropdownTriggerError___Kx1v-{border-color:#bf494e}.Creatable-module__selectedItemsCreatable___P0mME{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh{border-radius:240px;height:20px;padding:0 5px 0 9px;max-width:120px}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh .Creatable-module__selectedItemLabel___m0LSV{color:#3f7b25}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh .Creatable-module__removeButton___tjxwh{border:none;background:none;cursor:pointer;padding:0;margin:0;display:flex;align-items:center}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__selectedItem___0LADh .Creatable-module__removeIcon___KQKbD{font-size:12px;height:12px;width:12px;color:#727272}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__singleSelectedCreatableItem___tanxX{display:flex;justify-content:space-between;align-items:center;flex:1;min-width:0;border-right:solid 1px #cccccc;padding-right:3px}.Creatable-module__selectedItemsCreatable___P0mME .Creatable-module__singleSelectedCreatableItem___tanxX .Creatable-module__selectedItemLabel___m0LSV{color:#28292c;font-size:14px}.Creatable-module__singleSelectedCreatableItemRemoveButton___Qi9Si{transform:rotate(45deg)}.Creatable-module__selectedItem___0LADh{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;background-color:#dff0db;border:1px solid #dff0db;border-radius:12px;font-size:12px;color:#4a4a4a;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__selectedItemLabel___m0LSV{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.Creatable-module__selectedOptionLabel___nzo1b{color:#28292c;font-size:14px}.Creatable-module__placeholder___cH4oH{color:#878787;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__dropdownActions___FmHZe{display:flex;align-items:center;gap:4px;flex-shrink:0}.Creatable-module__dropdownArrow___SJmKg{color:#4a4a4a;font-size:16px!important;transition:transform .2s ease}.Creatable-module__dropdownArrow___SJmKg.Creatable-module__dropdownArrowOpen___T3E0S{transform:rotate(180deg)}.Creatable-module__dropdownMenu___HEhC3{background-color:#fff;border:1px solid #cccccc;border-radius:4px;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column;width:100%;max-width:640px;min-width:80x;box-sizing:border-box;box-shadow:0 0 4px #00000029}.Creatable-module__dropdown-container-grouped___gZle- .Creatable-module__dropdownMenu___HEhC3{min-width:212px}.Creatable-module__dropdown-container-multi-select___1U1U4 .Creatable-module__dropdownMenu___HEhC3{min-width:224px}.Creatable-module__dropdownMenuToolbar___Hqezv{display:flex;flex-direction:column;gap:16px;padding:8px 12px;border-bottom:1px solid #cccccc}.Creatable-module__searchContainer___zaiNa{position:relative;display:flex;align-items:center;gap:16px}.Creatable-module__searchContainer___zaiNa .Creatable-module__search___dphw1{flex:1}.Creatable-module__dropdownCreatableSearchContainer___AgXA3{box-sizing:border-box;width:100%;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px;background:#fff;border:1px solid #cccccc;border-radius:4px;height:32px;padding:0 8px}.Creatable-module__dropdownCreatableSearchContainer___AgXA3:focus{border-color:#5cb335;outline:none}.Creatable-module__dropdownCreatableSearchContainer___AgXA3:focus-within{border-color:#5cb335}.Creatable-module__dropdownCreatableSearchContainer___AgXA3.Creatable-module__disabled___ZIdus{cursor:not-allowed;opacity:.6}.Creatable-module__dropdownCreatableError___FYVla{border-color:#bf494e}.Creatable-module__creatableInput___KaKxv{flex:1 1 120px;min-width:80px;border:none;outline:none;background:transparent;height:20px;padding:6px 0;color:#28292c;font-size:14px}.Creatable-module__creatableInput___KaKxv::placeholder{color:#878787}.Creatable-module__creatableInput___KaKxv:disabled{color:#b2b2b2}.Creatable-module__searchInput___03a1-{width:100%;padding:8px 32px 8px 12px;border:1px solid #cccccc;border-radius:4px;font-size:14px;color:#28292c;background-color:#fff}.Creatable-module__searchInput___03a1-:focus{outline:none;border-color:#5cb335}.Creatable-module__searchInput___03a1-::placeholder{color:#878787}.Creatable-module__searchIcon___TA3Y3{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#4a4a4a;font-size:16px;pointer-events:none}.Creatable-module__optionsList___VZgJf{padding:8px;flex:1;overflow-y:auto;max-height:200px}.Creatable-module__categoryGroup___g8f-g{display:flex;flex-direction:column}.Creatable-module__optionsList___VZgJf .Creatable-module__categoryGroup___g8f-g:first-child .Creatable-module__categoryDivider___QUgR9{border-top:none}.Creatable-module__categoryDivider___QUgR9{padding:8px;border-top:1px solid #cccccc;background-color:#fff;display:flex;align-items:center}.Creatable-module__categoryLabel___YhGp9{font-size:12px;font-weight:600;color:#727272;text-transform:uppercase;letter-spacing:.5px}.Creatable-module__optionItem___Ys808{width:100%;padding:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;text-align:left;font-size:14px;color:#4a4a4a;min-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;box-sizing:border-box}.Creatable-module__optionItem___Ys808:hover:not(.Creatable-module__optionItemDisabled___jvfGz){background-color:#dff0db}.Creatable-module__optionItem___Ys808:focus{outline:none}.Creatable-module__optionItem___Ys808.Creatable-module__optionItemDisabled___jvfGz{color:#b2b2b2;cursor:not-allowed;opacity:.6}.Creatable-module__optionItem___Ys808.Creatable-module__optionItemFocused___OfIQd{background-color:#dff0db}.Creatable-module__optionContent___9RCsJ{display:flex;align-items:center;justify-content:space-between;width:100%}.Creatable-module__optionLabel___FJfM1{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Roboto,sans-serif!important}.Creatable-module__tickIcon___VjpDN{color:inherit;font-size:14px;flex-shrink:0;margin-left:8px}.Creatable-module__creatableIcon___MQ0Ak{color:inherit;font-size:14px;flex-shrink:0;margin-right:8px}.Creatable-module__noOptions___H8Kbu{padding:8px;text-align:center;color:#878787;font-size:14px;font-style:italic}.Creatable-module__maxItemsWarning___-qcUr{padding:8px;border-top:1px solid #cccccc;background-color:#f8f9fa;font-size:12px;color:#727272;text-align:center}.Creatable-module__helpers___GmPY4{height:14px;display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0}.Creatable-module__helpText___89mXU{font-size:12px;color:#727272;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__helpTextDisabled___shU6E{color:#b2b2b2}.Creatable-module__helpLink___IdU0g{color:#0369a3;font-size:12px;font-weight:500;line-height:1;text-decoration:none;flex-shrink:0}.Creatable-module__helpLink___IdU0g:hover{text-decoration:underline}.Creatable-module__helpLinkDisabled___B8rpy{color:#878787}.Creatable-module__errorMessage___HRKr5{font-size:12px;color:#bf494e;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar{width:4px}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-track{background:transparent}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:240px}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-thumb:hover{background-color:#878787}.Creatable-module__optionsList___VZgJf::-webkit-scrollbar-thumb:active{background-color:#4a4a4a}.Creatable-module__selectAllContainer___l9hbm{display:flex;gap:16px;background-color:#fff;justify-content:space-between;align-items:center;padding-bottom:8px}.Creatable-module__searchContainer___zaiNa:has(+.Creatable-module__selectAllContainer___l9hbm){border-bottom:none}.Creatable-module__actionButtons___tlqG9{display:flex;justify-content:space-between;gap:8px;padding:12px;border-top:1px solid #cccccc;background-color:#fff}

package/dist/assets/FilePicker.css

@@ -1 +1 @@
-.FilePicker-module__container___knCCi{display:flex;flex-direction:column;gap:6px}.FilePicker-module__label___al7Xe{color:#4a4a4a;font-size:14px;font-weight:500;line-height:1.2;display:flex;align-items:center;gap:4px;min-width:0}.FilePicker-module__required___41Vjd{color:#cb282e}.FilePicker-module__labelTooltipIcon___Cc1QF{color:#4a4a4a;font-size:16px;cursor:pointer}.FilePicker-module__helpers___79-g5{display:flex;justify-content:space-between;align-items:center;min-width:0;height:14px}.FilePicker-module__helperText___ja9Rr{color:#727272;font-size:12px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.FilePicker-module__errorMessage___TvHrL{color:#bf494e;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.FilePicker-module__singleFileHelpLinkContainer___mpjUf{display:flex;align-items:center;gap:6px}.FilePicker-module__singleFileHelpLinkReservedSpace___r8j2b{width:32px;flex-shrink:0}.FilePicker-module__helpLink___uu45D{color:#0369a3;font-size:12px;font-weight:500;text-decoration:none;flex-shrink:0;margin-left:auto;line-height:1.2}.FilePicker-module__helpLink___uu45D:hover{text-decoration:underline}.FilePicker-module__input___cL1Hs{display:none}.FilePicker-module__singleFileContainer___OFSDt{display:flex;align-items:center;gap:4px}.FilePicker-module__singleFileInputContainer___MOkES{display:flex;align-items:center;width:100%;height:32px;border:1px solid #cccccc;border-radius:4px;background-color:#fff}.FilePicker-module__singleFileInputContainer___MOkES:focus,.FilePicker-module__singleFileInputContainer___MOkES:focus-within{border-color:#5cb335;outline:none}.FilePicker-module__inputFileName___sMs7R{display:flex;align-items:center;flex:1;height:100%;font-size:14px;font-weight:400;color:#28292c;border-right:1px solid #cccccc;padding-left:6px}.FilePicker-module__inputFileNamePlaceholder___-mkDD{color:#878787}.FilePicker-module__inputButton___ghLlD{margin-left:6px;margin-right:6px}.FilePicker-module__multipleHelpText___5tnnn{color:#727272;text-align:center;font-family:Roboto;font-size:13px;font-style:normal;font-weight:400;line-height:100%}.FilePicker-module__multipleInputButton___WCJp9{align-self:flex-start}ul.FilePicker-module__multipleFilesList___Kim0I{display:flex;flex-direction:column;list-style:none;padding-left:0;margin:0}.FilePicker-module__multipleFilesListItem___01PDS{padding-bottom:12px;padding-top:12px}.FilePicker-module__multipleFilesListItem___01PDS:first-child{padding-top:0}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemContent___pKbho{display:flex;align-items:start;gap:8px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemContentData___5GC-C{display:flex;align-items:center;justify-content:space-between;width:100%}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemIconContainer___7sUL5{background-color:#f1f1f1;border-radius:4px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemIcon___nfMX9{display:flex;align-items:center;justify-content:center;color:#878787;font-size:20px;height:34px;width:32px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemText___nPqrL{display:flex;flex-direction:column;gap:3px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemName___NjHhX{color:#4a4a4a;font-size:14px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemSize___wc8LJ{color:#727272;font-size:12px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemError___x9qkT{display:flex;align-items:center;gap:3px;color:#cb282e;font-size:12px;font-weight:500}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemIconError___0RO46{color:#cb282e;font-size:16px}.FilePicker-module__multipleFilesListItem___01PDS:not(:last-child){border-bottom:2px solid #cccccc}.FilePicker-module__multipleFilesListItemIconDelete___9Z9Dl{font-size:20px!important}.FilePicker-module__disabled___szMiq .FilePicker-module__label___al7Xe,.FilePicker-module__disabled___szMiq .FilePicker-module__required___41Vjd{color:#b2b2b2}.FilePicker-module__disabled___szMiq .FilePicker-module__labelTooltipIcon___Cc1QF{color:#ccc}.FilePicker-module__disabled___szMiq .FilePicker-module__inputFileName___sMs7R,.FilePicker-module__disabled___szMiq .FilePicker-module__helperText___ja9Rr{color:#b2b2b2}.FilePicker-module__disabled___szMiq .FilePicker-module__helpLink___uu45D{pointer-events:none;color:#878787}.FilePicker-module__disabled___szMiq .FilePicker-module__errorMessage___TvHrL{color:#b2b2b2}.FilePicker-module__disabled___szMiq .FilePicker-module__singleFileInputContainer___MOkES:focus,.FilePicker-module__disabled___szMiq .FilePicker-module__singleFileInputContainer___MOkES:focus-within{border:1px solid #cccccc;border-color:none;outline:none}.FilePicker-module__disabled___szMiq .FilePicker-module__multipleHelpText___5tnnn{color:#b2b2b2}
+.FilePicker-module__container___knCCi{display:flex;flex-direction:column;gap:6px}.FilePicker-module__label___al7Xe{color:#4a4a4a;font-size:14px;font-weight:500;line-height:1.2;display:flex;align-items:center;gap:4px;min-width:0}.FilePicker-module__required___41Vjd{color:#cb282e}.FilePicker-module__labelTooltipIcon___Cc1QF{color:#4a4a4a;font-size:16px;cursor:pointer}.FilePicker-module__helpers___79-g5{display:flex;justify-content:space-between;align-items:center;min-width:0;height:14px}.FilePicker-module__helperText___ja9Rr{color:#727272;font-size:12px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.FilePicker-module__errorMessage___TvHrL{color:#bf494e;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.FilePicker-module__singleFileHelpLinkContainer___mpjUf{display:flex;align-items:center;gap:6px}.FilePicker-module__singleFileHelpLinkReservedSpace___r8j2b{width:32px;flex-shrink:0}.FilePicker-module__helpLink___uu45D{color:#0369a3;font-size:12px;font-weight:500;text-decoration:none;flex-shrink:0;margin-left:auto;line-height:1.2}.FilePicker-module__helpLink___uu45D:hover{text-decoration:underline}.FilePicker-module__input___cL1Hs{display:none}.FilePicker-module__singleFileContainer___OFSDt{display:flex;align-items:center;gap:4px}.FilePicker-module__singleFileInputContainer___MOkES{display:flex;align-items:center;width:100%;height:32px;border:1px solid #cccccc;border-radius:4px;background-color:#fff}.FilePicker-module__singleFileInputContainer___MOkES:focus,.FilePicker-module__singleFileInputContainer___MOkES:focus-within{border-color:#5cb335;outline:none}.FilePicker-module__inputFileName___sMs7R{display:flex;align-items:center;flex:1;height:100%;font-size:14px;font-weight:400;color:#28292c;border-right:1px solid #cccccc;padding-left:6px}.FilePicker-module__inputFileNamePlaceholder___-mkDD{color:#878787}.FilePicker-module__inputButton___ghLlD{margin-left:6px;margin-right:6px}.FilePicker-module__multipleHelpText___5tnnn{color:#727272;text-align:center;font-family:Roboto;font-size:13px;font-style:normal;font-weight:400;line-height:100%}.FilePicker-module__multipleInputButton___WCJp9{align-self:flex-start}ul.FilePicker-module__multipleFilesList___Kim0I{display:flex;flex-direction:column;list-style:none;padding-left:0;margin:0}.FilePicker-module__multipleFilesListItem___01PDS{padding-bottom:12px;padding-top:12px}.FilePicker-module__multipleFilesListItem___01PDS:first-child{padding-top:0}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemContent___pKbho{display:flex;align-items:start;gap:8px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemContentData___5GC-C{display:flex;align-items:center;justify-content:space-between;width:100%}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemIconContainer___7sUL5{background-color:#f1f1f1;border-radius:4px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemIcon___nfMX9{display:flex;align-items:center;justify-content:center;color:#878787;font-size:20px;height:34px;width:32px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemText___nPqrL{display:flex;flex-direction:column;gap:3px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemName___NjHhX{color:#4a4a4a;font-size:14px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemSize___wc8LJ{color:#727272;font-size:12px}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemError___x9qkT{display:flex;align-items:center;gap:3px;color:#cb282e;font-size:12px;font-weight:500}.FilePicker-module__multipleFilesListItem___01PDS .FilePicker-module__multipleFilesListItemIconError___0RO46{color:#cb282e;font-size:16px}.FilePicker-module__multipleFilesListItem___01PDS:not(:last-child){border-bottom:2px solid #cccccc}.FilePicker-module__multipleFilesListItemIconDelete___9Z9Dl{font-size:20px!important}.FilePicker-module__disabled___szMiq .FilePicker-module__label___al7Xe,.FilePicker-module__disabled___szMiq .FilePicker-module__required___41Vjd{color:#b2b2b2}.FilePicker-module__disabled___szMiq .FilePicker-module__labelTooltipIcon___Cc1QF{color:#ccc}.FilePicker-module__disabled___szMiq .FilePicker-module__inputFileName___sMs7R,.FilePicker-module__disabled___szMiq .FilePicker-module__helperText___ja9Rr{color:#b2b2b2}.FilePicker-module__disabled___szMiq .FilePicker-module__helpLink___uu45D{pointer-events:none;color:#878787}.FilePicker-module__disabled___szMiq .FilePicker-module__errorMessage___TvHrL{color:#b2b2b2}.FilePicker-module__disabled___szMiq .FilePicker-module__singleFileInputContainer___MOkES:focus,.FilePicker-module__disabled___szMiq .FilePicker-module__singleFileInputContainer___MOkES:focus-within{border:1px solid #cccccc;border-color:none;outline:none}.FilePicker-module__disabled___szMiq .FilePicker-module__multipleHelpText___5tnnn{color:#b2b2b2}.FilePicker-module__flex___l1rtG{display:flex}

package/dist/components/FilePicker/FilePicker.d.ts

@@ -1,15 +1,47 @@
+import { ReactNode } from 'react';
 import { InteractiveEventHandlers } from '../../types/native-events';
 import { InputLabelTooltipProps } from '../Input/Input';
 export type UploadFile = {
     file: File;
     error?: string;
 };
+export type FilePickerContextValue = {
+    id: string;
+    type: 'single' | 'multiple';
+    maxFiles: number;
+    fileExtensionsAllowed: string[];
+    fileExtensionsAllowedText: string;
+    maxSize: number;
+    queueFiles: boolean;
+    disabled: boolean;
+    isUploadDisabled: boolean;
+    uploadedFiles: UploadFile[];
+    isMaxFilesExceeded: boolean;
+    label: string;
+    required: boolean;
+    placeholder?: string;
+    errorMessage?: string;
+    helpText?: string;
+    helpLink?: string;
+    helpLinkText?: string;
+    multipleHelpText?: string;
+    multipleButtonHelpText?: string;
+    labelTooltip?: InputLabelTooltipProps;
+    accept: string;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    triggerInput: () => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    handleRemoveFile: (fileName: string) => void;
+    displayFileSize: (size: number) => string;
+};
+declare function useFilePickerContext(): FilePickerContextValue;
 type FilePickerProps = {
     type?: 'single' | 'multiple';
     maxFiles?: number;
     fileExtensionsAllowed: string[];
     maxSize: number;
     queueFiles?: boolean;
+    isUploadDisabled?: boolean;
     disabled?: boolean;
     value?: File[];
     label: string;
@@ -19,30 +51,57 @@ type FilePickerProps = {
     helpText?: string;
     helpLink?: string;
     helpLinkText?: string;
+    multipleHelpText?: string;
+    multipleButtonHelpText?: string;
     labelTooltip?: InputLabelTooltipProps;
     onUpload?: (files: UploadFile[]) => void;
     onRemoveFile?: (fileName: string) => void;
+    children?: ReactNode;
 } & InteractiveEventHandlers;
 /**
- * FilePicker component for uploading files.
- *
- * @param {object} props - FilePicker component props
- * @param {'single' | 'multiple'} props.type - The type of file picker to display
- * @param {number} props.maxFiles - The maximum number of files to upload
- * @param {string[]} props.fileExtensionsAllowed - The allowed file extensions
- * @param {number} props.maxSize - The maximum file size in MB
- * @param {boolean} props.queueFiles - Whether to queue files
- * @param {boolean} props.disabled - Whether the component is disabled
- * @param {File[]} props.value - The value of the component
- * @param {string} props.label - The label of the component
- * @param {boolean} props.required - Whether the component is required
- * @param {string} props.placeholder - The placeholder of the component
- * @param {string} props.errorMessage - The error message of the component
- * @param {string} props.helpText - The help text of the component
- * @param {string} props.helpLink - The help link of the component
- * @param {string} props.helpLinkText - The help link text of the component
- * @param {InputLabelTooltipProps} props.labelTooltip - The label tooltip of the component
- * @returns {JSX.Element} The rendered FilePicker component
+ * FilePicker root. Use with no children for default layout, or compose with
+ * FilePicker.Label, FilePicker.BrowseButton, FilePicker.HelpText, FilePicker.UploadedFilesList, etc.
+ */
+declare function FilePickerRoot({ type, maxFiles, fileExtensionsAllowed, maxSize, queueFiles, disabled, isUploadDisabled, value, label, required, placeholder, errorMessage, helpText, helpLink, helpLinkText, multipleHelpText, multipleButtonHelpText, labelTooltip, onUpload, onRemoveFile, children, }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
+type FilePickerLabelProps = {
+    /** Override label text. If not provided, uses FilePicker's label prop. */
+    children?: ReactNode;
+};
+declare function FilePickerLabel({ children }: FilePickerLabelProps): import("react/jsx-runtime").JSX.Element;
+type FilePickerBrowseButtonProps = {
+    /** Override button content (e.g. "Browse file" or "Browse files (max 5)"). */
+    children?: ReactNode;
+    className?: string;
+};
+declare function FilePickerBrowseButton({ children, className }: FilePickerBrowseButtonProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Wrapper for single-file mode: groups the input row and optional delete action.
+ * Use with FilePicker.SingleFileRow and FilePicker.SingleFileActions as children.
+ */
+declare function FilePickerSingleFileContainer({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Single-file mode: shows filename/placeholder and a slot for the browse button.
+ * Put FilePicker.BrowseButton (optionally wrapped in Tooltip) as children.
  */
-export default function FilePicker({ type, maxFiles, fileExtensionsAllowed, maxSize, queueFiles, disabled, value, label, required, placeholder, errorMessage, helpText, helpLink, helpLinkText, labelTooltip, onUpload, onRemoveFile, }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare function FilePickerSingleFileRow({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+/** Renders the reserved space and delete button for single-file mode (for use in composed layout). */
+declare function FilePickerSingleFileActions(): import("react/jsx-runtime").JSX.Element | null;
+declare function FilePickerSingleFileDeleteButton(): import("react/jsx-runtime").JSX.Element | null;
+declare function FilePickerHelpText(): import("react/jsx-runtime").JSX.Element;
+declare function FilePickerUploadedFilesList(): import("react/jsx-runtime").JSX.Element | null;
+declare const FilePicker: typeof FilePickerRoot & {
+    Label: typeof FilePickerLabel;
+    BrowseButton: typeof FilePickerBrowseButton;
+    HelpText: typeof FilePickerHelpText;
+    UploadedFilesList: typeof FilePickerUploadedFilesList;
+    SingleFileContainer: typeof FilePickerSingleFileContainer;
+    SingleFileRow: typeof FilePickerSingleFileRow;
+    SingleFileActions: typeof FilePickerSingleFileActions;
+    SingleFileDeleteButton: typeof FilePickerSingleFileDeleteButton;
+};
+export { useFilePickerContext };
+export default FilePicker;

package/dist/components/FilePicker/FilePicker.js

@@ -1,155 +1,242 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { useId as Q, useRef as W, useState as q, useEffect as Z } from "react";
-import U from "../Tooltip/Tooltip.js";
-import P from "../Icon/Icon.js";
-import h from "../Button/Button.js";
-import { c as ee } from "../../clsx-OuTLNxxd.js";
-import '../../assets/FilePicker.css';const ie = "FilePicker-module__container___knCCi", le = "FilePicker-module__label___al7Xe", te = "FilePicker-module__required___41Vjd", ne = "FilePicker-module__labelTooltipIcon___Cc1QF", se = "FilePicker-module__helpers___79-g5", ce = "FilePicker-module__helperText___ja9Rr", re = "FilePicker-module__errorMessage___TvHrL", me = "FilePicker-module__singleFileHelpLinkContainer___mpjUf", oe = "FilePicker-module__singleFileHelpLinkReservedSpace___r8j2b", ae = "FilePicker-module__helpLink___uu45D", ue = "FilePicker-module__input___cL1Hs", pe = "FilePicker-module__singleFileContainer___OFSDt", _e = "FilePicker-module__singleFileInputContainer___MOkES", Fe = "FilePicker-module__inputFileName___sMs7R", de = "FilePicker-module__inputFileNamePlaceholder___-mkDD", Ie = "FilePicker-module__inputButton___ghLlD", he = "FilePicker-module__multipleHelpText___5tnnn", Le = "FilePicker-module__multipleInputButton___WCJp9", ke = "FilePicker-module__multipleFilesList___Kim0I", fe = "FilePicker-module__multipleFilesListItem___01PDS", Ne = "FilePicker-module__multipleFilesListItemContent___pKbho", ge = "FilePicker-module__multipleFilesListItemContentData___5GC-C", Ce = "FilePicker-module__multipleFilesListItemIconContainer___7sUL5", Pe = "FilePicker-module__multipleFilesListItemIcon___nfMX9", xe = "FilePicker-module__multipleFilesListItemText___nPqrL", De = "FilePicker-module__multipleFilesListItemName___NjHhX", ve = "FilePicker-module__multipleFilesListItemSize___wc8LJ", Ee = "FilePicker-module__multipleFilesListItemError___x9qkT", Te = "FilePicker-module__multipleFilesListItemIconError___0RO46", Be = "FilePicker-module__multipleFilesListItemIconDelete___9Z9Dl", He = "FilePicker-module__disabled___szMiq", e = {
-  container: ie,
-  label: le,
-  required: te,
-  labelTooltipIcon: ne,
-  helpers: se,
-  helperText: ce,
-  errorMessage: re,
-  singleFileHelpLinkContainer: me,
-  singleFileHelpLinkReservedSpace: oe,
-  helpLink: ae,
-  input: ue,
-  singleFileContainer: pe,
-  singleFileInputContainer: _e,
-  inputFileName: Fe,
-  inputFileNamePlaceholder: de,
-  inputButton: Ie,
-  multipleHelpText: he,
-  multipleInputButton: Le,
-  multipleFilesList: ke,
-  multipleFilesListItem: fe,
-  multipleFilesListItemContent: Ne,
-  multipleFilesListItemContentData: ge,
-  multipleFilesListItemIconContainer: Ce,
-  multipleFilesListItemIcon: Pe,
-  multipleFilesListItemText: xe,
-  multipleFilesListItemName: De,
-  multipleFilesListItemSize: ve,
-  multipleFilesListItemError: Ee,
-  multipleFilesListItemIconError: Te,
-  multipleFilesListItemIconDelete: Be,
-  disabled: He
-};
-function qe({
-  type: r = "single",
-  maxFiles: F = 1,
-  fileExtensionsAllowed: L,
-  maxSize: p,
-  queueFiles: R = !1,
-  disabled: s = !1,
-  value: d,
-  label: x,
-  required: K = !1,
-  placeholder: V,
-  errorMessage: a,
-  helpText: k,
-  helpLink: D,
-  helpLinkText: v,
-  labelTooltip: o,
-  onUpload: u,
-  onRemoveFile: f
+import { jsxs as a, jsx as i, Fragment as ne } from "react/jsx-runtime";
+import { createContext as se, useId as re, useRef as oe, useState as v, useCallback as _, useEffect as ce, useContext as ae } from "react";
+import pe from "../Tooltip/Tooltip.js";
+import D from "../Icon/Icon.js";
+import x from "../Button/Button.js";
+import { c as C } from "../../clsx-OuTLNxxd.js";
+import '../../assets/FilePicker.css';const ue = "FilePicker-module__container___knCCi", me = "FilePicker-module__label___al7Xe", de = "FilePicker-module__required___41Vjd", Fe = "FilePicker-module__labelTooltipIcon___Cc1QF", _e = "FilePicker-module__helpers___79-g5", Ie = "FilePicker-module__helperText___ja9Rr", he = "FilePicker-module__errorMessage___TvHrL", Le = "FilePicker-module__singleFileHelpLinkContainer___mpjUf", ge = "FilePicker-module__singleFileHelpLinkReservedSpace___r8j2b", ke = "FilePicker-module__helpLink___uu45D", fe = "FilePicker-module__input___cL1Hs", Pe = "FilePicker-module__singleFileContainer___OFSDt", Ne = "FilePicker-module__singleFileInputContainer___MOkES", xe = "FilePicker-module__inputFileName___sMs7R", Ce = "FilePicker-module__inputFileNamePlaceholder___-mkDD", Te = "FilePicker-module__inputButton___ghLlD", be = "FilePicker-module__multipleHelpText___5tnnn", ye = "FilePicker-module__multipleInputButton___WCJp9", De = "FilePicker-module__multipleFilesList___Kim0I", Be = "FilePicker-module__multipleFilesListItem___01PDS", Se = "FilePicker-module__multipleFilesListItemContent___pKbho", He = "FilePicker-module__multipleFilesListItemContentData___5GC-C", ve = "FilePicker-module__multipleFilesListItemIconContainer___7sUL5", we = "FilePicker-module__multipleFilesListItemIcon___nfMX9", Me = "FilePicker-module__multipleFilesListItemText___nPqrL", Ee = "FilePicker-module__multipleFilesListItemName___NjHhX", ze = "FilePicker-module__multipleFilesListItemSize___wc8LJ", Re = "FilePicker-module__multipleFilesListItemError___x9qkT", je = "FilePicker-module__multipleFilesListItemIconError___0RO46", Ke = "FilePicker-module__multipleFilesListItemIconDelete___9Z9Dl", Ve = "FilePicker-module__disabled___szMiq", t = {
+  container: ue,
+  label: me,
+  required: de,
+  labelTooltipIcon: Fe,
+  helpers: _e,
+  helperText: Ie,
+  errorMessage: he,
+  singleFileHelpLinkContainer: Le,
+  singleFileHelpLinkReservedSpace: ge,
+  helpLink: ke,
+  input: fe,
+  singleFileContainer: Pe,
+  singleFileInputContainer: Ne,
+  inputFileName: xe,
+  inputFileNamePlaceholder: Ce,
+  inputButton: Te,
+  multipleHelpText: be,
+  multipleInputButton: ye,
+  multipleFilesList: De,
+  multipleFilesListItem: Be,
+  multipleFilesListItemContent: Se,
+  multipleFilesListItemContentData: He,
+  multipleFilesListItemIconContainer: ve,
+  multipleFilesListItemIcon: we,
+  multipleFilesListItemText: Me,
+  multipleFilesListItemName: Ee,
+  multipleFilesListItemSize: ze,
+  multipleFilesListItemError: Re,
+  multipleFilesListItemIconError: je,
+  multipleFilesListItemIconDelete: Ke,
+  disabled: Ve
+}, w = se(null);
+function p() {
+  const e = ae(w);
+  if (!e)
+    throw new Error("FilePicker compound components must be used within a FilePicker.");
+  return e;
+}
+function qe(e) {
+  const l = e.name.toLowerCase();
+  return l.includes(".") ? l.split(".").pop() ?? "" : "";
+}
+function $e({
+  type: e = "single",
+  maxFiles: l = 1,
+  fileExtensionsAllowed: s,
+  maxSize: r,
+  queueFiles: h = !1,
+  disabled: c = !1,
+  isUploadDisabled: E = !1,
+  value: L,
+  label: z,
+  required: R = !1,
+  placeholder: j,
+  errorMessage: K,
+  helpText: V,
+  helpLink: q,
+  helpLinkText: $,
+  multipleHelpText: O,
+  multipleButtonHelpText: A,
+  labelTooltip: X,
+  onUpload: F,
+  onRemoveFile: g,
+  children: k
 }) {
-  var M, j;
-  const E = Q(), N = W(null), [l, I] = q(d ? d.map((i) => ({
-    file: i
-  })) : []), [T, B] = q(!1);
-  Z(() => {
-    const i = S(d ?? []);
-    I(i);
-  }, [d]);
-  const O = L.map((i) => `.${i.replace(/^\./, "")}`).join(","), H = L.join(", "), $ = (i) => {
-    const c = i.name.toLowerCase();
-    return c.includes(".") ? c.split(".").pop() ?? "" : "";
-  }, S = (i) => {
-    const m = l.length + i.length > F;
-    B(m);
-    const g = p ? p * 1024 * 1024 : Number.POSITIVE_INFINITY, b = new Set(L.map((_) => _.toLowerCase().replace(/^\./, "")));
-    return i.map((_) => {
-      const J = _.size <= g, Y = b.size === 0 || b.has($(_));
-      let C;
-      const G = p ? `up to ${p}MB` : "";
-      return J || (C = `File size is too large. Must be ${G}.`), Y || (C = `The file format is incorrect. Please make sure it is one of the extensions: ${H}.`), {
-        file: _,
-        error: C
+  const B = re(), f = oe(null), [u, P] = v(L ? L.map((n) => ({
+    file: n
+  })) : []), [J, T] = v(!1), b = s.join(", "), S = s.map((n) => `.${n.replace(/^\./, "")}`).join(","), N = _((n) => {
+    const o = r ? r * 1024 * 1024 : Number.POSITIVE_INFINITY, m = new Set(s.map((d) => d.toLowerCase().replace(/^\./, "")));
+    return n.map((d) => {
+      const le = d.size <= o, ie = m.size === 0 || m.has(qe(d));
+      let y;
+      const te = r ? `up to ${r}MB` : "";
+      return le || (y = `File size is too large. Must be ${te}.`), ie || (y = `The file format is incorrect. Please make sure it is one of the extensions: ${b}.`), {
+        file: d,
+        error: y
       };
     });
-  }, X = (i) => (i / 1024).toFixed(2) + " KB", z = () => {
-    var i;
-    s || (i = N.current) == null || i.click();
-  }, w = (i) => {
-    var c;
-    s || i.key === "Enter" && ((c = N.current) == null || c.click());
-  }, A = (i) => {
-    if (s) return;
-    const c = i.target.files, m = S(Array.from(c ?? []));
-    r === "multiple" && R ? (I([...l, ...m]), u == null || u(m)) : (I(m), u == null || u(m)), i.target.value = "";
-  }, y = (i) => {
-    if (s || !l) return;
-    const m = l.length - 1 > F;
-    B(m), I(l == null ? void 0 : l.filter((g) => g.file.name !== i)), f == null || f(i);
-  };
-  return /* @__PURE__ */ n("div", { className: ee(e.container, s && e.disabled), children: [
-    /* @__PURE__ */ n("label", { htmlFor: E, onClick: (i) => i.preventDefault(), className: e.label, children: [
-      /* @__PURE__ */ t("span", { title: x, className: e.labelText, children: x }),
-      K && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: e.required, children: "*" }),
-      o && /* @__PURE__ */ t(U, { content: o.content, size: o.size, theme: o.theme, tipSide: o.tipSide, tipAlignment: o.tipAlignment, startVisible: o.startVisible, children: /* @__PURE__ */ t(P, { icon: "ap-icon-info", className: e.labelTooltipIcon }) }),
-      r === "multiple" && /* @__PURE__ */ n("span", { className: e.multipleHelpText, children: [
-        "Only ",
-        H,
-        " files with max size of ",
-        p,
-        "MB"
-      ] })
-    ] }),
-    /* @__PURE__ */ t("input", { accept: O, multiple: r === "multiple", ref: N, type: "file", id: E, className: e.input, onChange: A }),
-    r === "single" && /* @__PURE__ */ n("div", { className: e.singleFileContainer, children: [
-      /* @__PURE__ */ n("div", { tabIndex: s ? -1 : 0, onClick: z, onKeyDown: w, className: e.singleFileInputContainer, children: [
-        /* @__PURE__ */ n("span", { className: e.inputFileName, children: [
-          l && l.length > 0 && /* @__PURE__ */ t("span", { className: e.inputFileNameText, children: l[0].file.name }),
-          l && l.length === 0 && /* @__PURE__ */ t("span", { className: e.inputFileNamePlaceholder, children: V })
-        ] }),
-        /* @__PURE__ */ t(h, { type: "tertiary", variant: "default", size: "md", icon: "ap-icon-upload", className: e.inputButton, tabIndex: -1, disabled: s, children: /* @__PURE__ */ t("span", { children: "Browse file" }) })
-      ] }),
-      /* @__PURE__ */ t("span", { className: e.singleFileHelpLinkReservedSpace, children: l && l.length > 0 && /* @__PURE__ */ t(h, { type: "tertiary", variant: "default", size: "md", icon: "ap-icon-delete", className: e.singleFileDeleteButton, onClick: () => y(l[0].file.name), disabled: s }) })
-    ] }),
-    r === "multiple" && /* @__PURE__ */ t(h, { type: "secondary", variant: "default", size: "md", icon: "ap-icon-upload", className: e.multipleInputButton, onClick: z, onKeyDown: w, disabled: s, children: /* @__PURE__ */ n("span", { children: [
-      "Browse files (max ",
-      F,
-      " files)"
-    ] }) }),
-    /* @__PURE__ */ n("div", { className: e.helpers, children: [
-      a || T || (M = l[0]) != null && M.error ? /* @__PURE__ */ n("span", { title: a, className: e.errorMessage, children: [
-        r === "single" && (a || ((j = l[0]) == null ? void 0 : j.error)),
-        r === "multiple" && (a || (T ? `You can only upload up to ${F} files.` : ""))
-      ] }) : k && r === "single" && /* @__PURE__ */ t("span", { title: k, className: e.helperText, children: k }),
-      r === "single" && D && v && /* @__PURE__ */ n("span", { className: e.singleFileHelpLinkContainer, children: [
-        /* @__PURE__ */ t("a", { href: D, className: e.helpLink, target: "_blank", rel: "noopener noreferrer", tabIndex: s ? -1 : 0, children: v }),
-        /* @__PURE__ */ t("span", { className: e.singleFileHelpLinkReservedSpace })
-      ] })
-    ] }),
-    r === "multiple" && l && (l == null ? void 0 : l.length) > 0 && /* @__PURE__ */ t("ul", { className: e.multipleFilesList, children: l == null ? void 0 : l.map((i, c) => /* @__PURE__ */ t("li", { className: e.multipleFilesListItem, children: /* @__PURE__ */ n("div", { className: e.multipleFilesListItemContent, children: [
-      /* @__PURE__ */ t("span", { className: e.multipleFilesListItemIconContainer, children: /* @__PURE__ */ t(P, { icon: "ap-icon-document", className: e.multipleFilesListItemIcon }) }),
-      /* @__PURE__ */ n("div", { className: e.multipleFilesListItemContentData, children: [
-        /* @__PURE__ */ n("div", { className: e.multipleFilesListItemText, children: [
-          /* @__PURE__ */ t("span", { className: e.multipleFilesListItemName, children: i.file.name }),
-          /* @__PURE__ */ t("span", { className: e.multipleFilesListItemSize, children: X(i.file.size) }),
-          i.error && /* @__PURE__ */ n("span", { className: e.multipleFilesListItemError, children: [
-            /* @__PURE__ */ t(P, { icon: "ap-icon-alert", className: e.multipleFilesListItemIconError }),
-            i.error
-          ] })
-        ] }),
-        /* @__PURE__ */ t(h, { type: "tertiary", variant: "default", size: "sm", onClick: () => y(i.file.name), icon: "ap-icon-delete", iconClassName: e.multipleFilesListItemIconDelete, disabled: s })
-      ] })
-    ] }) }, c)) })
+  }, [s, b, r]), H = _((n) => {
+    const o = u.length;
+    return T(o + n.length > l), N(n);
+  }, [l, u.length, N]);
+  ce(() => {
+    const n = N(L ?? []);
+    P(n), T(n.length > l);
+  }, [L, l, N]);
+  const Y = _((n) => (n / 1024).toFixed(2) + " KB", []), G = _(() => {
+    var n;
+    c || (n = f.current) == null || n.click();
+  }, [c]), Q = _((n) => {
+    var o;
+    c || n.key === "Enter" && ((o = f.current) == null || o.click());
+  }, [c]), W = _((n) => {
+    if (c) return;
+    const o = n.target.files, m = H(Array.from(o ?? []));
+    if (e === "multiple" && h) {
+      const d = [...u, ...m];
+      P(d), F == null || F(d);
+    } else
+      P(m), F == null || F(m);
+    n.target.value = "";
+  }, [c, e, h, u, H, F]), Z = _((n) => {
+    if (c || !u) return;
+    const o = u.filter((m) => m.file.name !== n);
+    T(o.length > l), P(o), g == null || g(n);
+  }, [c, u, l, g]), U = {
+    id: B,
+    type: e,
+    maxFiles: l,
+    fileExtensionsAllowed: s,
+    fileExtensionsAllowedText: b,
+    maxSize: r,
+    queueFiles: h,
+    disabled: c,
+    isUploadDisabled: E,
+    uploadedFiles: u,
+    isMaxFilesExceeded: J,
+    label: z,
+    required: R,
+    placeholder: j,
+    errorMessage: K,
+    helpText: V,
+    helpLink: q,
+    helpLinkText: $,
+    multipleHelpText: O,
+    multipleButtonHelpText: A,
+    labelTooltip: X,
+    accept: S,
+    inputRef: f,
+    triggerInput: G,
+    handleKeyDown: Q,
+    handleRemoveFile: Z,
+    displayFileSize: Y
+  }, ee = k != null && (Array.isArray(k) ? k.length > 0 : !0);
+  return /* @__PURE__ */ a(w.Provider, { value: U, children: [
+    /* @__PURE__ */ i("input", { accept: S, multiple: e === "multiple", ref: f, type: "file", id: B, className: t.input, onChange: W }),
+    /* @__PURE__ */ i("div", { className: C(t.container, c && t.disabled), children: ee ? k : /* @__PURE__ */ i(Oe, {}) })
+  ] });
+}
+function Oe() {
+  const e = p();
+  return /* @__PURE__ */ a(ne, { children: [
+    /* @__PURE__ */ i(I.Label, {}),
+    e.type === "single" && /* @__PURE__ */ i(I.SingleFileRow, { children: /* @__PURE__ */ i(I.BrowseButton, {}) }),
+    e.type === "single" && e.uploadedFiles.length > 0 && /* @__PURE__ */ i("span", { className: t.singleFileHelpLinkReservedSpace, children: /* @__PURE__ */ i(I.SingleFileDeleteButton, {}) }),
+    e.type === "multiple" && /* @__PURE__ */ i(I.BrowseButton, {}),
+    /* @__PURE__ */ i(I.HelpText, {}),
+    /* @__PURE__ */ i(I.UploadedFilesList, {})
+  ] });
+}
+function Ae({
+  children: e
+}) {
+  const l = p(), s = e ?? l.label;
+  return /* @__PURE__ */ a("label", { htmlFor: l.id, onClick: (r) => r.preventDefault(), className: C(t.label, l.type === "multiple" && t.labelMultiple), children: [
+    /* @__PURE__ */ i("span", { title: l.label, className: t.labelText, children: s }),
+    l.required && /* @__PURE__ */ i("span", { "aria-hidden": "true", className: t.required, children: "*" }),
+    l.labelTooltip && /* @__PURE__ */ i(pe, { content: l.labelTooltip.content, size: l.labelTooltip.size, theme: l.labelTooltip.theme, tipSide: l.labelTooltip.tipSide, tipAlignment: l.labelTooltip.tipAlignment, startVisible: l.labelTooltip.startVisible, children: /* @__PURE__ */ i(D, { icon: "ap-icon-info", className: t.labelTooltipIcon }) }),
+    l.type === "multiple" && l.multipleHelpText && /* @__PURE__ */ i("span", { className: t.multipleHelpText, children: l.multipleHelpText })
+  ] });
+}
+function Xe({
+  children: e,
+  className: l
+}) {
+  const s = p();
+  return s.type === "multiple" ? /* @__PURE__ */ i(x, { type: "secondary", variant: "default", size: "md", icon: "ap-icon-upload", className: C(t.multipleInputButton, l), onClick: s.triggerInput, onKeyDown: s.handleKeyDown, disabled: s.disabled || s.isUploadDisabled, children: /* @__PURE__ */ i("span", { children: e ?? `Browse files ${s.multipleButtonHelpText ?? ""}` }) }) : /* @__PURE__ */ i(x, { type: "tertiary", variant: "default", size: "md", icon: "ap-icon-upload", className: C(t.inputButton, l), tabIndex: -1, disabled: s.disabled || s.isUploadDisabled, onClick: (r) => {
+    r.preventDefault(), r.stopPropagation(), s.triggerInput();
+  }, children: /* @__PURE__ */ i("span", { children: e ?? "Browse file" }) });
+}
+function Je({
+  children: e
+}) {
+  return p().type !== "single" ? null : /* @__PURE__ */ i("div", { className: t.singleFileContainer, children: e });
+}
+function Ye({
+  children: e
+}) {
+  const l = p();
+  return l.type !== "single" ? null : /* @__PURE__ */ a("div", { tabIndex: l.disabled ? -1 : 0, onClick: l.triggerInput, onKeyDown: l.handleKeyDown, className: t.singleFileInputContainer, children: [
+    /* @__PURE__ */ i("span", { className: t.inputFileName, children: l.uploadedFiles.length > 0 ? /* @__PURE__ */ i("span", { className: t.inputFileNameText, children: l.uploadedFiles[0].file.name }) : /* @__PURE__ */ i("span", { className: t.inputFileNamePlaceholder, children: l.placeholder }) }),
+    e
   ] });
 }
+function Ge() {
+  return p().type !== "single" ? null : /* @__PURE__ */ i("span", { className: t.singleFileHelpLinkReservedSpace, children: /* @__PURE__ */ i(M, {}) });
+}
+function M() {
+  const e = p();
+  if (e.type !== "single" || e.uploadedFiles.length === 0) return null;
+  const l = e.uploadedFiles[0].file.name;
+  return /* @__PURE__ */ i(x, { type: "tertiary", variant: "default", size: "md", icon: "ap-icon-delete", className: t.singleFileDeleteButton, onClick: () => e.handleRemoveFile(l), disabled: e.disabled });
+}
+function Qe() {
+  var r, h;
+  const e = p(), l = e.errorMessage || e.isMaxFilesExceeded || e.type === "single" && ((r = e.uploadedFiles[0]) == null ? void 0 : r.error), s = e.type === "single" ? e.errorMessage || ((h = e.uploadedFiles[0]) == null ? void 0 : h.error) : e.errorMessage || (e.isMaxFilesExceeded ? `You can only upload up to ${e.maxFiles} files.` : "");
+  return /* @__PURE__ */ a("div", { className: t.helpers, children: [
+    l ? /* @__PURE__ */ i("span", { title: e.errorMessage, className: t.errorMessage, children: s }) : e.helpText && e.type === "single" && /* @__PURE__ */ i("span", { title: e.helpText, className: t.helperText, children: e.helpText }),
+    e.type === "single" && e.helpLink && e.helpLinkText && /* @__PURE__ */ a("span", { className: t.singleFileHelpLinkContainer, children: [
+      /* @__PURE__ */ i("a", { href: e.helpLink, className: t.helpLink, target: "_blank", rel: "noopener noreferrer", tabIndex: e.disabled ? -1 : 0, children: e.helpLinkText }),
+      /* @__PURE__ */ i("span", { className: t.singleFileHelpLinkReservedSpace })
+    ] })
+  ] });
+}
+function We() {
+  const e = p();
+  return e.type !== "multiple" || !e.uploadedFiles.length ? null : /* @__PURE__ */ i("ul", { className: t.multipleFilesList, children: e.uploadedFiles.map((l, s) => /* @__PURE__ */ i("li", { className: t.multipleFilesListItem, children: /* @__PURE__ */ a("div", { className: t.multipleFilesListItemContent, children: [
+    /* @__PURE__ */ i("span", { className: t.multipleFilesListItemIconContainer, children: /* @__PURE__ */ i(D, { icon: "ap-icon-document", className: t.multipleFilesListItemIcon }) }),
+    /* @__PURE__ */ a("div", { className: t.multipleFilesListItemContentData, children: [
+      /* @__PURE__ */ a("div", { className: t.multipleFilesListItemText, children: [
+        /* @__PURE__ */ i("span", { className: t.multipleFilesListItemName, children: l.file.name }),
+        /* @__PURE__ */ i("span", { className: t.multipleFilesListItemSize, children: e.displayFileSize(l.file.size) }),
+        l.error && /* @__PURE__ */ a("span", { className: t.multipleFilesListItemError, children: [
+          /* @__PURE__ */ i(D, { icon: "ap-icon-alert", className: t.multipleFilesListItemIconError }),
+          l.error
+        ] })
+      ] }),
+      /* @__PURE__ */ i(x, { type: "tertiary", variant: "default", size: "sm", onClick: () => e.handleRemoveFile(l.file.name), icon: "ap-icon-delete", iconClassName: t.multipleFilesListItemIconDelete, disabled: e.disabled })
+    ] })
+  ] }) }, s)) });
+}
+const I = Object.assign($e, {
+  Label: Ae,
+  BrowseButton: Xe,
+  HelpText: Qe,
+  UploadedFilesList: We,
+  SingleFileContainer: Je,
+  SingleFileRow: Ye,
+  SingleFileActions: Ge,
+  SingleFileDeleteButton: M
+});
 export {
-  qe as default
+  I as default,
+  p as useFilePickerContext
 };

package/dist/components/FilePicker/FilePicker.test.js

@@ -1,8 +1,155 @@
-import { jsx as e } from "react/jsx-runtime";
-import l from "./FilePicker.js";
-import { d as i, i as r, r as t, g as o } from "../../vi.bdSIJ99Y-017e_Pkz.js";
-i("FilePicker", () => {
-  r("should render", () => {
-    t(/* @__PURE__ */ e(l, { type: "single", fileExtensionsAllowed: ["xlsx"], maxSize: 1, maxFiles: 10, label: "Label", required: !0, placeholder: "Select a file", helpText: "Help text", helpLink: "https://example.com", helpLinkText: "Help link" })), o(!0).toBe(!0);
+import { jsx as i } from "react/jsx-runtime";
+import { d as h, i as o, r as n, g as e, s as l, w as x, v as f, f as B } from "../../vi.bdSIJ99Y-017e_Pkz.js";
+import { u as r } from "../../index-DkTDHhag.js";
+import s from "./FilePicker.js";
+const a = {
+  fileExtensionsAllowed: ["xlsx", "csv"],
+  maxSize: 5,
+  maxFiles: 10,
+  label: "Upload files",
+  required: !0,
+  placeholder: "Select a file",
+  helpText: "Help text",
+  helpLink: "https://example.com",
+  helpLinkText: "Help link"
+};
+function d(t, c = 100, u = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
+  return new File(["x".repeat(c)], t, {
+    type: u
+  });
+}
+h("FilePicker", () => {
+  h("Rendering", () => {
+    o("should render with required props", () => {
+      n(/* @__PURE__ */ i(s, { type: "single", ...a })), e(l.getByText("Upload files")).toBeInTheDocument(), e(l.getByText("Select a file")).toBeInTheDocument(), e(l.getByText("Browse file")).toBeInTheDocument();
+    }), o("should render required asterisk when required is true", () => {
+      n(/* @__PURE__ */ i(s, { type: "single", ...a, required: !0 }));
+      const t = document.querySelector('[aria-hidden="true"]');
+      e(t).toBeInTheDocument(), e(t).toHaveTextContent("*");
+    }), o("should render single mode with Browse file button", () => {
+      n(/* @__PURE__ */ i(s, { type: "single", ...a })), e(l.getByText("Browse file")).toBeInTheDocument(), e(l.queryByText(/Browse files \(max/)).not.toBeInTheDocument();
+    }), o("should render multiple mode with Browse files button and max count", () => {
+      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, maxFiles: 5, multipleHelpText: "Only xlsx, csv files with max size of 5MB", multipleButtonHelpText: "(max 5 files)" })), e(l.getByText("Browse files (max 5 files)")).toBeInTheDocument(), e(l.getByText(/Only xlsx, csv files with max size of 5MB/)).toBeInTheDocument();
+    }), o("should display custom multipleHelpText when provided in multiple mode", () => {
+      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, multipleHelpText: "Custom extensions and size info" })), e(l.getByText("Custom extensions and size info")).toBeInTheDocument();
+    }), o("should not render multipleHelpText in single mode", () => {
+      n(/* @__PURE__ */ i(s, { type: "single", ...a, multipleHelpText: "This should not appear" })), e(l.queryByText("This should not appear")).not.toBeInTheDocument();
+    }), o("should display custom multipleButtonHelpText in button when provided in multiple mode", () => {
+      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, multipleButtonHelpText: "(max 3 files, 2MB each)" })), e(l.getByText("Browse files (max 3 files, 2MB each)")).toBeInTheDocument();
+    }), o("should render file input with correct accept and multiple attributes", () => {
+      n(/* @__PURE__ */ i(s, { type: "multiple", ...a }));
+      const t = l.getByTestId("file-picker-input");
+      e(t).toHaveAttribute("accept", ".xlsx,.csv"), e(t).toHaveAttribute("multiple");
+    }), o("should render single file input without multiple attribute", () => {
+      n(/* @__PURE__ */ i(s, { type: "single", ...a }));
+      const t = l.getByTestId("file-picker-input");
+      e(t).not.toHaveAttribute("multiple");
+    }), o("should display selected file name in single mode", async () => {
+      const t = d("report.xlsx");
+      n(/* @__PURE__ */ i(s, { type: "single", ...a }));
+      const c = l.getByTestId("file-picker-input");
+      await r.upload(c, t), await x(() => {
+        e(l.getByText("report.xlsx")).toBeInTheDocument();
+      });
+    }), o("should display error message when provided", () => {
+      n(/* @__PURE__ */ i(s, { type: "single", ...a, errorMessage: "Please select a file" })), e(l.getByText("Please select a file")).toBeInTheDocument();
+    });
+  }), h("onUpload", () => {
+    o("should call onUpload with uploaded file when single file is selected", async () => {
+      const t = f.fn(), c = d("document.xlsx");
+      n(/* @__PURE__ */ i(s, { type: "single", ...a, onUpload: t }));
+      const u = l.getByTestId("file-picker-input");
+      await r.upload(u, c), await x(() => {
+        e(t).toHaveBeenCalledTimes(1), e(t).toHaveBeenCalledWith([e.objectContaining({
+          file: e.any(File),
+          error: void 0
+        })]), e(t.mock.calls[0][0][0].file.name).toBe("document.xlsx");
+      });
+    }), o("should call onUpload with all selected files when multiple files selected (non-queue)", async () => {
+      const t = f.fn(), c = d("a.xlsx"), u = d("b.xlsx");
+      n(/* @__PURE__ */ i(s, { type: "multiple", queueFiles: !1, ...a, onUpload: t }));
+      const m = l.getByTestId("file-picker-input");
+      await r.upload(m, [c, u]), await x(() => {
+        e(t).toHaveBeenCalledTimes(1);
+        const p = t.mock.calls[0][0];
+        e(p).toHaveLength(2), e(p[0].file.name).toBe("a.xlsx"), e(p[1].file.name).toBe("b.xlsx");
+      });
+    }), o("should call onUpload with accumulated files when queueFiles is true", async () => {
+      const t = f.fn(), c = d("first.xlsx"), u = d("second.xlsx");
+      n(/* @__PURE__ */ i(s, { type: "multiple", queueFiles: !0, ...a, maxFiles: 10, onUpload: t }));
+      const m = l.getByTestId("file-picker-input");
+      await r.upload(m, c), await x(() => {
+        e(t).toHaveBeenCalledTimes(1);
+        const p = t.mock.calls[0][0];
+        e(p).toHaveLength(1), e(p[0].file.name).toBe("first.xlsx");
+      }), await r.upload(m, u), await x(() => {
+        e(t).toHaveBeenCalledTimes(2);
+        const p = t.mock.calls[1][0];
+        e(p).toHaveLength(2), e(p[0].file.name).toBe("first.xlsx"), e(p[1].file.name).toBe("second.xlsx");
+      });
+    }), o("should include validation error in onUpload when file extension is invalid", async () => {
+      const t = f.fn(), c = d("document.pdf", 100, "application/pdf");
+      n(/* @__PURE__ */ i(s, { type: "single", ...a, fileExtensionsAllowed: ["xlsx"], onUpload: t }));
+      const u = l.getByTestId("file-picker-input");
+      B.change(u, {
+        target: {
+          files: [c]
+        }
+      }), await x(() => {
+        e(t).toHaveBeenCalledWith([e.objectContaining({
+          file: e.any(File),
+          error: e.stringContaining("file format is incorrect")
+        })]);
+      });
+    });
+  }), h("onRemoveFile", () => {
+    o("should call onRemoveFile when remove button is clicked in single mode", async () => {
+      const t = f.fn(), c = d("to-remove.xlsx");
+      n(/* @__PURE__ */ i(s, { type: "single", ...a, onRemoveFile: t }));
+      const u = l.getByTestId("file-picker-input");
+      await r.upload(u, c), await x(() => {
+        e(l.getByText("to-remove.xlsx")).toBeInTheDocument();
+      });
+      const m = l.getByTestId("file-picker-remove-single");
+      await r.click(m), e(t).toHaveBeenCalledWith("to-remove.xlsx");
+    }), o("should call onRemoveFile when remove button is clicked in multiple mode", async () => {
+      const t = f.fn(), c = d("one.xlsx"), u = d("two.xlsx");
+      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, onRemoveFile: t }));
+      const m = l.getByTestId("file-picker-input");
+      await r.upload(m, [c, u]), await x(() => {
+        e(l.getByText("one.xlsx")).toBeInTheDocument(), e(l.getByText("two.xlsx")).toBeInTheDocument();
+      });
+      const p = l.getByTestId("file-picker-remove-two.xlsx");
+      await r.click(p), e(t).toHaveBeenCalledWith("two.xlsx");
+    });
+  }), h("Disabled state", () => {
+    o("should not call onUpload when disabled and file is selected", async () => {
+      const t = f.fn(), c = d("doc.xlsx");
+      n(/* @__PURE__ */ i(s, { type: "single", ...a, disabled: !0, onUpload: t }));
+      const u = l.getByTestId("file-picker-input");
+      await r.upload(u, c), e(t).not.toHaveBeenCalled();
+    }), o("should not call onRemoveFile when disabled and remove is clicked", async () => {
+      const t = f.fn(), c = d("doc.xlsx");
+      n(/* @__PURE__ */ i(s, { type: "single", ...a, disabled: !0, value: [c], onRemoveFile: t })), e(l.getByText("doc.xlsx")).toBeInTheDocument();
+      const u = l.getByTestId("file-picker-remove-single");
+      e(u).toBeDisabled(), await r.click(u), e(t).not.toHaveBeenCalled();
+    });
+  }), h("Controlled value", () => {
+    o("should display files from value prop", () => {
+      const t = d("controlled.xlsx");
+      n(/* @__PURE__ */ i(s, { type: "single", ...a, value: [t] })), e(l.getByText("controlled.xlsx")).toBeInTheDocument();
+    }), o("should display multiple files from value prop", () => {
+      const t = [d("a.xlsx"), d("b.xlsx")];
+      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, value: t })), e(l.getByText("a.xlsx")).toBeInTheDocument(), e(l.getByText("b.xlsx")).toBeInTheDocument();
+    });
+  }), h("Max files exceeded", () => {
+    o("should show max files exceeded message when over limit in multiple mode", async () => {
+      const t = [d("1.xlsx"), d("2.xlsx"), d("3.xlsx")];
+      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, maxFiles: 2 }));
+      const c = l.getByTestId("file-picker-input");
+      await r.upload(c, t), await x(() => {
+        e(l.getByText(/You can only upload up to 2 files/)).toBeInTheDocument();
+      });
+    });
   });
 });

package/dist/main.d.ts

@@ -9,7 +9,7 @@ export { default as Toggle } from './components/Toggle/Toggle.tsx';
 export { default as Banner } from './components/Banner/Banner.tsx';
 export { default as Ghost } from './components/Ghost/Ghost.tsx';
 export { default as Dropdown, type DropdownOption } from './components/Dropdown/Dropdown.tsx';
-export { default as FilePicker } from './components/FilePicker/FilePicker.tsx';
+export { default as FilePicker, useFilePickerContext, type FilePickerContextValue, } from './components/FilePicker/FilePicker.tsx';
 export { default as Search } from './components/Search/Search.tsx';
 export { default as Toast } from './components/Toast/Toast.tsx';
 export { default as ToastProvider } from './components/ToastProvider/ToastProvider.tsx';
@@ -18,7 +18,7 @@ export type { ToastProviderProps, ToastOptions, ToastVariant, UseToastReturn, An
 export { default as Creatable } from './components/Creatable/Creatable.tsx';
 export { default as SplitButton, type ActionDropdownOption, } from './components/SplitButton/SplitButton.tsx';
 export { default as DragAndDrop, type UploadFile, type ValidationResult, type ValidationContext, type ValidationErrorCode, type Validator, type DragAndDropTexts, } from './components/DragAndDrop/DragAndDrop.tsx';
-export { defaultValidator, composeValidators, } from './components/DragAndDrop/DragAndDrop.utils';
+export { defaultValidator, composeValidators } from './components/DragAndDrop/DragAndDrop.utils';
 export { default as Tab } from './components/Tab/Tab.tsx';
 export { default as TabNavigation } from './components/TabNavigation/TabNavigation.tsx';
 export { default as Dialog } from './components/Dialog/Dialog.tsx';

package/dist/main.js

@@ -1,61 +1,62 @@
-import { default as r } from "./components/Button/Button.js";
-import { default as e } from "./components/Checkbox/Checkbox.js";
+import { default as e } from "./components/Button/Button.js";
+import { default as t } from "./components/Checkbox/Checkbox.js";
 import { default as s } from "./components/Icon/Icon.js";
-import { default as d } from "./components/Input/Input.js";
+import { default as l } from "./components/Input/Input.js";
 import { default as u } from "./components/Radio/Radio.js";
 import { default as m } from "./components/RadioGroup/RadioGroup.js";
 import { default as n } from "./components/Textarea/Textarea.js";
 import { default as g } from "./components/Toggle/Toggle.js";
 import { default as b } from "./components/Banner/Banner.js";
 import { default as D } from "./components/Ghost/Ghost.js";
-import { default as v } from "./components/Dropdown/Dropdown.js";
-import { default as k } from "./components/FilePicker/FilePicker.js";
-import { default as F } from "./components/Search/Search.js";
+import { default as k } from "./components/Dropdown/Dropdown.js";
+import { default as C, useFilePickerContext as F } from "./components/FilePicker/FilePicker.js";
+import { default as S } from "./components/Search/Search.js";
 import { default as I } from "./components/Toast/Toast.js";
-import { T as P } from "./ToastProvider-D5LImZ-Q.js";
-import { u as V } from "./useToast-Cz5MGKnw.js";
-import { default as A } from "./components/Creatable/Creatable.js";
-import { default as j } from "./components/SplitButton/SplitButton.js";
-import { default as y } from "./components/DragAndDrop/DragAndDrop.js";
-import { c as E, d as H } from "./DragAndDrop.utils-D3xTV9EK.js";
-import { default as K } from "./components/Tab/Tab.js";
-import { default as O } from "./components/TabNavigation/TabNavigation.js";
-import { default as U } from "./components/Dialog/Dialog.js";
-import { default as X } from "./components/TagsFields/TagsFields.js";
-import { default as Z } from "./components/NavBar/NavBar.js";
-import { default as $ } from "./components/Tag/Tag.js";
-import { default as ao } from "./components/Tooltip/Tooltip.js";
+import { T as R } from "./ToastProvider-D5LImZ-Q.js";
+import { u as w } from "./useToast-Cz5MGKnw.js";
+import { default as L } from "./components/Creatable/Creatable.js";
+import { default as q } from "./components/SplitButton/SplitButton.js";
+import { default as z } from "./components/DragAndDrop/DragAndDrop.js";
+import { c as H, d as J } from "./DragAndDrop.utils-D3xTV9EK.js";
+import { default as M } from "./components/Tab/Tab.js";
+import { default as Q } from "./components/TabNavigation/TabNavigation.js";
+import { default as W } from "./components/Dialog/Dialog.js";
+import { default as Y } from "./components/TagsFields/TagsFields.js";
+import { default as _ } from "./components/NavBar/NavBar.js";
+import { default as oo } from "./components/Tag/Tag.js";
+import { default as eo } from "./components/Tooltip/Tooltip.js";
 import { default as to } from "./components/Spinner/Spinner.js";
-import { a as fo } from "./ap-logos-Cl1TR5nm.js";
+import { a as so } from "./ap-logos-Cl1TR5nm.js";
 import './assets/main.css';export {
   b as Banner,
-  r as Button,
-  e as Checkbox,
-  A as Creatable,
-  U as Dialog,
-  y as DragAndDrop,
-  v as Dropdown,
-  k as FilePicker,
+  e as Button,
+  t as Checkbox,
+  L as Creatable,
+  W as Dialog,
+  z as DragAndDrop,
+  k as Dropdown,
+  C as FilePicker,
   D as Ghost,
   s as Icon,
-  d as Input,
-  Z as NavBar,
+  l as Input,
+  _ as NavBar,
   u as Radio,
   m as RadioGroup,
-  F as Search,
+  S as Search,
   to as Spinner,
-  j as SplitButton,
-  K as Tab,
-  O as TabNavigation,
-  $ as Tag,
-  X as TagsFields,
+  q as SplitButton,
+  M as Tab,
+  Q as TabNavigation,
+  oo as Tag,
+  Y as TagsFields,
   n as Textarea,
   I as Toast,
-  P as ToastProvider,
+  R as ToastProvider,
   g as Toggle,
-  ao as Tooltip,
-  fo as apLogos,
-  E as composeValidators,
-  H as defaultValidator,
-  V as useToast
+  eo as Tooltip,
+  so as apLogos,
+  H as composeValidators,
+  J as defaultValidator,
+  F as useFilePickerContext,
+  w as useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alixpartners/ui-components",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "type": "module",
   "files": [
     "dist"