@codecademy/gamut 72.2.3-alpha.83b0a8.0 → 72.2.3-alpha.8ab930.0

package/agent-tools/skills/gamut-forms/SKILL.md

@@ -26,22 +26,6 @@ For typical product forms, prefer `GridForm` (declarative `fields`, `LayoutGrid`
 
 ---
 
-## SelectDropdown vs Select
-
-Use `Select` for standard single-select fields where bundle size matters and no special styling is needed. Use `SelectDropdown` when the design calls for any of:
-
-- Styled dropdown menu (react-select appearance)
-- Search / typeahead
-- Multi-select with tags
-- Creatable options
-- Option icons, subtitles, right labels, abbreviations, or grouped options
-
-`SelectDropdown` carries a larger JS dependency (react-select); don't reach for it as a default drop-in for `Select`.
-
-For full SelectDropdown API detail — controlled vs uncontrolled patterns, creatable options, react-select action metadata — use [`gamut-select-dropdown`](../gamut-select-dropdown/SKILL.md). Generic `FormGroup` wiring (labels, errors, live regions) still applies as documented below.
-
----
-
 ## `FormGroup` (baseline)
 
 `packages/gamut/src/Form/elements/FormGroup.tsx`

package/dist/ConnectedForm/ConnectedFormGroup.js

@@ -13,7 +13,7 @@ const ErrorAnchor = /*#__PURE__*/_styled(Anchor, {
   label: "ErrorAnchor"
 })(css({
   color: 'feedback-error'
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Db25uZWN0ZWRGb3JtL0Nvbm5lY3RlZEZvcm1Hcm91cC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY29CIiwiZmlsZSI6Ii4uLy4uL3NyYy9Db25uZWN0ZWRGb3JtL0Nvbm5lY3RlZEZvcm1Hcm91cC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlRWZmZWN0LCB1c2VJZCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IFJlZ2lzdGVyT3B0aW9ucyB9IGZyb20gJ3JlYWN0LWhvb2stZm9ybSc7XG5cbmltcG9ydCB7IEZvcm1FcnJvciwgRm9ybUdyb3VwLCBGb3JtR3JvdXBMYWJlbCwgRm9ybUdyb3VwUHJvcHMgfSBmcm9tICcuLic7XG5pbXBvcnQgeyBBbmNob3IgfSBmcm9tICcuLi9BbmNob3InO1xuaW1wb3J0IHsgTWFya2Rvd24gfSBmcm9tICcuLi9NYXJrZG93bic7XG5pbXBvcnQgeyBJbmZvVGlwU3ViQ29tcG9uZW50UHJvcHMgfSBmcm9tICcuLi9UaXAvSW5mb1RpcC90eXBlLXV0aWxzJztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi9UeXBvZ3JhcGh5JztcbmltcG9ydCB7IENvbm5lY3RlZEZpZWxkLCBGaWVsZFByb3BzLCBTdWJtaXRDb250ZXh0UHJvcHMgfSBmcm9tICcuL3R5cGVzJztcbmltcG9ydCB7IGdldEVycm9yTWVzc2FnZSwgdXNlRmllbGQgfSBmcm9tICcuL3V0aWxzJztcblxuY29uc3QgRXJyb3JBbmNob3IgPSBzdHlsZWQoQW5jaG9yKShcbiAgY3NzKHtcbiAgICBjb2xvcjogJ2ZlZWRiYWNrLWVycm9yJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQ29ubmVjdGVkRm9ybUdyb3VwQmFzZVByb3BzXG4gIGV4dGVuZHMgT21pdDxcbiAgICBGb3JtR3JvdXBQcm9wcyxcbiAgICAnbGFiZWwnIHwgJ2Rpc2FibGVkJyB8ICdkZXNjcmlwdGlvbicgfCAnaHRtbEZvcidcbiAgPiB7XG4gIGN1c3RvbUVycm9yPzogc3RyaW5nO1xuICBlcnJvclR5cGU/OiAnaW5pdGlhbCcgfCAnYWJzb2x1dGUnO1xuICBoaWRlTGFiZWw/OiBib29sZWFuO1xuICBuYW1lOiBzdHJpbmc7XG4gIGxhYmVsOiBSZWFjdC5SZWFjdE5vZGU7XG4gIHJlcXVpcmVkPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIEluZm9UaXAgdG8gZGlzcGxheSBuZXh0IHRvIHRoZSBmaWVsZCBsYWJlbC4gVGhlIEluZm9UaXAgYnV0dG9uIGlzXG4gICAqIGF1dG9tYXRpY2FsbHkgbGFiZWxsZWQgYnkgdGhlIGZpZWxkIGxhYmVsLiBUbyBvdmVycmlkZSB0aGlzIGJlaGF2aW9yLFxuICAgKiBwcm92aWRlIGBhcmlhTGFiZWxgIG9yIGBhcmlhTGFiZWxsZWRieWAuXG4gICAqL1xuICBpbmZvdGlwPzogSW5mb1RpcFN1YkNvbXBvbmVudFByb3BzO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIENvbm5lY3RlZEZvcm1Hcm91cFByb3BzPFQgZXh0ZW5kcyBDb25uZWN0ZWRGaWVsZD5cbiAgZXh0ZW5kcyBTdWJtaXRDb250ZXh0UHJvcHMsXG4gICAgQ29ubmVjdGVkRm9ybUdyb3VwQmFzZVByb3BzIHtcbiAgLyoqXG4gICAqIEFuIG9iamVjdCBjb25zaXN0aW5nIG9mIGEgYGNvbXBvbmVudGAga2V5IHRvIHNwZWNpZnkgd2hhdCBDb25uZWN0ZWRGb3JtSW5wdXQgdG8gcmVuZGVyIC0gdGhlIHJlbWFpbmluZyBrZXkvdmFsdWUgcGFpcnMgYXJlIHRoYXQgY29tcG9uZW50cyBkZXNpcmVkIHByb3BzLlxuICAgKi9cbiAgZmllbGQ6IE9taXQ8UmVhY3QuQ29tcG9uZW50UHJvcHM8VD4sICduYW1lJyB8ICdkaXNhYmxlZCc+ICZcbiAgICBGaWVsZFByb3BzPFQ+ICYge1xuICAgICAgY3VzdG9tVmFsaWRhdGlvbnM/OiBSZWdpc3Rlck9wdGlvbnM7XG4gICAgfTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIENvbm5lY3RlZEZvcm1Hcm91cDxUIGV4dGVuZHMgQ29ubmVjdGVkRmllbGQ+KHtcbiAgY3VzdG9tRXJyb3IsXG4gIGNoaWxkcmVuLFxuICBkaXNhYmxlZCA9IGZhbHNlLFxuICBlcnJvclR5cGUgPSAnYWJzb2x1dGUnLFxuICBmaWVsZCxcbiAgaGlkZUxhYmVsLFxuICBpZCxcbiAgbGFiZWwsXG4gIG5hbWUsXG4gIGxhYmVsU2l6ZSxcbiAgc3BhY2luZyA9ICdmaXQnLFxuICBpc1NvbG9GaWVsZCxcbiAgaW5mb3RpcCxcbn06IENvbm5lY3RlZEZvcm1Hcm91cFByb3BzPFQ+KSB7XG4gIGNvbnN0IHsgY29tcG9uZW50OiBDb21wb25lbnQsIGN1c3RvbVZhbGlkYXRpb25zLCAuLi5yZXN0IH0gPSBmaWVsZDtcbiAgY29uc3QgeyBlcnJvciwgaXNGaXJzdEVycm9yLCBpc0Rpc2FibGVkLCBzZXRFcnJvciwgdmFsaWRhdGlvbiB9ID0gdXNlRmllbGQoe1xuICAgIG5hbWUsXG4gICAgZGlzYWJsZWQsXG4gICAgY3VzdG9tVmFsaWRhdGlvbnMsXG4gIH0pO1xuICBjb25zdCB1bmlxdWVJZFN1ZmZpeCA9IHVzZUlkKCk7XG4gIGNvbnN0IGh0bWxGb3JJZCA9IGAke25hbWV9LSR7dW5pcXVlSWRTdWZmaXh9YDtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChjdXN0b21FcnJvcikge1xuICAgICAgc2V0RXJyb3IobmFtZSwge1xuICAgICAgICB0eXBlOiAnbWFudWFsJyxcbiAgICAgICAgbWVzc2FnZTogY3VzdG9tRXJyb3IsXG4gICAgICB9KTtcbiAgICB9XG4gIH0sIFtjdXN0b21FcnJvciwgbmFtZSwgc2V0RXJyb3JdKTtcblxuICBjb25zdCBmaWVsZElkID0gdHlwZW9mIGlkID09PSAnc3RyaW5nJyA/IGlkIDogbmFtZTtcblxuICBjb25zdCByZW5kZXJlZExhYmVsID0gKFxuICAgIDxGb3JtR3JvdXBMYWJlbFxuICAgICAgZGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICBodG1sRm9yPXtmaWVsZElkfVxuICAgICAgaW5mb3RpcD17aW5mb3RpcH1cbiAgICAgIGlzU29sb0ZpZWxkPXtpc1NvbG9GaWVsZH1cbiAgICAgIHJlcXVpcmVkPXtCb29sZWFuKHZhbGlkYXRpb24/LnJlcXVpcmVkKX1cbiAgICAgIHNpemU9e2xhYmVsU2l6ZX1cbiAgICA+XG4gICAgICB7bGFiZWx9XG4gICAgPC9Gb3JtR3JvdXBMYWJlbD5cbiAgKTtcblxuICBjb25zdCB0ZXh0RXJyb3IgPSBjdXN0b21FcnJvciB8fCBnZXRFcnJvck1lc3NhZ2UoZXJyb3IpO1xuICBjb25zdCBzaG93RXJyb3IgPSAhISh0ZXh0RXJyb3IgJiYgIWhpZGVMYWJlbCk7XG4gIGNvbnN0IGVycm9ySWQgPSBzaG93RXJyb3IgPyBgJHtmaWVsZElkfV9lcnJvcmAgOiB1bmRlZmluZWQ7XG5cbiAgcmV0dXJuIChcbiAgICA8Rm9ybUdyb3VwIHNwYWNpbmc9e2hpZGVMYWJlbCA/ICd0aWdodCcgOiBzcGFjaW5nfT5cbiAgICAgIHtoaWRlTGFiZWwgPyA8VGV4dCBzY3JlZW5yZWFkZXI+e3JlbmRlcmVkTGFiZWx9PC9UZXh0PiA6IHJlbmRlcmVkTGFiZWx9XG4gICAgICA8Q29tcG9uZW50XG4gICAgICAgIHsuLi4ocmVzdCBhcyBhbnkpfVxuICAgICAgICBhcmlhLWRlc2NyaWJlZGJ5PXtlcnJvcklkfVxuICAgICAgICBhcmlhLWludmFsaWQ9e3Nob3dFcnJvcn1cbiAgICAgICAgY3VzdG9tVmFsaWRhdGlvbnM9e2N1c3RvbVZhbGlkYXRpb25zfVxuICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIGh0bWxGb3I9e2h0bWxGb3JJZH1cbiAgICAgICAgbmFtZT17bmFtZX1cbiAgICAgIC8+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgICB7c2hvd0Vycm9yICYmIChcbiAgICAgICAgPEZvcm1FcnJvclxuICAgICAgICAgIGFyaWEtbGl2ZT17aXNGaXJzdEVycm9yID8gJ2Fzc2VydGl2ZScgOiAnb2ZmJ31cbiAgICAgICAgICBpZD17ZXJyb3JJZH1cbiAgICAgICAgICByb2xlPXtpc0ZpcnN0RXJyb3IgPyAnYWxlcnQnIDogJ3N0YXR1cyd9XG4gICAgICAgICAgdmFyaWFudD17ZXJyb3JUeXBlfVxuICAgICAgICA+XG4gICAgICAgICAgPE1hcmtkb3duXG4gICAgICAgICAgICBpbmxpbmVcbiAgICAgICAgICAgIG92ZXJyaWRlcz17e1xuICAgICAgICAgICAgICBhOiB7XG4gICAgICAgICAgICAgICAgYWxsb3dlZEF0dHJpYnV0ZXM6IFsnaHJlZicsICd0YXJnZXQnXSxcbiAgICAgICAgICAgICAgICBjb21wb25lbnQ6IEVycm9yQW5jaG9yLFxuICAgICAgICAgICAgICAgIHByb2Nlc3NOb2RlOiAoXG4gICAgICAgICAgICAgICAgICBub2RlOiB1bmtub3duLFxuICAgICAgICAgICAgICAgICAgcHJvcHM6IHsgb25DbGljaz86ICgpID0+IHZvaWQgfVxuICAgICAgICAgICAgICAgICkgPT4ge1xuICAgICAgICAgICAgICAgICAgY29uc3QgeyBrZXk6IGVsZW1lbnRLZXksIC4uLnJlc3QgfSA9XG4gICAgICAgICAgICAgICAgICAgIHByb3BzIGFzIFJlYWN0LkNvbXBvbmVudFByb3BzPHR5cGVvZiBFcnJvckFuY2hvcj4gJiB7XG4gICAgICAgICAgICAgICAgICAgICAga2V5PzogUmVhY3QuS2V5O1xuICAgICAgICAgICAgICAgICAgICB9O1xuICAgICAgICAgICAgICAgICAgcmV0dXJuIDxFcnJvckFuY2hvciBrZXk9e2VsZW1lbnRLZXl9IHsuLi5yZXN0fSAvPjtcbiAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgfX1cbiAgICAgICAgICAgIHNraXBEZWZhdWx0T3ZlcnJpZGVzPXt7IGE6IHRydWUgfX1cbiAgICAgICAgICAgIHNwYWNpbmc9XCJub25lXCJcbiAgICAgICAgICAgIHRleHQ9e3RleHRFcnJvcn1cbiAgICAgICAgICAvPlxuICAgICAgICA8L0Zvcm1FcnJvcj5cbiAgICAgICl9XG4gICAgPC9Gb3JtR3JvdXA+XG4gICk7XG59XG4iXX0= */");
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Db25uZWN0ZWRGb3JtL0Nvbm5lY3RlZEZvcm1Hcm91cC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY29CIiwiZmlsZSI6Ii4uLy4uL3NyYy9Db25uZWN0ZWRGb3JtL0Nvbm5lY3RlZEZvcm1Hcm91cC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlRWZmZWN0LCB1c2VJZCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IFJlZ2lzdGVyT3B0aW9ucyB9IGZyb20gJ3JlYWN0LWhvb2stZm9ybSc7XG5cbmltcG9ydCB7IEZvcm1FcnJvciwgRm9ybUdyb3VwLCBGb3JtR3JvdXBMYWJlbCwgRm9ybUdyb3VwUHJvcHMgfSBmcm9tICcuLic7XG5pbXBvcnQgeyBBbmNob3IgfSBmcm9tICcuLi9BbmNob3InO1xuaW1wb3J0IHsgTWFya2Rvd24gfSBmcm9tICcuLi9NYXJrZG93bic7XG5pbXBvcnQgeyBJbmZvVGlwU3ViQ29tcG9uZW50UHJvcHMgfSBmcm9tICcuLi9UaXAvSW5mb1RpcC90eXBlLXV0aWxzJztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi9UeXBvZ3JhcGh5JztcbmltcG9ydCB7IENvbm5lY3RlZEZpZWxkLCBGaWVsZFByb3BzLCBTdWJtaXRDb250ZXh0UHJvcHMgfSBmcm9tICcuL3R5cGVzJztcbmltcG9ydCB7IGdldEVycm9yTWVzc2FnZSwgdXNlRmllbGQgfSBmcm9tICcuL3V0aWxzJztcblxuY29uc3QgRXJyb3JBbmNob3IgPSBzdHlsZWQoQW5jaG9yKShcbiAgY3NzKHtcbiAgICBjb2xvcjogJ2ZlZWRiYWNrLWVycm9yJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQ29ubmVjdGVkRm9ybUdyb3VwQmFzZVByb3BzXG4gIGV4dGVuZHMgT21pdDxcbiAgICBGb3JtR3JvdXBQcm9wcyxcbiAgICAnbGFiZWwnIHwgJ2Rpc2FibGVkJyB8ICdkZXNjcmlwdGlvbicgfCAnaHRtbEZvcidcbiAgPiB7XG4gIGN1c3RvbUVycm9yPzogc3RyaW5nO1xuICBlcnJvclR5cGU/OiAnaW5pdGlhbCcgfCAnYWJzb2x1dGUnO1xuICBoaWRlTGFiZWw/OiBib29sZWFuO1xuICBuYW1lOiBzdHJpbmc7XG4gIGxhYmVsOiBSZWFjdC5SZWFjdE5vZGU7XG4gIHJlcXVpcmVkPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIEluZm9UaXAgdG8gZGlzcGxheSBuZXh0IHRvIHRoZSBmaWVsZCBsYWJlbC4gVGhlIEluZm9UaXAgYnV0dG9uIGlzXG4gICAqIGF1dG9tYXRpY2FsbHkgbGFiZWxsZWQgYnkgdGhlIGZpZWxkIGxhYmVsLiBUbyBvdmVycmlkZSB0aGlzIGJlaGF2aW9yLFxuICAgKiBwcm92aWRlIGBhcmlhTGFiZWxgIG9yIGBhcmlhTGFiZWxsZWRieWAuXG4gICAqL1xuICBpbmZvdGlwPzogSW5mb1RpcFN1YkNvbXBvbmVudFByb3BzO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIENvbm5lY3RlZEZvcm1Hcm91cFByb3BzPFQgZXh0ZW5kcyBDb25uZWN0ZWRGaWVsZD5cbiAgZXh0ZW5kcyBTdWJtaXRDb250ZXh0UHJvcHMsXG4gICAgQ29ubmVjdGVkRm9ybUdyb3VwQmFzZVByb3BzIHtcbiAgLyoqXG4gICAqIEFuIG9iamVjdCBjb25zaXN0aW5nIG9mIGEgYGNvbXBvbmVudGAga2V5IHRvIHNwZWNpZnkgd2hhdCBDb25uZWN0ZWRGb3JtSW5wdXQgdG8gcmVuZGVyIC0gdGhlIHJlbWFpbmluZyBrZXkvdmFsdWUgcGFpcnMgYXJlIHRoYXQgY29tcG9uZW50cyBkZXNpcmVkIHByb3BzLlxuICAgKi9cbiAgZmllbGQ6IE9taXQ8UmVhY3QuQ29tcG9uZW50UHJvcHM8VD4sICduYW1lJyB8ICdkaXNhYmxlZCc+ICZcbiAgICBGaWVsZFByb3BzPFQ+ICYge1xuICAgICAgY3VzdG9tVmFsaWRhdGlvbnM/OiBSZWdpc3Rlck9wdGlvbnM7XG4gICAgfTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIENvbm5lY3RlZEZvcm1Hcm91cDxUIGV4dGVuZHMgQ29ubmVjdGVkRmllbGQ+KHtcbiAgY3VzdG9tRXJyb3IsXG4gIGNoaWxkcmVuLFxuICBkaXNhYmxlZCA9IGZhbHNlLFxuICBlcnJvclR5cGUgPSAnYWJzb2x1dGUnLFxuICBmaWVsZCxcbiAgaGlkZUxhYmVsLFxuICBpZCxcbiAgbGFiZWwsXG4gIG5hbWUsXG4gIGxhYmVsU2l6ZSxcbiAgc3BhY2luZyA9ICdmaXQnLFxuICBpc1NvbG9GaWVsZCxcbiAgaW5mb3RpcCxcbn06IENvbm5lY3RlZEZvcm1Hcm91cFByb3BzPFQ+KSB7XG4gIGNvbnN0IHsgY29tcG9uZW50OiBDb21wb25lbnQsIGN1c3RvbVZhbGlkYXRpb25zLCAuLi5yZXN0IH0gPSBmaWVsZDtcbiAgY29uc3QgeyBlcnJvciwgaXNGaXJzdEVycm9yLCBpc0Rpc2FibGVkLCBzZXRFcnJvciwgdmFsaWRhdGlvbiB9ID0gdXNlRmllbGQoe1xuICAgIG5hbWUsXG4gICAgZGlzYWJsZWQsXG4gICAgY3VzdG9tVmFsaWRhdGlvbnMsXG4gIH0pO1xuICBjb25zdCB1bmlxdWVJZFN1ZmZpeCA9IHVzZUlkKCk7XG4gIGNvbnN0IGh0bWxGb3JJZCA9IGAke25hbWV9LSR7dW5pcXVlSWRTdWZmaXh9YDtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChjdXN0b21FcnJvcikge1xuICAgICAgc2V0RXJyb3IobmFtZSwge1xuICAgICAgICB0eXBlOiAnbWFudWFsJyxcbiAgICAgICAgbWVzc2FnZTogY3VzdG9tRXJyb3IsXG4gICAgICB9KTtcbiAgICB9XG4gIH0sIFtjdXN0b21FcnJvciwgbmFtZSwgc2V0RXJyb3JdKTtcblxuICBjb25zdCBmaWVsZElkID0gdHlwZW9mIGlkID09PSAnc3RyaW5nJyA/IGlkIDogbmFtZTtcblxuICBjb25zdCByZW5kZXJlZExhYmVsID0gKFxuICAgIDxGb3JtR3JvdXBMYWJlbFxuICAgICAgZGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICBodG1sRm9yPXtpZCB8fCBodG1sRm9ySWR9XG4gICAgICBpbmZvdGlwPXtpbmZvdGlwfVxuICAgICAgaXNTb2xvRmllbGQ9e2lzU29sb0ZpZWxkfVxuICAgICAgcmVxdWlyZWQ9e0Jvb2xlYW4odmFsaWRhdGlvbj8ucmVxdWlyZWQpfVxuICAgICAgc2l6ZT17bGFiZWxTaXplfVxuICAgID5cbiAgICAgIHtsYWJlbH1cbiAgICA8L0Zvcm1Hcm91cExhYmVsPlxuICApO1xuXG4gIGNvbnN0IHRleHRFcnJvciA9IGN1c3RvbUVycm9yIHx8IGdldEVycm9yTWVzc2FnZShlcnJvcik7XG4gIGNvbnN0IHNob3dFcnJvciA9ICEhKHRleHRFcnJvciAmJiAhaGlkZUxhYmVsKTtcbiAgY29uc3QgZXJyb3JJZCA9IHNob3dFcnJvciA/IGAke2ZpZWxkSWR9X2Vycm9yYCA6IHVuZGVmaW5lZDtcblxuICByZXR1cm4gKFxuICAgIDxGb3JtR3JvdXAgc3BhY2luZz17aGlkZUxhYmVsID8gJ3RpZ2h0JyA6IHNwYWNpbmd9PlxuICAgICAge2hpZGVMYWJlbCA/IDxUZXh0IHNjcmVlbnJlYWRlcj57cmVuZGVyZWRMYWJlbH08L1RleHQ+IDogcmVuZGVyZWRMYWJlbH1cbiAgICAgIDxDb21wb25lbnRcbiAgICAgICAgey4uLihyZXN0IGFzIGFueSl9XG4gICAgICAgIGFyaWEtZGVzY3JpYmVkYnk9e2Vycm9ySWR9XG4gICAgICAgIGFyaWEtaW52YWxpZD17c2hvd0Vycm9yfVxuICAgICAgICBjdXN0b21WYWxpZGF0aW9ucz17Y3VzdG9tVmFsaWRhdGlvbnN9XG4gICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgaHRtbEZvcj17aHRtbEZvcklkfVxuICAgICAgICBuYW1lPXtuYW1lfVxuICAgICAgLz5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIHtzaG93RXJyb3IgJiYgKFxuICAgICAgICA8Rm9ybUVycm9yXG4gICAgICAgICAgYXJpYS1saXZlPXtpc0ZpcnN0RXJyb3IgPyAnYXNzZXJ0aXZlJyA6ICdvZmYnfVxuICAgICAgICAgIGlkPXtlcnJvcklkfVxuICAgICAgICAgIHJvbGU9e2lzRmlyc3RFcnJvciA/ICdhbGVydCcgOiAnc3RhdHVzJ31cbiAgICAgICAgICB2YXJpYW50PXtlcnJvclR5cGV9XG4gICAgICAgID5cbiAgICAgICAgICA8TWFya2Rvd25cbiAgICAgICAgICAgIGlubGluZVxuICAgICAgICAgICAgb3ZlcnJpZGVzPXt7XG4gICAgICAgICAgICAgIGE6IHtcbiAgICAgICAgICAgICAgICBhbGxvd2VkQXR0cmlidXRlczogWydocmVmJywgJ3RhcmdldCddLFxuICAgICAgICAgICAgICAgIGNvbXBvbmVudDogRXJyb3JBbmNob3IsXG4gICAgICAgICAgICAgICAgcHJvY2Vzc05vZGU6IChcbiAgICAgICAgICAgICAgICAgIG5vZGU6IHVua25vd24sXG4gICAgICAgICAgICAgICAgICBwcm9wczogeyBvbkNsaWNrPzogKCkgPT4gdm9pZCB9XG4gICAgICAgICAgICAgICAgKSA9PiB7XG4gICAgICAgICAgICAgICAgICBjb25zdCB7IGtleTogZWxlbWVudEtleSwgLi4ucmVzdCB9ID1cbiAgICAgICAgICAgICAgICAgICAgcHJvcHMgYXMgUmVhY3QuQ29tcG9uZW50UHJvcHM8dHlwZW9mIEVycm9yQW5jaG9yPiAmIHtcbiAgICAgICAgICAgICAgICAgICAgICBrZXk/OiBSZWFjdC5LZXk7XG4gICAgICAgICAgICAgICAgICAgIH07XG4gICAgICAgICAgICAgICAgICByZXR1cm4gPEVycm9yQW5jaG9yIGtleT17ZWxlbWVudEtleX0gey4uLnJlc3R9IC8+O1xuICAgICAgICAgICAgICAgIH0sXG4gICAgICAgICAgICAgIH0sXG4gICAgICAgICAgICB9fVxuICAgICAgICAgICAgc2tpcERlZmF1bHRPdmVycmlkZXM9e3sgYTogdHJ1ZSB9fVxuICAgICAgICAgICAgc3BhY2luZz1cIm5vbmVcIlxuICAgICAgICAgICAgdGV4dD17dGV4dEVycm9yfVxuICAgICAgICAgIC8+XG4gICAgICAgIDwvRm9ybUVycm9yPlxuICAgICAgKX1cbiAgICA8L0Zvcm1Hcm91cD5cbiAgKTtcbn1cbiJdfQ== */");
 export function ConnectedFormGroup({
   customError,
   children,
@@ -58,7 +58,7 @@ export function ConnectedFormGroup({
   const fieldId = typeof id === 'string' ? id : name;
   const renderedLabel = /*#__PURE__*/_jsx(FormGroupLabel, {
     disabled: isDisabled,
-    htmlFor: fieldId,
+    htmlFor: id || htmlForId,
     infotip: infotip,
     isSoloField: isSoloField,
     required: Boolean(validation?.required),

package/dist/Form/SelectDropdown/SelectDropdown.js

@@ -1,14 +1,28 @@
 import { useTheme } from '@emotion/react';
-import { useId, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import * as React from 'react';
-import { onFocus } from './core/accessibility';
-import { defaultComponents } from './core/constants';
-import { getMemoizedStyles } from './core/styles';
-import { resolveNoOptionsMessage } from './core/utils';
-import { formatGroupLabel, formatOptionLabel, SelectDropdownContext, TypedReactSelect } from './elements';
-import { useSelectHandlers } from './hooks/useSelectHandlers';
-import { useSelectOptions } from './hooks/useSelectOptions';
+import { parseOptions } from '../utils';
+import { AbbreviatedSingleValue, CustomContainer, CustomInput, CustomValueContainer, DropdownButton, formatGroupLabel, formatOptionLabel, IconOption, MultiValueRemoveButton, MultiValueWithColorMode, onFocus, RemoveAllButton, SelectDropdownContext, TypedReactSelect } from './elements';
+import { getMemoizedStyles } from './styles';
+import { filterValueFromOptions, isMultipleSelectProps, isOptionsGrouped, isSingleSelectProps, removeValueFromSelectedOptions } from './utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+const defaultProps = {
+  name: undefined,
+  components: {
+    DropdownIndicator: DropdownButton,
+    IndicatorSeparator: () => null,
+    ClearIndicator: RemoveAllButton,
+    SelectContainer: CustomContainer,
+    ValueContainer: CustomValueContainer,
+    MultiValue: MultiValueWithColorMode,
+    MultiValueRemove: MultiValueRemoveButton,
+    Option: IconOption,
+    SingleValue: AbbreviatedSingleValue,
+    Input: CustomInput
+  }
+};
+const onChangeAction = 'select-option';
+
 /**
  * A flexible dropdown select component built on top of react-select.
  *
@@ -59,58 +73,101 @@ export const SelectDropdown = ({
   disabled,
   dropdownWidth,
   error,
-  formatCreateLabel = inputValue => `Add "${inputValue}"`,
   id,
   inputProps,
   inputWidth,
-  isCreatable = false,
-  isSearchable: isSearchableProp = false,
-  isValidNewOption,
+  isSearchable = false,
   menuAlignment = 'left',
   multiple,
   name,
   onChange,
-  onCreateOption,
-  onInputChange,
   options,
   placeholder = 'Select an option',
   shownOptionsLimit = 6,
   size,
-  validationMessage,
   value,
   zIndex,
   ...rest
 }) => {
-  // isSearchable is forced true when isCreatable is true (CreatableSelect requires a text input)
-  const isSearchable = isCreatable || isSearchableProp;
   const rawInputId = useId();
   const inputId = name ?? `${id}-select-dropdown-${rawInputId}`;
+  const [activated, setActivated] = useState(false);
+  const [currentFocusedValue, setCurrentFocusedValue] = useState(undefined);
+
+  // these are used to programatically manage the focus state of our multi-select options + 'Remove all' button
   const removeAllButtonRef = useRef(null);
   const selectInputRef = useRef(null);
-  const [currentFocusedValue, setCurrentFocusedValue] = useState(undefined);
-  const {
-    selectOptions,
-    parsedValue
-  } = useSelectOptions({
-    options,
-    id,
-    size,
-    value: value
-  });
-  const {
-    activated,
-    multiValues,
-    changeHandler,
-    keyPressHandler
-  } = useSelectHandlers({
-    onChange,
-    multiple,
-    onCreateOption,
-    selectOptions,
-    value,
-    currentFocusedValue,
-    removeAllButtonRef
-  });
+  const selectOptions = useMemo(() => {
+    if (!options || Array.isArray(options) && !options.length || typeof options === 'object' && !Array.isArray(options) && Object.keys(options).length === 0) {
+      return [];
+    }
+    if (isOptionsGrouped(options)) {
+      return options;
+    }
+    return parseOptions({
+      options,
+      id,
+      size
+    });
+  }, [options, id, size]);
+  const parsedValue = useMemo(() => {
+    if (isOptionsGrouped(selectOptions)) {
+      for (const group of selectOptions) {
+        if (group.options) {
+          const foundOption = group.options.find(option => option.value === value);
+          if (foundOption) return foundOption;
+        }
+      }
+      return undefined;
+    }
+    return selectOptions.find(option => option.value === value);
+  }, [selectOptions, value]);
+  const [multiValues, setMultiValues] = useState(multiple &&
+  // To keep this efficient for non-multiSelect
+  filterValueFromOptions(selectOptions, value, isOptionsGrouped(selectOptions)));
+
+  // If the caller changes the initial value, let's update our value to match.
+  useEffect(() => {
+    const newMultiValues = filterValueFromOptions(selectOptions, value, isOptionsGrouped(selectOptions));
+    if (newMultiValues !== multiValues) setMultiValues(newMultiValues);
+
+    //
+    // We only update this when our passed in options or value changes, not multiValues.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options, value]);
+  const changeHandler = useCallback(optionEvent => {
+    setActivated(true);
+
+    // We have to do this because the version of typescript we have doesn't have the transitivity of these type guards yet. But, we will soon!
+    // Should probably come with: https://codecademy.atlassian.net/browse/GM-354
+    const onChangeProps = {
+      onChange,
+      multiple
+    };
+    if (isSingleSelectProps(onChangeProps)) {
+      const singleOptionEvent = optionEvent;
+      onChangeProps.onChange?.(singleOptionEvent, {
+        action: onChangeAction,
+        option: singleOptionEvent
+      });
+    }
+    if (isMultipleSelectProps(onChangeProps)) {
+      setMultiValues(optionEvent);
+      onChangeProps.onChange?.(optionEvent, {
+        action: onChangeAction,
+        option: undefined // At the moment this isn't used, but when multi select is built for real, boom (https://codecademy.atlassian.net/browse/GM-354)
+      });
+    }
+  }, [onChange, multiple]);
+  const keyPressHandler = e => {
+    if (multiple && e.key === 'Enter' && currentFocusedValue && multiValues) {
+      const newMultiValues = removeValueFromSelectedOptions(multiValues, currentFocusedValue);
+      if (newMultiValues !== multiValues) setMultiValues(newMultiValues);
+    }
+    if (removeAllButtonRef.current !== null && e.key === 'ArrowRight' && multiValues && currentFocusedValue === multiValues[multiValues.length - 1].value) {
+      removeAllButtonRef.current.focus();
+    }
+  };
   const theme = useTheme();
   const memoizedStyles = useMemo(() => {
     return getMemoizedStyles(theme, zIndex);
@@ -123,15 +180,14 @@ export const SelectDropdown = ({
       selectInputRef
     },
     children: /*#__PURE__*/_jsx(TypedReactSelect, {
+      ...defaultProps,
       activated: activated,
       "aria-live": "assertive",
       ariaLiveMessages: {
         onFocus
       },
-      components: defaultComponents,
       dropdownWidth: dropdownWidth,
       error: Boolean(error),
-      formatCreateLabel: formatCreateLabel,
       formatGroupLabel: formatGroupLabel,
       formatOptionLabel: formatOptionLabel,
       id: id || rest.htmlFor || rawInputId,
@@ -140,15 +196,12 @@ export const SelectDropdown = ({
         ...inputProps
       },
       inputWidth: inputWidth,
-      isCreatable: isCreatable,
       isDisabled: disabled,
       isMulti: multiple,
-      isOptionDisabled: option => option.disabled,
+      isOptionDisabled: option => option.disabled ?? false,
       isSearchable: isSearchable,
-      isValidNewOption: isValidNewOption,
       menuAlignment: menuAlignment,
       name: name,
-      noOptionsMessage: resolveNoOptionsMessage(validationMessage),
       options: selectOptions,
       placeholder: placeholder,
       selectRef: selectInputRef,
@@ -157,8 +210,7 @@ export const SelectDropdown = ({
       styles: memoizedStyles,
       value: multiple ? multiValues : parsedValue,
       onChange: changeHandler,
-      onInputChange: onInputChange,
-      onKeyDown: multiple ? keyPressHandler : undefined,
+      onKeyDown: multiple ? e => keyPressHandler(e) : undefined,
       ...rest
     })
   });

package/dist/Form/SelectDropdown/elements/constants.d.ts

@@ -15,6 +15,14 @@ export declare const indicatorIcons: {
         size: number;
         icon: import("react").ForwardRefExoticComponent<import("@codecademy/gamut-icons").GamutIconProps & import("react").RefAttributes<SVGSVGElement>>;
     };
+    smallSearchable: {
+        size: number;
+        icon: import("react").ForwardRefExoticComponent<import("@codecademy/gamut-icons").GamutIconProps & import("react").RefAttributes<SVGSVGElement>>;
+    };
+    mediumSearchable: {
+        size: number;
+        icon: import("react").ForwardRefExoticComponent<import("@codecademy/gamut-icons").GamutIconProps & import("react").RefAttributes<SVGSVGElement>>;
+    };
     smallRemove: {
         size: number;
         icon: import("react").ForwardRefExoticComponent<import("@codecademy/gamut-icons").GamutIconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/Form/SelectDropdown/elements/constants.js

@@ -1,4 +1,4 @@
-import { ArrowChevronDownIcon, CloseIcon, MiniChevronDownIcon, MiniDeleteIcon } from '@codecademy/gamut-icons';
+import { ArrowChevronDownIcon, CloseIcon, MiniChevronDownIcon, MiniDeleteIcon, SearchIcon } from '@codecademy/gamut-icons';
 export const iconSize = {
   small: 12,
   medium: 16
@@ -16,6 +16,14 @@ export const indicatorIcons = {
     size: iconSize.medium,
     icon: ArrowChevronDownIcon
   },
+  smallSearchable: {
+    size: iconSize.small,
+    icon: SearchIcon
+  },
+  mediumSearchable: {
+    size: iconSize.medium,
+    icon: SearchIcon
+  },
   smallRemove: {
     size: iconSize.small,
     icon: MiniDeleteIcon

package/dist/Form/SelectDropdown/elements/containers.d.ts

@@ -24,10 +24,6 @@ export declare const CustomValueContainer: ({ ...rest }: CustomSelectComponentPr
 export declare const CustomInput: ({ ...rest }: CustomSelectComponentProps<typeof SelectDropdownElements.Input>) => import("react/jsx-runtime").JSX.Element;
 /**
  * Typed wrapper around react-select component.
- * Renders CreatableSelect when isCreatable is true, ReactSelect otherwise.
- * Creatable-only props (formatCreateLabel, isValidNewOption) are stripped from
- * the non-creatable path so they don't reach ReactSelect. `onCreateOption` is
- * handled in SelectDropdown's changeHandler — do not pass it to CreatableSelect
- * or react-select will skip onChange on create.
+ * Provides type safety for the underlying react-select implementation.
  */
-export declare function TypedReactSelect<OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>>({ selectRef, isCreatable, formatCreateLabel, isValidNewOption, ...props }: Props<OptionType, IsMulti, GroupType> & TypedReactSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function TypedReactSelect<OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>>({ selectRef, ...props }: Props<OptionType, IsMulti, GroupType> & TypedReactSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/Form/SelectDropdown/elements/containers.js

@@ -1,6 +1,5 @@
 import { createContext, useLayoutEffect } from 'react';
 import ReactSelect, { components as SelectDropdownElements } from 'react-select';
-import CreatableSelect from 'react-select/creatable';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * React context for sharing state between SelectDropdown components.
@@ -117,27 +116,12 @@ export const CustomInput = ({
 
 /**
  * Typed wrapper around react-select component.
- * Renders CreatableSelect when isCreatable is true, ReactSelect otherwise.
- * Creatable-only props (formatCreateLabel, isValidNewOption) are stripped from
- * the non-creatable path so they don't reach ReactSelect. `onCreateOption` is
- * handled in SelectDropdown's changeHandler — do not pass it to CreatableSelect
- * or react-select will skip onChange on create.
+ * Provides type safety for the underlying react-select implementation.
  */
 export function TypedReactSelect({
   selectRef,
-  isCreatable,
-  formatCreateLabel,
-  isValidNewOption,
   ...props
 }) {
-  if (isCreatable) {
-    return /*#__PURE__*/_jsx(CreatableSelect, {
-      ...props,
-      formatCreateLabel: formatCreateLabel,
-      isValidNewOption: isValidNewOption,
-      ref: selectRef
-    });
-  }
   return /*#__PURE__*/_jsx(ReactSelect, {
     ...props,
     ref: selectRef

package/dist/Form/SelectDropdown/elements/controls.d.ts

@@ -1,6 +1,20 @@
-import { SizedIndicatorProps } from '../types';
+import { AriaOnFocus } from 'react-select';
+import { ExtendedOption, SizedIndicatorProps } from '../types';
+/**
+ * Generates accessible focus messages for screen readers.
+ * Provides detailed information about the currently focused option.
+ *
+ * @param params - Object containing the focused option details
+ * @returns Formatted accessibility message
+ */
+export declare const onFocus: AriaOnFocus<ExtendedOption>;
 /**
  * Custom dropdown indicator that shows either a chevron or search icon.
  * The icon type depends on whether the select is searchable or not.
  */
 export declare const DropdownButton: (props: SizedIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Custom remove all button for multi-select mode.
+ * Provides keyboard navigation and accessible removal of all selected values.
+ */
+export declare const RemoveAllButton: (props: SizedIndicatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/SelectDropdown/elements/controls.js

@@ -1,23 +1,50 @@
+import _styled from "@emotion/styled/base";
+import { css, theme } from '@codecademy/gamut-styles';
+import { useContext } from 'react';
 import { components as SelectDropdownElements } from 'react-select';
 import { indicatorIcons } from './constants';
+import { SelectDropdownContext } from './containers';
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
   DropdownIndicator
 } = SelectDropdownElements;
 
+/**
+ * Generates accessible focus messages for screen readers.
+ * Provides detailed information about the currently focused option.
+ *
+ * @param params - Object containing the focused option details
+ * @returns Formatted accessibility message
+ */
+export const onFocus = ({
+  focused: {
+    label,
+    subtitle,
+    rightLabel,
+    disabled
+  }
+}) => {
+  const formattedSubtitle = `, ${subtitle}`;
+  const formattedRightLabel = `, ${rightLabel}`;
+  const msg = `You are currently focused on option ${label}${subtitle ? formattedSubtitle : ''} ${rightLabel ? formattedRightLabel : ''}${disabled ? ', disabled' : ''}`;
+  return msg;
+};
+
 /**
  * Custom dropdown indicator that shows either a chevron or search icon.
  * The icon type depends on whether the select is searchable or not.
  */
 export const DropdownButton = props => {
   const {
-    size
+    size,
+    isSearchable
   } = props.selectProps;
   const color = props.isDisabled ? 'text-disabled' : 'text';
   const iconSize = size ?? 'medium';
+  const iconType = isSearchable ? 'Searchable' : 'Chevron';
   const {
     ...iconProps
-  } = indicatorIcons[`${iconSize}Chevron`];
+  } = indicatorIcons[`${iconSize}${iconType}`];
   const {
     icon: IndicatorIcon
   } = iconProps;
@@ -28,4 +55,66 @@ export const DropdownButton = props => {
       color: color
     })
   });
+};
+const CustomStyledRemoveAllDiv = /*#__PURE__*/_styled('div', {
+  target: "e1xkmr70",
+  label: "CustomStyledRemoveAllDiv"
+})(css({
+  '&:focus': {
+    outline: `2px solid ${theme.colors.primary}`
+  },
+  '&:focus-visible': {
+    outline: `2px solid ${theme.colors.primary}`
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9Gb3JtL1NlbGVjdERyb3Bkb3duL2VsZW1lbnRzL2NvbnRyb2xzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxRGlDIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9Gb3JtL1NlbGVjdERyb3Bkb3duL2VsZW1lbnRzL2NvbnRyb2xzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgdGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgS2V5Ym9hcmRFdmVudCwgdXNlQ29udGV4dCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7XG4gIEFyaWFPbkZvY3VzLFxuICBjb21wb25lbnRzIGFzIFNlbGVjdERyb3Bkb3duRWxlbWVudHMsXG59IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5cbmltcG9ydCB7IEV4dGVuZGVkT3B0aW9uLCBTaXplZEluZGljYXRvclByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgaW5kaWNhdG9ySWNvbnMgfSBmcm9tICcuL2NvbnN0YW50cyc7XG5pbXBvcnQgeyBTZWxlY3REcm9wZG93bkNvbnRleHQgfSBmcm9tICcuL2NvbnRhaW5lcnMnO1xuXG5jb25zdCB7IERyb3Bkb3duSW5kaWNhdG9yIH0gPSBTZWxlY3REcm9wZG93bkVsZW1lbnRzO1xuXG4vKipcbiAqIEdlbmVyYXRlcyBhY2Nlc3NpYmxlIGZvY3VzIG1lc3NhZ2VzIGZvciBzY3JlZW4gcmVhZGVycy5cbiAqIFByb3ZpZGVzIGRldGFpbGVkIGluZm9ybWF0aW9uIGFib3V0IHRoZSBjdXJyZW50bHkgZm9jdXNlZCBvcHRpb24uXG4gKlxuICogQHBhcmFtIHBhcmFtcyAtIE9iamVjdCBjb250YWluaW5nIHRoZSBmb2N1c2VkIG9wdGlvbiBkZXRhaWxzXG4gKiBAcmV0dXJucyBGb3JtYXR0ZWQgYWNjZXNzaWJpbGl0eSBtZXNzYWdlXG4gKi9cbmV4cG9ydCBjb25zdCBvbkZvY3VzOiBBcmlhT25Gb2N1czxFeHRlbmRlZE9wdGlvbj4gPSAoe1xuICBmb2N1c2VkOiB7IGxhYmVsLCBzdWJ0aXRsZSwgcmlnaHRMYWJlbCwgZGlzYWJsZWQgfSxcbn0pID0+IHtcbiAgY29uc3QgZm9ybWF0dGVkU3VidGl0bGUgPSBgLCAke3N1YnRpdGxlfWA7XG4gIGNvbnN0IGZvcm1hdHRlZFJpZ2h0TGFiZWwgPSBgLCAke3JpZ2h0TGFiZWx9YDtcblxuICBjb25zdCBtc2cgPSBgWW91IGFyZSBjdXJyZW50bHkgZm9jdXNlZCBvbiBvcHRpb24gJHtsYWJlbH0ke1xuICAgIHN1YnRpdGxlID8gZm9ybWF0dGVkU3VidGl0bGUgOiAnJ1xuICB9ICR7cmlnaHRMYWJlbCA/IGZvcm1hdHRlZFJpZ2h0TGFiZWwgOiAnJ30ke2Rpc2FibGVkID8gJywgZGlzYWJsZWQnIDogJyd9YDtcblxuICByZXR1cm4gbXNnO1xufTtcblxuLyoqXG4gKiBDdXN0b20gZHJvcGRvd24gaW5kaWNhdG9yIHRoYXQgc2hvd3MgZWl0aGVyIGEgY2hldnJvbiBvciBzZWFyY2ggaWNvbi5cbiAqIFRoZSBpY29uIHR5cGUgZGVwZW5kcyBvbiB3aGV0aGVyIHRoZSBzZWxlY3QgaXMgc2VhcmNoYWJsZSBvciBub3QuXG4gKi9cbmV4cG9ydCBjb25zdCBEcm9wZG93bkJ1dHRvbiA9IChwcm9wczogU2l6ZWRJbmRpY2F0b3JQcm9wcykgPT4ge1xuICBjb25zdCB7IHNpemUsIGlzU2VhcmNoYWJsZSB9ID0gcHJvcHMuc2VsZWN0UHJvcHM7XG4gIGNvbnN0IGNvbG9yID0gcHJvcHMuaXNEaXNhYmxlZCA/ICd0ZXh0LWRpc2FibGVkJyA6ICd0ZXh0JztcbiAgY29uc3QgaWNvblNpemUgPSBzaXplID8/ICdtZWRpdW0nO1xuICBjb25zdCBpY29uVHlwZSA9IGlzU2VhcmNoYWJsZSA/ICdTZWFyY2hhYmxlJyA6ICdDaGV2cm9uJztcbiAgY29uc3QgeyAuLi5pY29uUHJvcHMgfSA9IGluZGljYXRvckljb25zW2Ake2ljb25TaXplfSR7aWNvblR5cGV9YF07XG4gIGNvbnN0IHsgaWNvbjogSW5kaWNhdG9ySWNvbiB9ID0gaWNvblByb3BzO1xuXG4gIHJldHVybiAoXG4gICAgPERyb3Bkb3duSW5kaWNhdG9yIHsuLi5wcm9wc30+XG4gICAgICA8SW5kaWNhdG9ySWNvbiB7Li4uaWNvblByb3BzfSBjb2xvcj17Y29sb3J9IC8+XG4gICAgPC9Ecm9wZG93bkluZGljYXRvcj5cbiAgKTtcbn07XG5cbmNvbnN0IEN1c3RvbVN0eWxlZFJlbW92ZUFsbERpdiA9IHN0eWxlZCgnZGl2JykoXG4gIGNzcyh7XG4gICAgJyY6Zm9jdXMnOiB7XG4gICAgICBvdXRsaW5lOiBgMnB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnByaW1hcnl9YCxcbiAgICB9LFxuICAgICcmOmZvY3VzLXZpc2libGUnOiB7XG4gICAgICBvdXRsaW5lOiBgMnB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnByaW1hcnl9YCxcbiAgICB9LFxuICB9KVxuKTtcblxuLyoqXG4gKiBDdXN0b20gcmVtb3ZlIGFsbCBidXR0b24gZm9yIG11bHRpLXNlbGVjdCBtb2RlLlxuICogUHJvdmlkZXMga2V5Ym9hcmQgbmF2aWdhdGlvbiBhbmQgYWNjZXNzaWJsZSByZW1vdmFsIG9mIGFsbCBzZWxlY3RlZCB2YWx1ZXMuXG4gKi9cbmV4cG9ydCBjb25zdCBSZW1vdmVBbGxCdXR0b24gPSAocHJvcHM6IFNpemVkSW5kaWNhdG9yUHJvcHMpID0+IHtcbiAgY29uc3Qge1xuICAgIGdldFN0eWxlcyxcbiAgICBpbm5lclByb3BzOiB7IC4uLnJlc3RJbm5lclByb3BzIH0sXG4gICAgc2VsZWN0UHJvcHM6IHsgc2l6ZSB9LFxuICB9ID0gcHJvcHM7XG5cbiAgY29uc3QgeyByZW1vdmVBbGxCdXR0b25SZWYsIHNlbGVjdElucHV0UmVmIH0gPSB1c2VDb250ZXh0KFxuICAgIFNlbGVjdERyb3Bkb3duQ29udGV4dFxuICApO1xuXG4gIGNvbnN0IGljb25TaXplID0gc2l6ZSA/PyAnbWVkaXVtJztcbiAgY29uc3QgeyAuLi5pY29uUHJvcHMgfSA9IGluZGljYXRvckljb25zW2Ake2ljb25TaXplfVJlbW92ZWBdO1xuICBjb25zdCB7IGljb246IEluZGljYXRvckljb24gfSA9IGljb25Qcm9wcztcblxuICBjb25zdCBvbktleVByZXNzID0gKGU6IEtleWJvYXJkRXZlbnQ8SFRNTERpdkVsZW1lbnQ+KSA9PiB7XG4gICAgaWYgKGUua2V5ID09PSAnRW50ZXInICYmIHJlc3RJbm5lclByb3BzLm9uTW91c2VEb3duKSB7XG4gICAgICByZXN0SW5uZXJQcm9wcy5vbk1vdXNlRG93bihlIGFzIGFueSk7XG4gICAgfVxuXG4gICAgaWYgKFxuICAgICAgc2VsZWN0SW5wdXRSZWY/LmN1cnJlbnQgJiZcbiAgICAgIChlLmtleSA9PT0gJ0Fycm93UmlnaHQnIHx8IGUua2V5ID09PSAnQXJyb3dMZWZ0JyB8fCBlLmtleSA9PT0gJ0Fycm93RG93bicpXG4gICAgKSB7XG4gICAgICBzZWxlY3RJbnB1dFJlZi5jdXJyZW50LmZvY3VzKCk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IHN0eWxlID0gZ2V0U3R5bGVzKCdjbGVhckluZGljYXRvcicsIHByb3BzKSBhcyBSZWFjdC5DU1NQcm9wZXJ0aWVzO1xuXG4gIHJldHVybiAoXG4gICAgPEN1c3RvbVN0eWxlZFJlbW92ZUFsbERpdlxuICAgICAgYXJpYS1sYWJlbD1cIlJlbW92ZSBhbGwgc2VsZWN0ZWRcIlxuICAgICAgcm9sZT1cImJ1dHRvblwiXG4gICAgICB0YWJJbmRleD17MH1cbiAgICAgIHsuLi5yZXN0SW5uZXJQcm9wc31cbiAgICAgIHJlZj17cmVtb3ZlQWxsQnV0dG9uUmVmIGFzIFJlYWN0LlJlZjxIVE1MRGl2RWxlbWVudD59XG4gICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgZ2FtdXQvbm8taW5saW5lLXN0eWxlXG4gICAgICBzdHlsZT17c3R5bGV9XG4gICAgICBvbktleURvd249e29uS2V5UHJlc3N9XG4gICAgPlxuICAgICAgPEluZGljYXRvckljb24gey4uLmljb25Qcm9wc30gY29sb3I9XCJ0ZXh0XCIgLz5cbiAgICA8L0N1c3RvbVN0eWxlZFJlbW92ZUFsbERpdj5cbiAgKTtcbn07XG4iXX0= */");
+
+/**
+ * Custom remove all button for multi-select mode.
+ * Provides keyboard navigation and accessible removal of all selected values.
+ */
+export const RemoveAllButton = props => {
+  const {
+    getStyles,
+    innerProps: {
+      ...restInnerProps
+    },
+    selectProps: {
+      size
+    }
+  } = props;
+  const {
+    removeAllButtonRef,
+    selectInputRef
+  } = useContext(SelectDropdownContext);
+  const iconSize = size ?? 'medium';
+  const {
+    ...iconProps
+  } = indicatorIcons[`${iconSize}Remove`];
+  const {
+    icon: IndicatorIcon
+  } = iconProps;
+  const onKeyPress = e => {
+    if (e.key === 'Enter' && restInnerProps.onMouseDown) {
+      restInnerProps.onMouseDown(e);
+    }
+    if (selectInputRef?.current && (e.key === 'ArrowRight' || e.key === 'ArrowLeft' || e.key === 'ArrowDown')) {
+      selectInputRef.current.focus();
+    }
+  };
+  const style = getStyles('clearIndicator', props);
+  return /*#__PURE__*/_jsx(CustomStyledRemoveAllDiv, {
+    "aria-label": "Remove all selected",
+    role: "button",
+    tabIndex: 0,
+    ...restInnerProps,
+    ref: removeAllButtonRef
+    // eslint-disable-next-line gamut/no-inline-style
+    ,
+    style: style,
+    onKeyDown: onKeyPress,
+    children: /*#__PURE__*/_jsx(IndicatorIcon, {
+      ...iconProps,
+      color: "text"
+    })
+  });
 };

package/dist/Form/SelectDropdown/elements/index.d.ts

@@ -1,6 +1,5 @@
 export { iconSize, selectedIconSize, indicatorIcons } from './constants';
 export { MultiValueWithColorMode, MultiValueRemoveButton, RemoveAllButton, } from './multi-value';
-export { DropdownButton } from './controls';
-export { onFocus } from '../core/accessibility';
+export { DropdownButton, onFocus } from './controls';
 export { SelectDropdownContext, CustomContainer, CustomInput, CustomValueContainer, TypedReactSelect, } from './containers';
 export { IconOption, AbbreviatedSingleValue, formatOptionLabel, formatGroupLabel, } from './options';

package/dist/Form/SelectDropdown/elements/index.js

@@ -1,6 +1,5 @@
 export { iconSize, selectedIconSize, indicatorIcons } from './constants';
 export { MultiValueWithColorMode, MultiValueRemoveButton, RemoveAllButton } from './multi-value';
-export { DropdownButton } from './controls';
-export { onFocus } from '../core/accessibility';
+export { DropdownButton, onFocus } from './controls';
 export { SelectDropdownContext, CustomContainer, CustomInput, CustomValueContainer, TypedReactSelect } from './containers';
 export { IconOption, AbbreviatedSingleValue, formatOptionLabel, formatGroupLabel } from './options';

package/dist/Form/SelectDropdown/elements/options.d.ts

@@ -3,7 +3,6 @@ import { CustomSelectComponentProps, ExtendedOption, SelectDropdownGroup } from
 /**
  * Custom option component that displays a check icon for selected items.
  * Also manages ARIA attributes for accessibility.
- * Skips the check icon for react-select/creatable's "Add" row (__isNew__).
  */
 export declare const IconOption: ({ children, ...rest }: CustomSelectComponentProps<typeof SelectDropdownElements.Option>) => import("react/jsx-runtime").JSX.Element;
 /**

package/dist/Form/SelectDropdown/elements/options.js

@@ -44,7 +44,6 @@ const IconOptionLabel = ({
 /**
  * Custom option component that displays a check icon for selected items.
  * Also manages ARIA attributes for accessibility.
- * Skips the check icon for react-select/creatable's "Add" row (__isNew__).
  */
 export const IconOption = ({
   children,
@@ -55,17 +54,15 @@ export const IconOption = ({
   } = rest.selectProps;
   const {
     isFocused,
-    innerProps,
-    data
+    innerProps
   } = rest;
-  const isNew = data?.__isNew__;
   return /*#__PURE__*/_jsxs(SelectDropdownElements.Option, {
     ...rest,
     innerProps: {
       ...innerProps,
       'aria-selected': isFocused
     },
-    children: [children, !isNew && rest?.isSelected && /*#__PURE__*/_jsx(CheckIcon, {
+    children: [children, rest?.isSelected && /*#__PURE__*/_jsx(CheckIcon, {
       size: selectedIconSize[size ?? 'medium']
     })]
   });

package/dist/Form/SelectDropdown/{core/styles.js → styles.js}

@@ -1,6 +1,6 @@
 import { css, states, variant } from '@codecademy/gamut-styles';
-import { dismissSharedStyles, tagBaseStyles, tagLabelFontSize, tagLabelPadding } from '../../../Tag/styles';
-import { formBaseComponentStyles, formBaseFieldStylesObject, formFieldDisabledStyles, formFieldPaddingStyles, InputSelectors } from '../../styles';
+import { dismissSharedStyles, tagBaseStyles, tagLabelFontSize, tagLabelPadding } from '../../Tag/styles';
+import { formBaseComponentStyles, formBaseFieldStylesObject, formFieldDisabledStyles, formFieldPaddingStyles, InputSelectors } from '../styles';
 const selectDropdownStyles = css({
   ...formBaseFieldStylesObject,
   display: 'flex',
@@ -62,7 +62,7 @@ const textColor = css({
   color: 'text'
 });
 const placeholderColor = css({
-  color: 'text-secondary'
+  color: 'text-disabled'
 });
 export const getMemoizedStyles = (theme, zIndex) => {
   return {
@@ -137,8 +137,6 @@ export const getMemoizedStyles = (theme, zIndex) => {
           error: state.selectProps.error,
           theme
         }),
-        // Drop react-select's default menu drop shadow; the border above defines the edge.
-        boxShadow: 'none',
         ...(dropdownWidth ? {
           minWidth: dropdownWidth,
           width: dropdownWidth
@@ -196,32 +194,16 @@ export const getMemoizedStyles = (theme, zIndex) => {
         backgroundColor: theme.colors['secondary-hover']
       }
     }),
-    noOptionsMessage: provided => ({
-      ...provided,
-      color: theme.colors['text-secondary']
+    option: (provided, state) => ({
+      ...getOptionBackground(state.isSelected, state.isFocused)({
+        theme
+      }),
+      alignItems: 'center',
+      color: state.isDisabled ? 'text-disabled' : 'default',
+      cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+      display: 'flex',
+      padding: state.selectProps.size === 'small' ? '3px 14px' : '11px 14px'
     }),
-    option: (provided, state) => {
-      const isNew = state.data?.__isNew__;
-      const isSmall = state.selectProps.size === 'small';
-      return {
-        ...getOptionBackground(state.isSelected, state.isFocused)({
-          theme
-        }),
-        alignItems: 'center',
-        color: state.isDisabled ? theme.colors['text-disabled'] : isNew ? theme.colors.primary : theme.colors.text,
-        cursor: state.isDisabled ? 'not-allowed' : 'pointer',
-        display: 'flex',
-        padding: isSmall ? '3px 14px' : '11px 14px',
-        ...(isNew && {
-          // Gradient creates the 1px divider line at the top edge of the option background
-          backgroundImage: `linear-gradient(${theme.colors['text-disabled']} 1px, transparent 1px)`,
-          backgroundPosition: '0 0',
-          backgroundRepeat: 'no-repeat',
-          backgroundSize: '100% 1px',
-          paddingTop: isSmall ? '11px' : '19px'
-        })
-      };
-    },
     placeholder: provided => ({
       ...provided,
       ...placeholderColor({