@homebound/beam 2.324.3 → 2.325.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/components/Icon.d.ts +10 -0
  2. package/dist/components/Icon.js +10 -0
  3. package/dist/forms/BoundIconCardGroupField.d.ts +5 -4
  4. package/dist/inputs/IconCardGroup.d.ts +10 -7
  5. package/dist/inputs/IconCardGroup.js +37 -9
  6. package/dist/utils/useTestIds.d.ts +31 -0
  7. package/dist/utils/useTestIds.js +7 -5
  8. package/package.json +2 -2
package/dist/components/Icon.d.ts CHANGED
@@ -65,6 +65,8 @@ export declare const Icons: {
65
65
  xCircle: import("@emotion/react/jsx-runtime").JSX.Element;
66
66
  flag: import("@emotion/react/jsx-runtime").JSX.Element;
67
67
  outlineFlag: import("@emotion/react/jsx-runtime").JSX.Element;
68
+ add: import("@emotion/react/jsx-runtime").JSX.Element;
69
+ remove: import("@emotion/react/jsx-runtime").JSX.Element;
68
70
  chevronsDown: import("@emotion/react/jsx-runtime").JSX.Element;
69
71
  chevronsRight: import("@emotion/react/jsx-runtime").JSX.Element;
70
72
  sortUp: import("@emotion/react/jsx-runtime").JSX.Element;
@@ -157,5 +159,13 @@ export declare const Icons: {
157
159
  windy: import("@emotion/react/jsx-runtime").JSX.Element;
158
160
  circle: import("@emotion/react/jsx-runtime").JSX.Element;
159
161
  checkCircleFilled: import("@emotion/react/jsx-runtime").JSX.Element;
162
+ cart: import("@emotion/react/jsx-runtime").JSX.Element;
163
+ programChange: import("@emotion/react/jsx-runtime").JSX.Element;
164
+ architectural: import("@emotion/react/jsx-runtime").JSX.Element;
165
+ structural: import("@emotion/react/jsx-runtime").JSX.Element;
166
+ mep: import("@emotion/react/jsx-runtime").JSX.Element;
167
+ designPackage: import("@emotion/react/jsx-runtime").JSX.Element;
168
+ updateDesignPackage: import("@emotion/react/jsx-runtime").JSX.Element;
169
+ exteriorStyle: import("@emotion/react/jsx-runtime").JSX.Element;
160
170
  };
161
171
  export type IconKey = keyof typeof Icons;
package/dist/components/Icon.js CHANGED
@@ -71,6 +71,8 @@ exports.Icons = {
71
71
  xCircle: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M9.17181 16.2421L11.9998 13.4141L14.8278 16.2421L16.2418 14.8281L13.4138 12.0001L16.2418 9.17206L14.8278 7.75806L11.9998 10.5861L9.17181 7.75806L7.75781 9.17206L10.5858 12.0001L7.75781 14.8281L9.17181 16.2421Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22ZM12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4Z" })] })),
72
72
  flag: (0, jsx_runtime_1.jsx)("path", { d: "M19 4H6V2H4V20H3V22H4H6H7V20H6V15H19C19.553 15 20 14.552 20 14V5C20 4.448 19.553 4 19 4Z" }),
73
73
  outlineFlag: ((0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2H4V20H3V22H7V20H6V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H6V2ZM6 6V13H18V6H6Z" })),
74
+ add: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M13 7H11V11H7V13H11V17H13V13H17V11H13V7Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20Z" })] })),
75
+ remove: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 11H17V13H7V11Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20Z" })] })),
74
76
  // Arrows
75
77
  chevronsDown: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M12 15.586L7.70697 11.293L6.29297 12.707L12 18.414L17.707 12.707L16.293 11.293L12 15.586Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M17.707 7.70697L16.293 6.29297L12 10.586L7.70697 6.29297L6.29297 7.70697L12 13.414L17.707 7.70697Z" })] })),
76
78
  chevronsRight: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10.2959 7.71004L14.6209 12L10.2959 16.29L11.7039 17.71L17.4609 12L11.7039 6.29004L10.2959 7.71004Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M6.7039 6.29004L5.2959 7.71004L9.6209 12L5.2959 16.29L6.7039 17.71L12.4609 12L6.7039 6.29004Z" })] })),
@@ -168,4 +170,12 @@ exports.Icons = {
168
170
  windy: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M 23.429688 12.695312 L 23.210938 12.695312 C 22.957031 12.695312 22.738281 12.914062 22.738281 13.167969 C 22.738281 13.421875 22.957031 13.640625 23.210938 13.640625 L 23.429688 13.640625 C 23.683594 13.640625 23.90625 13.421875 23.90625 13.167969 C 23.90625 12.914062 23.683594 12.695312 23.429688 12.695312 Z M 23.429688 12.695312 " }), (0, jsx_runtime_1.jsx)("path", { d: "M 23.527344 12.695312 L 17.210938 12.695312 C 16.957031 12.695312 16.738281 12.914062 16.738281 13.167969 C 16.738281 13.421875 16.957031 13.640625 17.210938 13.640625 L 23.527344 13.640625 C 23.777344 13.640625 24 13.421875 24 13.167969 C 24 12.914062 23.777344 12.695312 23.527344 12.695312 Z M 23.527344 12.695312 " }), (0, jsx_runtime_1.jsx)("path", { d: "M 5.273438 14.9375 C 5.019531 14.9375 4.800781 15.15625 4.800781 15.410156 C 4.800781 16.390625 4.011719 17.179688 3.03125 17.179688 C 2.050781 17.179688 1.261719 16.390625 1.261719 15.410156 C 1.261719 14.429688 2.050781 13.640625 3.03125 13.640625 L 15 13.640625 C 15.253906 13.640625 15.472656 13.421875 15.472656 13.167969 C 15.472656 12.914062 15.253906 12.695312 15 12.695312 L 3.03125 12.695312 C 1.546875 12.695312 0.316406 13.925781 0.316406 15.410156 C 0.316406 16.894531 1.546875 18.125 3.03125 18.125 C 4.515625 18.125 5.746094 16.894531 5.746094 15.410156 C 5.746094 15.15625 5.527344 14.9375 5.273438 14.9375 Z M 5.273438 14.9375 " }), (0, jsx_runtime_1.jsx)("path", { d: "M 20.96875 15.535156 L 20.683594 15.535156 C 20.429688 15.535156 20.210938 15.757812 20.210938 16.011719 C 20.210938 16.261719 20.429688 16.484375 20.683594 16.484375 L 20.96875 16.484375 C 21.222656 16.484375 21.441406 16.261719 21.441406 16.011719 C 21.441406 15.757812 21.222656 15.535156 20.96875 15.535156 Z M 20.96875 15.535156 " }), (0, jsx_runtime_1.jsx)("path", { d: "M 21 15.535156 L 10.925781 15.535156 C 10.671875 15.535156 10.453125 15.757812 10.453125 16.011719 C 10.453125 16.261719 10.671875 16.484375 10.925781 16.484375 L 21 16.484375 C 21.253906 16.484375 21.472656 16.261719 21.472656 16.011719 C 21.472656 15.757812 21.253906 15.535156 21 15.535156 Z M 21 15.535156 " }), (0, jsx_runtime_1.jsx)("path", { d: "M 18.15625 10.800781 L 18.503906 10.800781 C 18.757812 10.800781 18.980469 10.578125 18.980469 10.328125 C 18.980469 10.074219 18.757812 9.851562 18.503906 9.851562 L 18.15625 9.851562 C 17.90625 9.851562 17.683594 10.074219 17.683594 10.328125 C 17.683594 10.578125 17.90625 10.800781 18.15625 10.800781 Z M 18.15625 10.800781 " }), (0, jsx_runtime_1.jsx)("path", { d: "M 5.90625 10.800781 L 18.15625 10.800781 C 18.410156 10.800781 18.632812 10.578125 18.632812 10.328125 C 18.632812 10.074219 18.410156 9.851562 18.15625 9.851562 L 5.90625 9.851562 C 4.925781 9.851562 4.136719 9.0625 4.136719 8.085938 C 4.136719 7.105469 4.925781 6.316406 5.90625 6.316406 C 6.882812 6.316406 7.671875 7.105469 7.671875 8.085938 C 7.671875 8.335938 7.894531 8.558594 8.148438 8.558594 C 8.398438 8.558594 8.621094 8.335938 8.621094 8.085938 C 8.621094 6.601562 7.390625 5.367188 5.90625 5.367188 C 4.421875 5.367188 3.191406 6.601562 3.191406 8.085938 C 3.191406 9.570312 4.421875 10.800781 5.90625 10.800781 Z M 5.90625 10.800781 " })] })),
169
171
  circle: ((0, jsx_runtime_1.jsx)("path", { d: "M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2Z" })),
170
172
  checkCircleFilled: ((0, jsx_runtime_1.jsx)("path", { d: "M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM10.001 16.413L6.288 12.708L7.7 11.292L9.999 13.587L15.293 8.293L16.707 9.707L10.001 16.413Z" })),
173
+ cart: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M21.822 7.431C21.635 7.161 21.328 7 21 7H7.333L6.179 4.23C5.867 3.482 5.143 3 4.333 3H2V5H4.333L9.077 16.385C9.232 16.757 9.596 17 10 17H18C18.417 17 18.79 16.741 18.937 16.352L21.937 8.352C22.052 8.044 22.009 7.7 21.822 7.431ZM17.307 15H10.667L8.167 9H19.557L17.307 15Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.5 21C11.3284 21 12 20.3284 12 19.5C12 18.6716 11.3284 18 10.5 18C9.67157 18 9 18.6716 9 19.5C9 20.3284 9.67157 21 10.5 21Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M17.5 21C18.3284 21 19 20.3284 19 19.5C19 18.6716 18.3284 18 17.5 18C16.6716 18 16 18.6716 16 19.5C16 20.3284 16.6716 21 17.5 21Z" })] })),
174
+ programChange: ((0, jsx_runtime_1.jsx)("path", { d: "M3.371 2.373c-1.259.729-2.274 1.34-2.256 1.358.018.018 1.057.624 2.309 1.346L5.7 6.39l.011-.955.01-.955h6.798l.01.955.011.956 2.278-1.316a159.652 159.652 0 0 0 2.309-1.346c.023-.023-4.384-2.608-4.573-2.682-.019-.008-.034.42-.034.95v.963h-6.8V2c0-.528-.013-.958-.03-.957-.016.002-1.06.6-2.319 1.33M1.24 15.54v7.9h15.84V7.64H1.24v7.9m19.506-7.654L19.404 10.2l-1.241 2.14.979.011.978.01v6.398l-.972.01-.973.011 1.329 2.293c.73 1.261 1.336 2.3 1.346 2.31.017.017 2.67-4.553 2.67-4.6 0-.013-.432-.023-.96-.023h-.96v-6.4h.96c.528 0 .96-.015.96-.033 0-.037-2.587-4.528-2.639-4.581-.018-.019-.079.044-.135.14M15.08 15.54v5.9H3.28V9.64h11.8v5.9", "fill-rule": "evenodd" })),
175
+ architectural: ((0, jsx_runtime_1.jsx)("path", { d: "M19.42.256a3.573 3.573 0 0 0-.981.282c-1.12.472-2.032 1.538-2.337 2.732-.049.192-.133.82-.141 1.06-.001.016-3.565.03-7.921.03H.12V24h10.344c11.484 0 10.482.024 11.176-.269a4.103 4.103 0 0 0 2.24-2.304l.12-.314V3.314l-.1-.298a3.968 3.968 0 0 0-.99-1.61A4.136 4.136 0 0 0 20.9.3c-.437-.09-1.089-.11-1.48-.044m1.096 2.006c.7.165 1.299.73 1.5 1.415.057.195.064.865.064 6.45 0 3.428-.007 6.233-.016 6.233-.009 0-.148-.063-.31-.14-.396-.188-.986-.332-1.484-.363-.68-.041-1.486.123-2.05.418l-.235.12c-.02.009-.027-2.647-.015-6.24.019-5.745.027-6.273.089-6.475a2.079 2.079 0 0 1 2.457-1.418M15.958 13.41c-.01 6.574-.006 7.071.059 7.368.08.364.264.889.382 1.089a.667.667 0 0 1 .081.175c0 .024-2.703.038-7.16.038H2.16V6.36h13.808l-.01 7.05m-9.005-1.685c-2.623 2.255-2.651 2.28-2.754 2.479-.412.796.403 1.684 1.261 1.375.088-.032.165-.058.17-.058.005-.001.01.647.01 1.439v1.44H13v-3.084l.15.03c.376.074.66 0 .923-.241.229-.211.325-.421.326-.716a.886.886 0 0 0-.251-.663c-.133-.14-4.806-4.006-4.842-4.006-.011 0-1.07.902-2.353 2.005m3.277 1.334.77.633V16.4H7.64v-2.626l.847-.727c.737-.634.854-.721.91-.674.034.03.409.338.833.686m10.511 4.898c.446.157.876.515 1.141.952l.138.227.013.595c.011.509.001.634-.069.864a2.083 2.083 0 0 1-1.425 1.384c-1.077.28-2.195-.367-2.515-1.456-.092-.314-.084-.888.016-1.215.21-.678.833-1.251 1.536-1.411.326-.075.86-.047 1.165.06", "fill-rule": "evenodd" })),
176
+ structural: ((0, jsx_runtime_1.jsx)("path", { d: "M7.304 4.48C3.778 7.516 2.447 8.64 2.377 8.64c-.073 0-.098.022-.1.09-.002.066-.224.28-.844.81-.949.812-1.04.928-1.044 1.343-.001.126.022.29.052.363.208.521.803.782 1.31.575.094-.039.458-.317.819-.626l.648-.555H4.28v-.917l3.869-3.332c2.127-1.832 3.907-3.362 3.954-3.399.084-.068.15-.015 3.781 2.982l3.696 3.051.011.807.011.808H21.531l.275.222c.339.274.511.35.794.35.38 0 .705-.201.892-.552.064-.119.086-.231.086-.44 0-.319-.083-.517-.304-.727C23.091 9.321 12.186.321 12.158.32c-.012 0-2.196 1.872-4.854 4.16M2.29 15.67l.01 2.03.99.011.99.01V13.64H2.279l.011 2.03m17.31.011v2.04l.99-.01.99-.011.01-2.03.011-2.03H19.6v2.041M2.28 21.793c0 1.166.025 1.322.259 1.595.078.091.227.207.331.258.183.091.231.094 1.3.107l1.11.013v-2.004l-.49-.011-.49-.011-.011-.49-.011-.49H2.28v1.033m17.311-.543-.011.49-.49.011-.49.011v2.004l1.11-.013c1.069-.013 1.117-.016 1.3-.107.104-.051.253-.167.331-.258.234-.273.259-.429.259-1.595V20.76h-1.998l-.011.49M7.64 22.76v1h3.12v-2H7.64v1m5.48 0v1h3.12v-2h-3.12v1" })),
177
+ mep: ((0, jsx_runtime_1.jsx)("path", { d: "M8.32.262a2.994 2.994 0 0 0-.56.203c-.397.194-.922.713-1.109 1.097-.243.497-.25.572-.25 2.787L6.4 6.359l-1.33.01-1.33.011-.01 2.55-.011 2.55H5.274l.017 1.53c.018 1.686.026 1.752.296 2.55a5.657 5.657 0 0 0 3.483 3.52l.369.131.011 2.364.01 2.365 2.55.01 2.55.011v-4.715l.218-.064a5.731 5.731 0 0 0 3.936-4.122c.137-.554.166-.956.166-2.286V11.48H20.281l-.011-2.55-.01-2.55-1.308-.011-1.308-.01-.012-2.07-.012-2.069-.112-.32A2.565 2.565 0 0 0 15.913.316c-.251-.082-.37-.096-.833-.095-.615.001-.856.055-1.28.288-.375.206-.831.68-1.015 1.054-.253.515-.264.624-.264 2.827l-.001 1.97h-.994l-.017-2.05c-.013-1.697-.027-2.086-.078-2.256C11.155 1.13 10.437.451 9.536.26A3.38 3.38 0 0 0 8.32.262m.92 1.998c.247.128.24.07.24 1.989V6H8.4V4.278c0-1.88.001-1.891.231-2.015.142-.078.462-.079.609-.003m6.152.021c.244.149.248.179.248 2.038V6h-1.122l.011-1.757.011-1.757.1-.107a.68.68 0 0 1 .18-.141.775.775 0 0 1 .572.043M18.24 8.92v.56H5.76V8.36h12.48v.56m-1.37 4.03c-.015 1.219-.025 1.38-.101 1.659-.367 1.335-1.313 2.297-2.637 2.681-.303.087-.363.09-2.072.09H10.3l-.358-.112c-1.241-.388-2.15-1.298-2.527-2.528-.11-.358-.11-.368-.126-1.75l-.015-1.39h9.613l-.017 1.35m-4.31 7.731v1.281l-.55-.011-.55-.011-.011-1.27-.01-1.27h1.121v1.281", "fill-rule": "evenodd" })),
178
+ designPackage: ((0, jsx_runtime_1.jsx)("path", { d: "M6.591 5.633A1308.744 1308.744 0 0 0 .876 10.58c-.445.429-.438 1.092.016 1.481.165.141.469.259.668.259.181 0 .452-.115.66-.28l.2-.158.01 4.759.01 4.759h19.52v-4.94c0-2.717.007-4.94.015-4.94s.091.027.185.06c.213.075.333.075.584.001.699-.208.942-1.094.444-1.615-.07-.073-.772-.665-1.56-1.315L20.197 7.47l.614-.625c.338-.344.681-.724.762-.845.289-.428.427-1.092.348-1.672-.092-.669-.347-1.197-.8-1.649-.516-.517-1.076-.756-1.841-.789-.391-.017-.509-.007-.779.067-.559.154-.72.268-1.654 1.173-.471.457-.868.83-.883.83-.015 0-.878-.702-1.919-1.56A241.53 241.53 0 0 0 12.146.843l-5.555 4.79m6.769-1.207c.627.518 1.14.954 1.14.968 0 .014-1.242 1.243-2.76 2.73l-2.76 2.703-.606 2.537a134.196 134.196 0 0 0-.595 2.547c.006.007 1.115-.207 2.466-.474l2.455-.486 3.04-3.032 3.04-3.032.568.466.567.467.003 4.79.002 4.79H4.44v-9.268l3.85-3.323c2.118-1.828 3.868-3.324 3.89-3.325.022-.001.553.423 1.18.942m6.256-.412c.202.155.304.372.304.652v.228l-.628.633c-.346.348-.641.633-.657.633-.024 0-.908-.711-1.067-.859-.042-.039.09-.184.672-.739l.725-.691.253.016c.199.013.283.04.398.127M16.657 7.14c.297.242.54.449.541.46.001.011-1.231 1.253-2.738 2.76l-2.74 2.74-.63.126c-.347.07-.635.122-.64.117-.006-.006.073-.351.175-.767l.185-.756 2.625-2.568c1.444-1.413 2.638-2.565 2.653-2.56.016.004.272.206.569.448", "fill-rule": "evenodd" })),
179
+ updateDesignPackage: ((0, jsx_runtime_1.jsx)("path", { d: "M6.34 5.463C3.37 8.025.798 10.25.624 10.408c-.371.338-.478.537-.475.881a.953.953 0 0 0 .343.732c.165.141.469.259.67.259.173 0 .44-.111.636-.264l.182-.141.01 4.742L2 21.36h6.573c7.298 0 6.786.019 7.082-.269.234-.226.322-.427.322-.731 0-.393-.189-.697-.556-.894l-.161-.086-5.61-.011-5.61-.01v-9.267l3.863-3.329c2.125-1.831 3.884-3.32 3.91-3.309.067.029 2.285 1.867 2.299 1.905.006.017-1.116 1.136-2.494 2.486L9.112 10.3l-.213.012-.213.012-.062.268c-.033.147-.331 1.401-.662 2.785a111.038 111.038 0 0 0-.589 2.529c.007.007 1.118-.205 2.47-.471l2.457-.484 3.046-3.042 3.047-3.042.562.469.562.468.011 2.528c.012 2.477.014 2.532.097 2.711.108.235.337.456.56.541.209.08.612.061.803-.038.182-.094.374-.301.468-.506.08-.172.085-.255.096-1.87.007-.93.018-1.69.025-1.69.007 0 .083.029.168.065.196.082.539.056.762-.058.189-.097.398-.323.484-.524.126-.298.05-.767-.163-.997a34.338 34.338 0 0 0-1.108-.939 1093.61 1093.61 0 0 1-1.473-1.22l-.453-.376.678-.685c.738-.748.872-.943.993-1.456.089-.378.056-1.131-.065-1.49-.256-.759-.754-1.328-1.461-1.666a2.682 2.682 0 0 0-1.199-.252 2.34 2.34 0 0 0-1.139.263c-.306.151-.344.184-1.681 1.483l-.34.33-1.914-1.579a242.13 242.13 0 0 0-1.92-1.576c-.003.001-2.436 2.098-5.406 4.66m12.782-1.502c.235.12.371.352.391.666l.017.258-.638.641-.637.641-.497-.409a26.934 26.934 0 0 1-.557-.464c-.051-.047-.001-.114.38-.498.241-.244.561-.55.71-.68.253-.221.284-.236.472-.236.122 0 .262.032.359.081m-2.656 3.323.366.304-2.756 2.756L11.32 13.1l-.63.126c-.347.07-.636.121-.644.113a9.854 9.854 0 0 1 .159-.738l.173-.726.901-.892c.495-.491 1.693-1.667 2.661-2.614l1.759-1.72.201.165c.11.09.365.302.566.47m3.854 9.601c-.366.07-.687.404-.76.79-.022.119-.04.545-.04.948v.732l-.89.012c-.822.012-.902.02-1.05.099a1.007 1.007 0 0 0-.538.894c0 .377.202.712.538.894.148.079.228.087 1.046.099l.886.012.014.868c.013.809.02.879.106 1.054.051.104.163.251.248.328.149.134.474.265.66.265.186 0 .511-.131.66-.265.085-.077.197-.224.248-.328.086-.175.093-.245.106-1.054l.014-.868.886-.012c.962-.014 1.019-.026 1.28-.268.199-.185.266-.366.266-.725s-.067-.54-.266-.725c-.261-.242-.318-.254-1.28-.268l-.886-.012-.016-.868c-.017-.949-.034-1.029-.269-1.297-.225-.257-.599-.375-.963-.305", "fill-rule": "evenodd" })),
180
+ exteriorStyle: ((0, jsx_runtime_1.jsx)("path", { d: "m11.378 2.08-1.158.998-.078-.109a6.796 6.796 0 0 0-.36-.405 4.617 4.617 0 0 0-4.099-1.383c-1.436.233-2.759 1.221-3.384 2.527-.35.73-.478 1.362-.446 2.192.023.599.106 1.025.292 1.488l.104.26-.157.166A6.027 6.027 0 0 0 .787 9.985a5.927 5.927 0 0 0-.001 3.855c.292.87.765 1.625 1.437 2.297a5.61 5.61 0 0 0 1.389 1.044l.349.186-.011 2.206-.01 2.207-1.97.01-1.97.011V23.8h24v-2h-1.52v-9.918l.185.117a.96.96 0 0 0 1.16-.088L24 11.75v-1.173l-.17-.165c-.093-.09-2.645-2.202-5.67-4.693a5312.503 5312.503 0 0 1-5.562-4.583c-.053-.046-.217.081-1.22.944M7.24 3.235c.756.241 1.446.931 1.684 1.685.115.363.141.94.06 1.319-.091.426-.279.79-.7 1.355-.203.272-.364.498-.357.504l.513.371c.275.199.598.449.718.556.477.428.946 1.215 1.13 1.895.079.293.092.434.091 1.02 0 .588-.013.723-.092.999-.394 1.371-1.392 2.39-2.749 2.807-.332.102-.41.11-1.078.112-.636.002-.757-.009-1.04-.09-1.153-.332-2.032-1.061-2.542-2.108-.323-.663-.378-.918-.375-1.74.002-.833.062-1.108.377-1.748.347-.703.705-1.093 1.56-1.7.253-.18.475-.339.493-.355.019-.015-.133-.25-.336-.522-.563-.753-.756-1.238-.756-1.895 0-1.182.858-2.263 1.999-2.52.362-.082 1.056-.054 1.4.055m9.305 3.745c2.917 2.404 3.954 3.281 3.952 3.34-.001.044-.006 2.501-.01 5.46l-.007 5.38H8.92v-3.793l.348-.186a5.61 5.61 0 0 0 1.389-1.044 5.558 5.558 0 0 0 1.082-1.465c1.153-2.22.814-4.862-.867-6.761l-.238-.269.103-.258c.22-.55.28-.906.282-1.664.001-.686.003-.702.095-.776.052-.042.393-.334.759-.65s.677-.574.691-.574c.014 0 1.806 1.467 3.981 3.26M6.92 19.54v1.62h-.96v-3.24h.96v1.62", "fill-rule": "evenodd" })),
171
181
  };
package/dist/forms/BoundIconCardGroupField.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { FieldState } from "@homebound/form-state";
2
2
  import { IconCardGroupProps } from "../inputs/IconCardGroup";
3
- export type BoundIconCardGroupFieldProps = Omit<IconCardGroupProps, "label" | "values" | "onChange"> & {
4
- field: FieldState<string[] | null | undefined>;
3
+ import { Value } from "../inputs";
4
+ export type BoundIconCardGroupFieldProps<V extends Value> = Omit<IconCardGroupProps<V>, "label" | "values" | "onChange"> & {
5
+ field: FieldState<V[] | null | undefined>;
5
6
  /** Make optional so that callers can override if they want to. */
6
- onChange?: (values: string[]) => void;
7
+ onChange?: (values: V[]) => void;
7
8
  label?: string;
8
9
  };
9
10
  /** Wraps `IconCardGroup` and binds it to a form field. */
10
- export declare function BoundIconCardGroupField(props: BoundIconCardGroupFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
11
+ export declare function BoundIconCardGroupField<V extends Value>(props: BoundIconCardGroupFieldProps<V>): import("@emotion/react/jsx-runtime").JSX.Element;
package/dist/inputs/IconCardGroup.d.ts CHANGED
@@ -1,23 +1,26 @@
1
1
  import { ReactNode } from "react";
2
2
  import { IconProps } from "../components/Icon";
3
3
  import { PresentationFieldProps } from "../components/PresentationContext";
4
- export interface IconCardGroupItemOption {
4
+ import { Value } from "./";
5
+ export interface IconCardGroupItemOption<V extends Value> {
5
6
  icon: IconProps["icon"];
6
7
  label: string;
7
8
  disabled?: boolean;
8
9
  /** The value of the IconCardGroup item, stored in value array in state. */
9
- value: string;
10
+ value: V;
11
+ /** Exclusive: if true, this option will override all other options when selected. */
12
+ exclusive?: boolean;
10
13
  }
11
- export interface IconCardGroupProps extends Pick<PresentationFieldProps, "labelStyle"> {
14
+ export interface IconCardGroupProps<V extends Value> extends Pick<PresentationFieldProps, "labelStyle"> {
12
15
  label: string;
13
16
  /** Called when a card is selected */
14
- onChange: (values: string[]) => void;
17
+ onChange: (values: V[]) => void;
15
18
  /** Options for the cards contained within the IconCardGroup. */
16
- options: IconCardGroupItemOption[];
19
+ options: IconCardGroupItemOption<V>[];
17
20
  /** The values currently selected. */
18
- values: string[];
21
+ values: V[];
19
22
  errorMsg?: string;
20
23
  helperText?: string | ReactNode;
21
24
  disabled?: boolean;
22
25
  }
23
- export declare function IconCardGroup(props: IconCardGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
26
+ export declare function IconCardGroup<V extends Value>(props: IconCardGroupProps<V>): import("@emotion/react/jsx-runtime").JSX.Element;
package/dist/inputs/IconCardGroup.js CHANGED
@@ -2,8 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.IconCardGroup = void 0;
4
4
  const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
- const react_aria_1 = require("react-aria");
6
- const react_stately_1 = require("react-stately");
5
+ const react_1 = require("react");
7
6
  const Css_1 = require("../Css");
8
7
  const Label_1 = require("../components/Label");
9
8
  const PresentationContext_1 = require("../components/PresentationContext");
@@ -11,18 +10,47 @@ const utils_1 = require("../utils");
11
10
  const IconCard_1 = require("./IconCard");
12
11
  const HelperText_1 = require("../components/HelperText");
13
12
  const ErrorMessage_1 = require("./ErrorMessage");
13
+ const react_aria_1 = require("react-aria");
14
14
  function IconCardGroup(props) {
15
15
  var _a;
16
16
  const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
17
- const { options, label, labelStyle = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _a !== void 0 ? _a : "above", values, errorMsg, helperText, disabled: isDisabled = false, } = props;
18
- const state = (0, react_stately_1.useCheckboxGroupState)({ ...props, isDisabled, value: values });
19
- const { groupProps, labelProps } = (0, react_aria_1.useCheckboxGroup)(props, state);
17
+ const { options, label, labelStyle = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _a !== void 0 ? _a : "above", values, errorMsg, helperText, disabled: isDisabled = false, onChange, } = props;
18
+ const [selected, setSelected] = (0, react_1.useState)(values);
19
+ const exclusiveOptions = (0, react_1.useMemo)(() => options.filter((o) => o.exclusive), [options]);
20
+ const toggleValue = (0, react_1.useCallback)((value) => {
21
+ if (isDisabled)
22
+ return;
23
+ const option = options.find((o) => o.value === value);
24
+ if (!option)
25
+ return;
26
+ let newSelected = [];
27
+ if (selected.includes(value)) {
28
+ newSelected = selected.filter((v) => v !== value);
29
+ }
30
+ else {
31
+ if (option.exclusive) {
32
+ newSelected = [value];
33
+ }
34
+ else {
35
+ newSelected = [...selected, value];
36
+ // Filter out any exclusive options as a non-exclusive option was selected.
37
+ newSelected = newSelected.filter((v) => !exclusiveOptions.some((o) => o.value === v));
38
+ }
39
+ }
40
+ setSelected(newSelected);
41
+ onChange(newSelected);
42
+ }, [exclusiveOptions, isDisabled, onChange, options, selected]);
20
43
  const tid = (0, utils_1.useTestIds)(props);
21
- return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, ...tid, children: [labelStyle !== "hidden" && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.if(labelStyle === "left").w50.$, children: (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, ...tid.label }) })), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap2.add({ flexWrap: "wrap" }).$, children: options.map((option) => {
44
+ const { labelProps, fieldProps: fieldPropsAria } = (0, react_aria_1.useField)(props);
45
+ const groupProps = (0, react_aria_1.mergeProps)(tid, {
46
+ role: "group",
47
+ "aria-disabled": isDisabled || undefined,
48
+ ...fieldPropsAria,
49
+ });
50
+ return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, children: [labelStyle !== "hidden" && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.if(labelStyle === "left").w50.$, children: (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, ...tid.label }) })), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap2.add({ flexWrap: "wrap" }).$, children: options.map((option) => {
22
51
  const { icon, label, disabled } = option;
23
- const isSelected = state.isSelected(option.value);
24
- const isDisabled = disabled || state.isDisabled;
25
- return ((0, jsx_runtime_1.jsx)(IconCard_1.IconCard, { icon: icon, label: label, selected: isSelected, disabled: isDisabled, onChange: () => state.toggleValue(option.value), ...tid[option.value] }, option.value));
52
+ const isSelected = selected.includes(option.value);
53
+ return ((0, jsx_runtime_1.jsx)(IconCard_1.IconCard, { icon: icon, label: label, selected: isSelected, disabled: disabled, onChange: () => toggleValue(option.value), ...tid[option.label] }, option.label));
26
54
  }) }), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { errorMsg: errorMsg, ...tid.errorMsg }), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText, ...tid.helperText })] }));
27
55
  }
28
56
  exports.IconCardGroup = IconCardGroup;
package/dist/utils/useTestIds.d.ts CHANGED
@@ -1,4 +1,35 @@
1
1
  export type TestIds = Record<string, object>;
2
+ /**
3
+ * Provides a way to easily generate `data-testid`s.
4
+ *
5
+ * The test ids are made of a `${prefix}_${key}`, where:
6
+ *
7
+ * - The prefix is the component name, like "profile", and
8
+ * - The key is the specific DOM element that's being tagged, like "firstName"
9
+ *
10
+ * To determine the prefix, the component passes us their props, which we'll use
11
+ * to look for an incoming `data-testid` to become the prefix the `data-testid`s
12
+ * that we create. I.e.:
13
+ *
14
+ * ```tsx
15
+ * const { a, b } = props;
16
+ * const tid = useTestIds(props);
17
+ *
18
+ * return <Foo {...tid.foo} />;
19
+ * ```
20
+ *
21
+ * This allows components that embed the component to customize the prefix, i.e.
22
+ * `<TextField data-testid="firstName" />` and `<TextField data-testid="lastName" />`
23
+ * would produce, within `TextField` itself, ids like:
24
+ *
25
+ * - `firstName_input`
26
+ * - `firstName_errors`
27
+ * - `lastName_input`
28
+ * - `lastName_errors`
29
+ *
30
+ * @param props the component's `props` object, which we'll scan for `data-testid` to use as the prefix
31
+ * @param defaultPrefix the default prefix to use if no `data-testid` is found on `props`
32
+ */
2
33
  export declare function useTestIds(props: object, defaultPrefix?: string): Record<string, object>;
3
34
  /** Uses `object` for any keys that exist on it, otherwise calls `methodMissing` fn. */
4
35
  export declare function newMethodMissingProxy<T extends object, Y>(object: T, methodMissing: (key: string) => Y): T & Record<string, Y>;
package/dist/utils/useTestIds.js CHANGED
@@ -1,10 +1,11 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.newMethodMissingProxy = exports.useTestIds = void 0;
4
+ const defaultTestId_1 = require("./defaultTestId");
4
5
  /**
5
6
  * Provides a way to easily generate `data-testid`s.
6
7
  *
7
- * The test ids are made of a `prefix` + `_` + `key`, where:
8
+ * The test ids are made of a `${prefix}_${key}`, where:
8
9
  *
9
10
  * - The prefix is the component name, like "profile", and
10
11
  * - The key is the specific DOM element that's being tagged, like "firstName"
@@ -15,9 +16,9 @@ exports.newMethodMissingProxy = exports.useTestIds = void 0;
15
16
  *
16
17
  * ```tsx
17
18
  * const { a, b } = props;
18
- * const testIds = useTestIds(props);
19
+ * const tid = useTestIds(props);
19
20
  *
20
- * return <Foo {...testIds.foo />;
21
+ * return <Foo {...tid.foo} />;
21
22
  * ```
22
23
  *
23
24
  * This allows components that embed the component to customize the prefix, i.e.
@@ -28,9 +29,10 @@ exports.newMethodMissingProxy = exports.useTestIds = void 0;
28
29
  * - `firstName_errors`
29
30
  * - `lastName_input`
30
31
  * - `lastName_errors`
31
- * - etc
32
+ *
33
+ * @param props the component's `props` object, which we'll scan for `data-testid` to use as the prefix
34
+ * @param defaultPrefix the default prefix to use if no `data-testid` is found on `props`
32
35
  */
33
- const defaultTestId_1 = require("./defaultTestId");
34
36
  function useTestIds(props, defaultPrefix) {
35
37
  const prefix = props["data-testid"] ||
36
38
  // Pass defaultPrefix through defaultTestId to allow `useTestIds(..., label)` usage
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homebound/beam",
3
- "version": "2.324.3",
3
+ "version": "2.325.1",
4
4
  "author": "Homebound",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -15,7 +15,7 @@
15
15
  "!dist/setupTests.*"
16
16
  ],
17
17
  "engines": {
18
- "node": ">=18.13.0"
18
+ "node": "~20.9.0"
19
19
  },
20
20
  "scripts": {
21
21
  "start": "yarn storybook",