npm - @homefile/components-v2 - Versions diffs - 2.37.4 → 2.37.6 - Mend

@homefile/components-v2 2.37.4 → 2.37.6

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 (17) hide show

package/dist/assets/images/flag2.svg +19 -0
package/dist/assets/images/index.d.ts +2 -1
package/dist/assets/images/index.js +2 -1
package/dist/assets/images/plumbernearme/pnm-wtrhtr.svg +26 -4
package/dist/assets/locales/en/index.json +2 -0
package/dist/components/feedback/NpsScoreButtons.d.ts +4 -0
package/dist/components/feedback/NpsScoreButtons.js +58 -0
package/dist/components/feedback/index.d.ts +1 -0
package/dist/components/feedback/index.js +1 -0
package/dist/interfaces/feedback/NpsScoreButtons.interface.d.ts +15 -0
package/dist/interfaces/feedback/NpsScoreButtons.interface.js +1 -0
package/dist/interfaces/feedback/index.d.ts +1 -0
package/dist/interfaces/feedback/index.js +1 -0
package/dist/stories/assets/Illustrations.stories.js +2 -2
package/dist/stories/feedback/NpsScoreButtons.stories.d.ts +5 -0
package/dist/stories/feedback/NpsScoreButtons.stories.js +15 -0
package/package.json +1 -1

package/dist/assets/images/flag2.svg ADDED Viewed

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="71.284" height="60.608" viewBox="0 0 71.284 60.608">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Retângulo_17625" data-name="Retângulo 17625" width="71.284" height="60.608" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Grupo_15502" data-name="Grupo 15502" clip-path="url(#clip-path)">
+    <path id="Caminho_11785" data-name="Caminho 11785" d="M23.692,55.852A37.174,37.174,0,0,1,71.284,80.613H0A37.22,37.22,0,0,1,23.692,55.852" transform="translate(0 -20.005)" fill="#00c0b7"/>
+    <path id="Caminho_11786" data-name="Caminho 11786" d="M77.6,12.189,72.358,19.86,77.6,27.519H57.229L65.3,19.86V12.189Z" transform="translate(-21.245 -4.525)" fill="#cd4160"/>
+    <path id="Caminho_11787" data-name="Caminho 11787" d="M65.3,24.39,57.23,32.048V24.39Z" transform="translate(-21.245 -9.054)" fill="#324458"/>
+    <path id="Caminho_11788" data-name="Caminho 11788" d="M58.039,7.665v7.671H37.68V0h20.36Z" transform="translate(-13.988 0)" fill="#e24c5d"/>
+    <rect id="Retângulo_17624" data-name="Retângulo 17624" width="1.886" height="44.944" transform="translate(22.749 0.001)" fill="#324458"/>
+    <path id="Caminho_11789" data-name="Caminho 11789" d="M33.437,73.934c-4.03,0-7.187-2.025-7.187-4.609,0-1.456,1-2.785,2.744-3.649l.838,1.69c-1.061.526-1.7,1.258-1.7,1.959,0,1.288,2.177,2.723,5.3,2.723s5.3-1.435,5.3-2.723a1.587,1.587,0,0,0-.409-1l1.459-1.195a3.461,3.461,0,0,1,.836,2.194c0,2.584-3.157,4.609-7.187,4.609" transform="translate(-9.745 -24.38)" fill="#00a1aa"/>
+    <path id="Caminho_11790" data-name="Caminho 11790" d="M68.565,66.39a5.2,5.2,0,0,1-2.353-.576,5.078,5.078,0,0,1-2.35-2.414,3.615,3.615,0,0,1,.021-3.171,3.539,3.539,0,0,1,1.778-1.635l.75,1.73a1.655,1.655,0,0,0-.849.765,1.766,1.766,0,0,0,.024,1.544,3.187,3.187,0,0,0,1.484,1.5c1.336.679,2.837.42,3.345-.577a1.314,1.314,0,0,0,.135-.412l1.864.285a3.193,3.193,0,0,1-.321.988,3.85,3.85,0,0,1-3.527,1.972" transform="translate(-23.575 -21.751)" fill="#00a1aa"/>
+    <path id="Caminho_11791" data-name="Caminho 11791" d="M86.536,83.1a4.663,4.663,0,1,1,0-9.287,5.367,5.367,0,0,1,3.41,1.2l-1.2,1.456a3.484,3.484,0,0,0-2.213-.766,2.788,2.788,0,1,0,0,5.514,3.556,3.556,0,0,0,1.6-.372l.843,1.688a5.428,5.428,0,0,1-2.447.571" transform="translate(-30.236 -27.4)" fill="#00a1aa"/>
+    <path id="Caminho_11792" data-name="Caminho 11792" d="M19.049,86.464A4.068,4.068,0,0,1,15.591,84.7l1.6-1.008a2.2,2.2,0,0,0,1.862.888c1.111,0,2.05-.689,2.05-1.5,0-.751-.8-1.41-1.825-1.5l.165-1.879a3.625,3.625,0,0,1,3.546,3.379,3.7,3.7,0,0,1-3.936,3.39" transform="translate(-5.788 -29.584)" fill="#00a1aa"/>
+    <path id="Caminho_11793" data-name="Caminho 11793" d="M50.33,91.253a4.8,4.8,0,0,1-.394-1.91,4.971,4.971,0,0,1,5.023-4.9,5.063,5.063,0,0,1,4.513,2.748l1.688-.844a6.933,6.933,0,0,0-13.111,3,6.659,6.659,0,0,0,.282,1.91Z" transform="translate(-17.837 -30.645)" fill="#00a1aa"/>
+  </g>
+</svg>

package/dist/assets/images/index.d.ts CHANGED Viewed

@@ -58,6 +58,7 @@ import FilterSize from './filter-size.png';
 import Finance from './finance.svg';
 import Fire from './fire.svg';
 import Flag from './flag.png';
+import Flag2 from './flag2.svg';
 import Flower from './flower.svg';
 import FormSent from './form-sent.svg';
 import Foundation from './foundation.svg';
@@ -169,7 +170,7 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueCirclePlus, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, Flower, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Jacuzzi, Kitchen, Laundry, LifePreserver, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, MagnifyingGlassPerson, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plant, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Wallet, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueCirclePlus, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, Flag2, Flower, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Jacuzzi, Kitchen, Laundry, LifePreserver, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, MagnifyingGlassPerson, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plant, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Wallet, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
 export * from './animations';
 export * from './appliances';

package/dist/assets/images/index.js CHANGED Viewed

@@ -58,6 +58,7 @@ import FilterSize from './filter-size.png';
 import Finance from './finance.svg';
 import Fire from './fire.svg';
 import Flag from './flag.png';
+import Flag2 from './flag2.svg';
 import Flower from './flower.svg';
 import FormSent from './form-sent.svg';
 import Foundation from './foundation.svg';
@@ -169,7 +170,7 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueCirclePlus, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, Flower, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Jacuzzi, Kitchen, Laundry, LifePreserver, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, MagnifyingGlassPerson, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plant, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Wallet, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueCirclePlus, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, Flag2, Flower, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Jacuzzi, Kitchen, Laundry, LifePreserver, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, MagnifyingGlassPerson, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plant, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Wallet, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
 export * from './animations';
 export * from './appliances';

package/dist/assets/images/plumbernearme/pnm-wtrhtr.svg CHANGED Viewed

@@ -1,6 +1,28 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="49" height="49" viewBox="0 0 49 49">
-  <g id="Ellipse_1192" data-name="Ellipse 1192" fill="none" stroke="#e72418" stroke-width="2">
-    <circle cx="24.5" cy="24.5" r="24.5" stroke="none"/>
-    <circle cx="24.5" cy="24.5" r="23.5" fill="none"/>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="49" height="49" viewBox="0 0 49 49">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_26270" data-name="Rectangle 26270" width="15.759" height="32.921" fill="none" stroke="#0f74bc" stroke-width="1.25"/>
+    </clipPath>
+  </defs>
+  <g id="Group_26096" data-name="Group 26096" transform="translate(-637.75 -505.854)">
+    <g id="Group_26082" data-name="Group 26082" transform="translate(654.75 513.854)">
+      <line id="Line_3620" data-name="Line 3620" y1="1.184" transform="translate(7.88 24.45)" fill="none" stroke="#0f74bc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25"/>
+      <g id="Group_26081" data-name="Group 26081" transform="translate(0 0)">
+        <g id="Group_26080" data-name="Group 26080" clip-path="url(#clip-path)">
+          <path id="Path_18470" data-name="Path 18470" d="M14.111,6.85H14.7a1.187,1.187,0,0,1,1.184,1.184V33.481A1.187,1.187,0,0,1,14.7,34.664H1.684A1.187,1.187,0,0,1,.5,33.481V8.034A1.187,1.187,0,0,1,1.684,6.85H14.111Z" transform="translate(-0.314 -4.296)" fill="none" stroke="#0f74bc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25"/>
+          <path id="Path_18471" data-name="Path 18471" d="M31.445,81.468v2.367H29.077V81.468" transform="translate(-18.239 -51.1)" fill="none" stroke="#0f74bc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25"/>
+          <path id="Path_18472" data-name="Path 18472" d="M9.218,81.468v2.367H6.851V81.468" transform="translate(-4.297 -51.1)" fill="none" stroke="#0f74bc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25"/>
+          <path id="Path_18473" data-name="Path 18473" d="M17.1,2.867V1.684A1.187,1.187,0,0,0,15.915.5H6.447A1.187,1.187,0,0,0,5.263,1.684V2.867" transform="translate(-3.301 -0.313)" fill="none" stroke="#0f74bc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25"/>
+          <path id="Path_18474" data-name="Path 18474" d="M6.85,63.543V52.891H17.5V63.543" transform="translate(-4.297 -33.176)" fill="none" stroke="#0f74bc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25"/>
+          <path id="Path_18475" data-name="Path 18475" d="M17.935,21.11c1.136-.071,1.675-2.095.592-3.551,0,1.231-1.184,1.018-1.184,1.775-1.16-1.16.627-1.148-1.184-2.959,0,1.775-1.136,1.184-1.136,2.959,0,0-.639-1.775-1.823-1.775,1.219,1.219-.911,2.048.592,3.551" transform="translate(-8.28 -10.272)" fill="none" stroke="#0f74bc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25"/>
+          <line id="Line_3621" data-name="Line 3621" x2="4.734" transform="translate(5.513 13.206)" fill="none" stroke="#0f74bc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25"/>
+          <circle id="Ellipse_1191" data-name="Ellipse 1191" cx="1.775" cy="1.775" r="1.775" transform="translate(6.104 24.45)" fill="none" stroke="#0f74bc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25"/>
+        </g>
+      </g>
+    </g>
+    <g id="Ellipse_1192" data-name="Ellipse 1192" transform="translate(637.75 505.854)" fill="none" stroke="#e72418" stroke-width="2">
+      <circle cx="24.5" cy="24.5" r="24.5" stroke="none"/>
+      <circle cx="24.5" cy="24.5" r="23.5" fill="none"/>
+    </g>
   </g>
 </svg>

package/dist/assets/locales/en/index.json CHANGED Viewed

@@ -200,6 +200,8 @@
   "feedback": {
     "alt": "Feedback sent",
     "categories": "General Feedback, Bug, Account Related, Feature Request",
+    "lessLikely": "Less Likely",
+    "moreLikely": "More Likely",
     "ok": "Ok",
     "placeholder": "Type your message",
     "response": "We will respond within the next 24 hours.",

package/dist/components/feedback/NpsScoreButtons.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { NpsScoreButtonsI, TriangleDownIconI } from '../../interfaces';
+export declare const NpsScoreButtons: FC<NpsScoreButtonsI>;
+export declare const TriangleDownIcon: FC<TriangleDownIconI>;

package/dist/components/feedback/NpsScoreButtons.js ADDED Viewed

@@ -0,0 +1,58 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { t } from 'i18next';
+import { Box, Button, HStack, Text, VStack } from '@chakra-ui/react';
+export const NpsScoreButtons = ({ value, defaultValue, onChange, min = 0, max = 10, leftLabel = t('feedback.lessLikely'), rightLabel = t('feedback.moreLikely'), isDisabled, }) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : internalValue;
+    const handleClick = (score) => {
+        if (!isControlled) {
+            setInternalValue(score);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(score);
+    };
+    const purple = '#6041B7';
+    const colors = [
+        '#9B0000',
+        '#B45711',
+        '#EA7425',
+        '#ED9E07',
+        '#DAC410',
+        '#B7BC2B',
+        '#B2D53F',
+        '#A4D854',
+        '#76CE2B',
+        '#57D32A',
+        '#23B500',
+    ];
+    const scores = useMemo(() => Array.from({ length: max - min + 1 }, (_, i) => min + i), [min, max]);
+    return (_jsxs(Box, { children: [_jsxs(HStack, { justify: "space-between", children: [_jsx(Text, { fontSize: "xxs", color: colors[0], fontWeight: "semibold", children: leftLabel }), _jsx(Text, { fontSize: "xxs", color: colors[colors.length - 1], fontWeight: "semibold", children: rightLabel })] }), _jsx(HStack, { spacing: 1, justify: "space-between", mt: "-2", children: scores.map((score, index) => {
+                    var _a;
+                    const isSelected = score === currentValue;
+                    const bgColor = isSelected
+                        ? purple
+                        : (_a = colors[index]) !== null && _a !== void 0 ? _a : colors[colors.length - 1];
+                    return (_jsxs(VStack, { spacing: 1, align: "center", flex: "1", minW: "0", children: [isSelected ? (_jsx(TriangleDownIcon, { boxSize: 2, color: purple })) : (
+                            // Empty box to keep all numbers aligned vertically
+                            _jsx(Box, { boxSize: 2 })), _jsx(Box, { as: Button, px: 0, minW: "23px", h: "32px", borderRadius: "0", bg: bgColor, color: "white", fontSize: isSelected ? 'md' : 'sm', fontWeight: isSelected ? 'bold' : 'semibold', boxShadow: isSelected ? 'md' : 'none', _hover: { opacity: 0.5, _disabled: { opacity: 1 } }, onClick: () => handleClick(score), isDisabled: isDisabled, "aria-pressed": isSelected, transition: "opacity 0.2s, box-shadow 0.4s", outline: "none", _focus: { borderRadius: 'none', bg: bgColor }, _focusVisible: { borderRadius: 'none', bg: bgColor }, sx: {
+                                    WebkitTapHighlightColor: 'transparent',
+                                }, children: score })] }, score));
+                }) })] }));
+};
+export const TriangleDownIcon = (_a) => {
+    var { size = 8, color = 'currentColor' } = _a, rest = __rest(_a, ["size", "color"]);
+    const half = size / 2;
+    return (_jsx(Box, Object.assign({ as: "span", display: "inline-block", w: "0", h: "0", lineHeight: "0", borderLeft: `${half}px solid transparent`, borderRight: `${half}px solid transparent`, borderTop: `${size}px solid`, borderTopColor: color }, rest)));
+};

package/dist/components/feedback/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 export * from './ContactForm';
 export * from './Feedback';
 export * from './FormReceived';
+export * from './NpsScoreButtons';

package/dist/components/feedback/index.js CHANGED Viewed

@@ -1,3 +1,4 @@
 export * from './ContactForm';
 export * from './Feedback';
 export * from './FormReceived';
+export * from './NpsScoreButtons';

package/dist/interfaces/feedback/NpsScoreButtons.interface.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { BoxProps } from '@chakra-ui/react';
+export interface NpsScoreButtonsI {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    leftLabel?: string;
+    rightLabel?: string;
+    isDisabled?: boolean;
+}
+export interface TriangleDownIconI extends BoxProps {
+    size?: number;
+    color?: string;
+}

package/dist/interfaces/feedback/NpsScoreButtons.interface.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/interfaces/feedback/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 export * from './ContactForm.interface';
 export * from './Feedback.interface';
 export * from './FormReceived.interface';
+export * from './NpsScoreButtons.interface';

package/dist/interfaces/feedback/index.js CHANGED Viewed

@@ -1,3 +1,4 @@
 export * from './ContactForm.interface';
 export * from './Feedback.interface';
 export * from './FormReceived.interface';
+export * from './NpsScoreButtons.interface';

package/dist/stories/assets/Illustrations.stories.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Center, Grid, Image, Text } from '@chakra-ui/react';
-import { AlertDelete, AlertDeletePurple, Arrow, Balustrades, Barcode, Batery, Bathroom, Battery, Battery2, Bedding, Bedroom, BillingAddress, Billing, BlueCirclePlus, BlueFolder, BlueFolderShared, Book, Box as BoxIcon, Building, Calc, Calendar, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Cookware, Countertops, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Doors, Drop, DropCalendar, Electricity, Electronics, Entryway, EstValue, Equipment, Exclamation, Exterior, Face, Feedback, FileUploading, Finance, Fire, Flag, Flower, Flooring, FormSent, Foundation, Furniture, Garage, GearPencil, GearTime, GenericField, GlassWater, GoldenBars, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Hardware, Heart, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Jacuzzi, Kitchen, LargeAppliances, Laundry, Light, Lighting, LivingRoom, LogoSmall, MagnifyingGlassReport, MagnifyingGlassPerson, Manager, MasterBedroom, Mattress, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Notes, Office, Paint, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plants, Plate, Play, Plus, Pool, Pool2, PressureWasher, Porch, Price, Profile, ProgressReport, Proposal, Rating, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, Registry, RelationshipHome, ResendPassword, Rocket, Roof, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SmallAppliances, SolarPanel, Speaker, Sprinkler, Steps, Structure, Structures, Subscription, Supplies, Table, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Tile, Tools, Tools2, Trash, Utensils, VideoIcon, VideoPlay, VioletFolder, WallDecor, Wallet, Warning, Warranty, Water, WellDone, WholeHome, Wind, Window, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, BookOpened, Company2, } from '../../assets/images';
+import { AlertDelete, AlertDeletePurple, Arrow, Balustrades, Barcode, Batery, Bathroom, Battery, Battery2, Bedding, Bedroom, BillingAddress, Billing, BlueCirclePlus, BlueFolder, BlueFolderShared, Book, Box as BoxIcon, Building, Calc, Calendar, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Cookware, Countertops, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Doors, Drop, DropCalendar, Electricity, Electronics, Entryway, EstValue, Equipment, Exclamation, Exterior, Face, Feedback, FileUploading, Finance, Fire, Flag, Flag2, Flower, Flooring, FormSent, Foundation, Furniture, Garage, GearPencil, GearTime, GenericField, GlassWater, GoldenBars, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Hardware, Heart, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Jacuzzi, Kitchen, LargeAppliances, Laundry, Light, Lighting, LivingRoom, LogoSmall, MagnifyingGlassReport, MagnifyingGlassPerson, Manager, MasterBedroom, Mattress, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Notes, Office, Paint, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plants, Plate, Play, Plus, Pool, Pool2, PressureWasher, Porch, Price, Profile, ProgressReport, Proposal, Rating, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, Registry, RelationshipHome, ResendPassword, Rocket, Roof, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SmallAppliances, SolarPanel, Speaker, Sprinkler, Steps, Structure, Structures, Subscription, Supplies, Table, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Tile, Tools, Tools2, Trash, Utensils, VideoIcon, VideoPlay, VioletFolder, WallDecor, Wallet, Warning, Warranty, Water, WellDone, WholeHome, Wind, Window, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, BookOpened, Company2, } from '../../assets/images';
 import { CookTop, Dishwasher, Dryer, Freezer, Fridge, Microwave, Oven, Range, Washer, tankWater, tanklessWater, } from '../../assets/images/appliances';
 import { BatterySmokeDetector, Co2Detector, FireExtinguisher, Furnace, HeatPump, InWall, LandscapeLights, Other, SprinklerSystem, SprinklerSystem2, WiredSmokeDetector, } from '../../assets/images/home-assistant';
 export default {
     title: 'Assets/Illustrations',
 };
 export const Illustrations = () => {
-    return (_jsxs(Grid, { maxW: "600px", templateColumns: "repeat(auto-fill, minmax(75px, 1fr))", p: "base", gap: "8", children: [_jsx(IconWrapper, { icon: CookTop, name: "CookTop" }), _jsx(IconWrapper, { icon: Dishwasher, name: "Dishwasher" }), _jsx(IconWrapper, { icon: Dryer, name: "Dryer" }), _jsx(IconWrapper, { icon: Freezer, name: "Freezer" }), _jsx(IconWrapper, { icon: Fridge, name: "Fridge" }), _jsx(IconWrapper, { icon: Microwave, name: "Microwave" }), _jsx(IconWrapper, { icon: Oven, name: "Oven" }), _jsx(IconWrapper, { icon: Range, name: "Range" }), _jsx(IconWrapper, { icon: Washer, name: "Washer" }), _jsx(IconWrapper, { icon: tankWater, name: "TankWater" }), _jsx(IconWrapper, { icon: tanklessWater, name: "TanklessWater" }), _jsx(IconWrapper, { icon: BatterySmokeDetector, name: "BatterySmokeDetector" }), _jsx(IconWrapper, { icon: Co2Detector, name: "Co2Detector" }), _jsx(IconWrapper, { icon: FireExtinguisher, name: "FireExtinguisher" }), _jsx(IconWrapper, { icon: Furnace, name: "Furnace" }), _jsx(IconWrapper, { icon: HeatPump, name: "HeatPump" }), _jsx(IconWrapper, { icon: InWall, name: "InWall" }), _jsx(IconWrapper, { icon: Jacuzzi, name: "Jacuzzi" }), _jsx(IconWrapper, { icon: LandscapeLights, name: "LandscapeLights" }), _jsx(IconWrapper, { icon: Other, name: "Other" }), _jsx(IconWrapper, { icon: SprinklerSystem, name: "SprinklerSystem" }), _jsx(IconWrapper, { icon: SprinklerSystem2, name: "SprinklerSystem2" }), _jsx(IconWrapper, { icon: WiredSmokeDetector, name: "WiredSmokeDetector" }), _jsx(IconWrapper, { icon: Barcode, name: "Barcode" }), _jsx(IconWrapper, { icon: Book, name: "Book" }), _jsx(IconWrapper, { icon: Calendar, name: "Calendar" }), _jsx(IconWrapper, { icon: GoldenBars, name: "GoldenBars" }), _jsx(IconWrapper, { icon: Heart, name: "Heart" }), _jsx(IconWrapper, { icon: Notes, name: "Notes" }), _jsx(IconWrapper, { icon: Rating, name: "Rating" }), _jsx(IconWrapper, { icon: Registry, name: "Registry" }), _jsx(IconWrapper, { icon: Tools2, name: "Tools2" }), _jsx(IconWrapper, { icon: Balustrades, name: "Balustrades" }), _jsx(IconWrapper, { icon: Bedding, name: "Bedding" }), _jsx(IconWrapper, { icon: Cookware, name: "Cookware" }), _jsx(IconWrapper, { icon: Countertops, name: "Countertops" }), _jsx(IconWrapper, { icon: Doors, name: "Doors" }), _jsx(IconWrapper, { icon: Electronics, name: "Electronics" }), _jsx(IconWrapper, { icon: Equipment, name: "Equipment" }), _jsx(IconWrapper, { icon: Exterior, name: "Exterior" }), _jsx(IconWrapper, { icon: Fire, name: "Fire" }), _jsx(IconWrapper, { icon: Flooring, name: "Flooring" }), _jsx(IconWrapper, { icon: Furniture, name: "Furniture" }), _jsx(IconWrapper, { icon: Hardware, name: "Hardware" }), _jsx(IconWrapper, { icon: LargeAppliances, name: "LargeAppliances" }), _jsx(IconWrapper, { icon: Lighting, name: "Lighting" }), _jsx(IconWrapper, { icon: Mattress, name: "Mattress" }), _jsx(IconWrapper, { icon: Paint, name: "Paint" }), _jsx(IconWrapper, { icon: Plants, name: "Plants" }), _jsx(IconWrapper, { icon: Porch, name: "Porch" }), _jsx(IconWrapper, { icon: Roof, name: "Roof" }), _jsx(IconWrapper, { icon: SmallAppliances, name: "SmallAppliances" }), _jsx(IconWrapper, { icon: Steps, name: "Steps" }), _jsx(IconWrapper, { icon: Structures, name: "Structures" }), _jsx(IconWrapper, { icon: Supplies, name: "Supplies" }), _jsx(IconWrapper, { icon: Table, name: "Table" }), _jsx(IconWrapper, { icon: Temperature, name: "Temperature" }), _jsx(IconWrapper, { icon: Tile, name: "Tile" }), _jsx(IconWrapper, { icon: Tools, name: "Tools" }), _jsx(IconWrapper, { icon: Utensils, name: "Utensils" }), _jsx(IconWrapper, { icon: WallDecor, name: "WallDecor" }), _jsx(IconWrapper, { icon: Water, name: "Water" }), _jsx(IconWrapper, { icon: Window, name: "Window" }), _jsx(IconWrapper, { icon: AlertDelete, name: "AlertDelete" }), _jsx(IconWrapper, { icon: AlertDeletePurple, name: "AlertDeletePurple" }), _jsx(IconWrapper, { icon: Arrow, name: "Arrow" }), _jsx(IconWrapper, { icon: Batery, name: "Batery" }), _jsx(IconWrapper, { icon: Bathroom, name: "Bathroom" }), _jsx(IconWrapper, { icon: Battery, name: "Battery" }), _jsx(IconWrapper, { icon: Battery2, name: "Battery2" }), _jsx(IconWrapper, { icon: Bedroom, name: "Bedroom" }), _jsx(IconWrapper, { icon: BillingAddress, name: "BillingAddress" }), _jsx(IconWrapper, { icon: Billing, name: "Billing" }), _jsx(IconWrapper, { icon: BlueCirclePlus, name: "BlueCirclePlus" }), _jsx(IconWrapper, { icon: BlueFolder, name: "BlueFolder" }), _jsx(IconWrapper, { icon: BlueFolderShared, name: "BlueFolderShared" }), _jsx(IconWrapper, { icon: BookOpened, name: "BookOpened" }), _jsx(IconWrapper, { icon: BoxIcon, name: "Box" }), _jsx(IconWrapper, { icon: Building, name: "Building" }), _jsx(IconWrapper, { icon: Calc, name: "Calc" }), _jsx(IconWrapper, { icon: Calendar2, name: "Calendar2" }), _jsx(IconWrapper, { icon: Catalog, name: "Catalog" }), _jsx(IconWrapper, { icon: Check, name: "Check" }), _jsx(IconWrapper, { icon: CheckInCircle, name: "CheckInCircle" }), _jsx(IconWrapper, { icon: CheckPen, name: "CheckPen" }), _jsx(IconWrapper, { icon: Chemistry, name: "Chemistry" }), _jsx(IconWrapper, { icon: CircleFace, name: "CircleFace" }), _jsx(IconWrapper, { icon: Cleaning, name: "Cleaning" }), _jsx(IconWrapper, { icon: Closet, name: "Closet" }), _jsx(IconWrapper, { icon: Co2, name: "Co2" }), _jsx(IconWrapper, { icon: Company, name: "Company" }), _jsx(IconWrapper, { icon: Company2, name: "Company2" }), _jsx(IconWrapper, { icon: ComputerReport, name: "ComputerReport" }), _jsx(IconWrapper, { icon: Confirmation, name: "Confirmation" }), _jsx(IconWrapper, { icon: Construction, name: "Construction" }), _jsx(IconWrapper, { icon: Contacts, name: "Contacts" }), _jsx(IconWrapper, { icon: Contacts2, name: "Contacts2" }), _jsx(IconWrapper, { icon: Contributor, name: "Contributor" }), _jsx(IconWrapper, { icon: CreditCard, name: "CreditCard" }), _jsx(IconWrapper, { icon: Detector, name: "Detector" }), _jsx(IconWrapper, { icon: Diamond, name: "Diamond" }), _jsx(IconWrapper, { icon: DiningRoom, name: "DiningRoom" }), _jsx(IconWrapper, { icon: DocIcon, name: "DocIcon" }), _jsx(IconWrapper, { icon: Document, name: "Document" }), _jsx(IconWrapper, { icon: Document2, name: "Document2" }), _jsx(IconWrapper, { icon: Drop, name: "Drop" }), _jsx(IconWrapper, { icon: DropCalendar, name: "DropCalendar" }), _jsx(IconWrapper, { icon: Electricity, name: "Electricity" }), _jsx(IconWrapper, { icon: Entryway, name: "Entryway" }), _jsx(IconWrapper, { icon: EstValue, name: "EstValue" }), _jsx(IconWrapper, { icon: Exclamation, name: "Exclamation" }), _jsx(IconWrapper, { icon: Face, name: "Face" }), _jsx(IconWrapper, { icon: Feedback, name: "Feedback" }), _jsx(IconWrapper, { icon: FileUploading, name: "FileUploading" }), _jsx(IconWrapper, { icon: Finance, name: "Finance" }), _jsx(IconWrapper, { icon: Flag, name: "Flag" }), _jsx(IconWrapper, { icon: Flower, name: "Flower" }), _jsx(IconWrapper, { icon: FormSent, name: "FormSent" }), _jsx(IconWrapper, { icon: Foundation, name: "Foundation" }), _jsx(IconWrapper, { icon: Garage, name: "Garage" }), _jsx(IconWrapper, { icon: GearPencil, name: "GearPencil" }), _jsx(IconWrapper, { icon: GearTime, name: "GearTime" }), _jsx(IconWrapper, { icon: GenericField, name: "GenericField" }), _jsx(IconWrapper, { icon: GlassWater, name: "GlassWater" }), _jsx(IconWrapper, { icon: GreenFolder, name: "GreenFolder" }), _jsx(IconWrapper, { icon: Group, name: "Group" }), _jsx(IconWrapper, { icon: Groups, name: "Groups" }), _jsx(IconWrapper, { icon: GuestBedroom, name: "GuestBedroom" }), _jsx(IconWrapper, { icon: Hallway, name: "Hallway" }), _jsx(IconWrapper, { icon: HandPencil, name: "HandPencil" }), _jsx(IconWrapper, { icon: Heater, name: "Heater" }), _jsx(IconWrapper, { icon: Help, name: "Help" }), _jsx(IconWrapper, { icon: HomeAddress, name: "HomeAddress" }), _jsx(IconWrapper, { icon: Homeowner, name: "Homeowner" }), _jsx(IconWrapper, { icon: House, name: "House" }), _jsx(IconWrapper, { icon: HouseHands, name: "HouseHands" }), _jsx(IconWrapper, { icon: IA, name: "IA" }), _jsx(IconWrapper, { icon: ImageDefault, name: "ImageDefault" }), _jsx(IconWrapper, { icon: ImgIcon, name: "ImgIcon" }), _jsx(IconWrapper, { icon: Inbox, name: "Inbox" }), _jsx(IconWrapper, { icon: Insect, name: "Insect" }), _jsx(IconWrapper, { icon: Kitchen, name: "Kitchen" }), _jsx(IconWrapper, { icon: Laundry, name: "Laundry" }), _jsx(IconWrapper, { icon: Light, name: "Light" }), _jsx(IconWrapper, { icon: LivingRoom, name: "LivingRoom" }), _jsx(IconWrapper, { icon: LogoSmall, name: "LogoSmall" }), _jsx(IconWrapper, { icon: MagnifyingGlassReport, name: "MagnifyingGlassReport" }), _jsx(IconWrapper, { icon: MagnifyingGlassPerson, name: "MagnifyingGlassPerson" }), _jsx(IconWrapper, { icon: Manager, name: "Manager" }), _jsx(IconWrapper, { icon: MasterBedroom, name: "MasterBedroom" }), _jsx(IconWrapper, { icon: Member, name: "Member" }), _jsx(IconWrapper, { icon: Message, name: "Message" }), _jsx(IconWrapper, { icon: MobileDrop, name: "MobileDrop" }), _jsx(IconWrapper, { icon: Money, name: "Money" }), _jsx(IconWrapper, { icon: Mudroom, name: "Mudroom" }), _jsx(IconWrapper, { icon: NeedHelp, name: "NeedHelp" }), _jsx(IconWrapper, { icon: Office, name: "Office" }), _jsx(IconWrapper, { icon: Painting, name: "Painting" }), _jsx(IconWrapper, { icon: PartnerGeneric, name: "PartnerGeneric" }), _jsx(IconWrapper, { icon: Patio, name: "Patio" }), _jsx(IconWrapper, { icon: PdfIcon, name: "PdfIcon" }), _jsx(IconWrapper, { icon: PersonMail, name: "PersonMail" }), _jsx(IconWrapper, { icon: Plate, name: "Plate" }), _jsx(IconWrapper, { icon: Play, name: "Play" }), _jsx(IconWrapper, { icon: Plus, name: "Plus" }), _jsx(IconWrapper, { icon: Pool, name: "Pool" }), _jsx(IconWrapper, { icon: Pool2, name: "Pool2" }), _jsx(IconWrapper, { icon: PressureWasher, name: "PressureWasher" }), _jsx(IconWrapper, { icon: Price, name: "Price" }), _jsx(IconWrapper, { icon: Profile, name: "Profile" }), _jsx(IconWrapper, { icon: ProgressReport, name: "ProgressReport" }), _jsx(IconWrapper, { icon: Proposal, name: "Proposal" }), _jsx(IconWrapper, { icon: RealEstate, name: "RealEstate" }), _jsx(IconWrapper, { icon: Receipt, name: "Receipt" }), _jsx(IconWrapper, { icon: ReceiptBg, name: "ReceiptBg" }), _jsx(IconWrapper, { icon: ReceiptHouse, name: "ReceiptHouse" }), _jsx(IconWrapper, { icon: Receipts, name: "Receipts" }), _jsx(IconWrapper, { icon: Recipient, name: "Recipient" }), _jsx(IconWrapper, { icon: Records, name: "Records" }), _jsx(IconWrapper, { icon: Register, name: "Register" }), _jsx(IconWrapper, { icon: RelationshipHome, name: "RelationshipHome" }), _jsx(IconWrapper, { icon: ResendPassword, name: "ResendPassword" }), _jsx(IconWrapper, { icon: Rocket, name: "Rocket" }), _jsx(IconWrapper, { icon: Roof2, name: "Roof2" }), _jsx(IconWrapper, { icon: Security, name: "Security" }), _jsx(IconWrapper, { icon: Send, name: "Send" }), _jsx(IconWrapper, { icon: ShareHome, name: "ShareHome" }), _jsx(IconWrapper, { icon: ShareWith, name: "ShareWith" }), _jsx(IconWrapper, { icon: SixtyEight, name: "SixtyEight" }), _jsx(IconWrapper, { icon: SMS, name: "SMS" }), _jsx(IconWrapper, { icon: Social, name: "Social" }), _jsx(IconWrapper, { icon: SolarPanel, name: "SolarPanel" }), _jsx(IconWrapper, { icon: Speaker, name: "Speaker" }), _jsx(IconWrapper, { icon: Sprinkler, name: "Sprinkler" }), _jsx(IconWrapper, { icon: Structure, name: "Structure" }), _jsx(IconWrapper, { icon: Subscription, name: "Subscription" }), _jsx(IconWrapper, { icon: Target, name: "Target" }), _jsx(IconWrapper, { icon: Theatre, name: "Theatre" }), _jsx(IconWrapper, { icon: Thumbnail, name: "Thumbnail" }), _jsx(IconWrapper, { icon: ThumbnailSmall, name: "ThumbnailSmall" }), _jsx(IconWrapper, { icon: ThumbUp, name: "ThumbUp" }), _jsx(IconWrapper, { icon: Trash, name: "Trash" }), _jsx(IconWrapper, { icon: VideoIcon, name: "VideoIcon" }), _jsx(IconWrapper, { icon: VideoPlay, name: "VideoPlay" }), _jsx(IconWrapper, { icon: VioletFolder, name: "VioletFolder" }), _jsx(IconWrapper, { icon: Wallet, name: "Wallet" }), _jsx(IconWrapper, { icon: Warning, name: "Warning" }), _jsx(IconWrapper, { icon: Warranty, name: "Warranty" }), _jsx(IconWrapper, { icon: WellDone, name: "WellDone" }), _jsx(IconWrapper, { icon: WholeHome, name: "WholeHome" }), _jsx(IconWrapper, { icon: Wind, name: "Wind" }), _jsx(IconWrapper, { icon: Wizard, name: "Wizard" }), _jsx(IconWrapper, { icon: WizardDetailed, name: "WizardDetailed" }), _jsx(IconWrapper, { icon: WizardQuick, name: "WizardQuick" }), _jsx(IconWrapper, { icon: YellowFolder, name: "YellowFolder" }), _jsx(IconWrapper, { icon: YellowFolderUnshared, name: "YellowFolderUnshared" })] }));
+    return (_jsxs(Grid, { maxW: "600px", templateColumns: "repeat(auto-fill, minmax(75px, 1fr))", p: "base", gap: "8", children: [_jsx(IconWrapper, { icon: CookTop, name: "CookTop" }), _jsx(IconWrapper, { icon: Dishwasher, name: "Dishwasher" }), _jsx(IconWrapper, { icon: Dryer, name: "Dryer" }), _jsx(IconWrapper, { icon: Freezer, name: "Freezer" }), _jsx(IconWrapper, { icon: Fridge, name: "Fridge" }), _jsx(IconWrapper, { icon: Microwave, name: "Microwave" }), _jsx(IconWrapper, { icon: Oven, name: "Oven" }), _jsx(IconWrapper, { icon: Range, name: "Range" }), _jsx(IconWrapper, { icon: Washer, name: "Washer" }), _jsx(IconWrapper, { icon: tankWater, name: "TankWater" }), _jsx(IconWrapper, { icon: tanklessWater, name: "TanklessWater" }), _jsx(IconWrapper, { icon: BatterySmokeDetector, name: "BatterySmokeDetector" }), _jsx(IconWrapper, { icon: Co2Detector, name: "Co2Detector" }), _jsx(IconWrapper, { icon: FireExtinguisher, name: "FireExtinguisher" }), _jsx(IconWrapper, { icon: Furnace, name: "Furnace" }), _jsx(IconWrapper, { icon: HeatPump, name: "HeatPump" }), _jsx(IconWrapper, { icon: InWall, name: "InWall" }), _jsx(IconWrapper, { icon: Jacuzzi, name: "Jacuzzi" }), _jsx(IconWrapper, { icon: LandscapeLights, name: "LandscapeLights" }), _jsx(IconWrapper, { icon: Other, name: "Other" }), _jsx(IconWrapper, { icon: SprinklerSystem, name: "SprinklerSystem" }), _jsx(IconWrapper, { icon: SprinklerSystem2, name: "SprinklerSystem2" }), _jsx(IconWrapper, { icon: WiredSmokeDetector, name: "WiredSmokeDetector" }), _jsx(IconWrapper, { icon: Barcode, name: "Barcode" }), _jsx(IconWrapper, { icon: Book, name: "Book" }), _jsx(IconWrapper, { icon: Calendar, name: "Calendar" }), _jsx(IconWrapper, { icon: GoldenBars, name: "GoldenBars" }), _jsx(IconWrapper, { icon: Heart, name: "Heart" }), _jsx(IconWrapper, { icon: Notes, name: "Notes" }), _jsx(IconWrapper, { icon: Rating, name: "Rating" }), _jsx(IconWrapper, { icon: Registry, name: "Registry" }), _jsx(IconWrapper, { icon: Tools2, name: "Tools2" }), _jsx(IconWrapper, { icon: Balustrades, name: "Balustrades" }), _jsx(IconWrapper, { icon: Bedding, name: "Bedding" }), _jsx(IconWrapper, { icon: Cookware, name: "Cookware" }), _jsx(IconWrapper, { icon: Countertops, name: "Countertops" }), _jsx(IconWrapper, { icon: Doors, name: "Doors" }), _jsx(IconWrapper, { icon: Electronics, name: "Electronics" }), _jsx(IconWrapper, { icon: Equipment, name: "Equipment" }), _jsx(IconWrapper, { icon: Exterior, name: "Exterior" }), _jsx(IconWrapper, { icon: Fire, name: "Fire" }), _jsx(IconWrapper, { icon: Flooring, name: "Flooring" }), _jsx(IconWrapper, { icon: Furniture, name: "Furniture" }), _jsx(IconWrapper, { icon: Hardware, name: "Hardware" }), _jsx(IconWrapper, { icon: LargeAppliances, name: "LargeAppliances" }), _jsx(IconWrapper, { icon: Lighting, name: "Lighting" }), _jsx(IconWrapper, { icon: Mattress, name: "Mattress" }), _jsx(IconWrapper, { icon: Paint, name: "Paint" }), _jsx(IconWrapper, { icon: Plants, name: "Plants" }), _jsx(IconWrapper, { icon: Porch, name: "Porch" }), _jsx(IconWrapper, { icon: Roof, name: "Roof" }), _jsx(IconWrapper, { icon: SmallAppliances, name: "SmallAppliances" }), _jsx(IconWrapper, { icon: Steps, name: "Steps" }), _jsx(IconWrapper, { icon: Structures, name: "Structures" }), _jsx(IconWrapper, { icon: Supplies, name: "Supplies" }), _jsx(IconWrapper, { icon: Table, name: "Table" }), _jsx(IconWrapper, { icon: Temperature, name: "Temperature" }), _jsx(IconWrapper, { icon: Tile, name: "Tile" }), _jsx(IconWrapper, { icon: Tools, name: "Tools" }), _jsx(IconWrapper, { icon: Utensils, name: "Utensils" }), _jsx(IconWrapper, { icon: WallDecor, name: "WallDecor" }), _jsx(IconWrapper, { icon: Water, name: "Water" }), _jsx(IconWrapper, { icon: Window, name: "Window" }), _jsx(IconWrapper, { icon: AlertDelete, name: "AlertDelete" }), _jsx(IconWrapper, { icon: AlertDeletePurple, name: "AlertDeletePurple" }), _jsx(IconWrapper, { icon: Arrow, name: "Arrow" }), _jsx(IconWrapper, { icon: Batery, name: "Batery" }), _jsx(IconWrapper, { icon: Bathroom, name: "Bathroom" }), _jsx(IconWrapper, { icon: Battery, name: "Battery" }), _jsx(IconWrapper, { icon: Battery2, name: "Battery2" }), _jsx(IconWrapper, { icon: Bedroom, name: "Bedroom" }), _jsx(IconWrapper, { icon: BillingAddress, name: "BillingAddress" }), _jsx(IconWrapper, { icon: Billing, name: "Billing" }), _jsx(IconWrapper, { icon: BlueCirclePlus, name: "BlueCirclePlus" }), _jsx(IconWrapper, { icon: BlueFolder, name: "BlueFolder" }), _jsx(IconWrapper, { icon: BlueFolderShared, name: "BlueFolderShared" }), _jsx(IconWrapper, { icon: BookOpened, name: "BookOpened" }), _jsx(IconWrapper, { icon: BoxIcon, name: "Box" }), _jsx(IconWrapper, { icon: Building, name: "Building" }), _jsx(IconWrapper, { icon: Calc, name: "Calc" }), _jsx(IconWrapper, { icon: Calendar2, name: "Calendar2" }), _jsx(IconWrapper, { icon: Catalog, name: "Catalog" }), _jsx(IconWrapper, { icon: Check, name: "Check" }), _jsx(IconWrapper, { icon: CheckInCircle, name: "CheckInCircle" }), _jsx(IconWrapper, { icon: CheckPen, name: "CheckPen" }), _jsx(IconWrapper, { icon: Chemistry, name: "Chemistry" }), _jsx(IconWrapper, { icon: CircleFace, name: "CircleFace" }), _jsx(IconWrapper, { icon: Cleaning, name: "Cleaning" }), _jsx(IconWrapper, { icon: Closet, name: "Closet" }), _jsx(IconWrapper, { icon: Co2, name: "Co2" }), _jsx(IconWrapper, { icon: Company, name: "Company" }), _jsx(IconWrapper, { icon: Company2, name: "Company2" }), _jsx(IconWrapper, { icon: ComputerReport, name: "ComputerReport" }), _jsx(IconWrapper, { icon: Confirmation, name: "Confirmation" }), _jsx(IconWrapper, { icon: Construction, name: "Construction" }), _jsx(IconWrapper, { icon: Contacts, name: "Contacts" }), _jsx(IconWrapper, { icon: Contacts2, name: "Contacts2" }), _jsx(IconWrapper, { icon: Contributor, name: "Contributor" }), _jsx(IconWrapper, { icon: CreditCard, name: "CreditCard" }), _jsx(IconWrapper, { icon: Detector, name: "Detector" }), _jsx(IconWrapper, { icon: Diamond, name: "Diamond" }), _jsx(IconWrapper, { icon: DiningRoom, name: "DiningRoom" }), _jsx(IconWrapper, { icon: DocIcon, name: "DocIcon" }), _jsx(IconWrapper, { icon: Document, name: "Document" }), _jsx(IconWrapper, { icon: Document2, name: "Document2" }), _jsx(IconWrapper, { icon: Drop, name: "Drop" }), _jsx(IconWrapper, { icon: DropCalendar, name: "DropCalendar" }), _jsx(IconWrapper, { icon: Electricity, name: "Electricity" }), _jsx(IconWrapper, { icon: Entryway, name: "Entryway" }), _jsx(IconWrapper, { icon: EstValue, name: "EstValue" }), _jsx(IconWrapper, { icon: Exclamation, name: "Exclamation" }), _jsx(IconWrapper, { icon: Face, name: "Face" }), _jsx(IconWrapper, { icon: Feedback, name: "Feedback" }), _jsx(IconWrapper, { icon: FileUploading, name: "FileUploading" }), _jsx(IconWrapper, { icon: Finance, name: "Finance" }), _jsx(IconWrapper, { icon: Flag, name: "Flag" }), _jsx(IconWrapper, { icon: Flag2, name: "Flag2" }), _jsx(IconWrapper, { icon: Flower, name: "Flower" }), _jsx(IconWrapper, { icon: FormSent, name: "FormSent" }), _jsx(IconWrapper, { icon: Foundation, name: "Foundation" }), _jsx(IconWrapper, { icon: Garage, name: "Garage" }), _jsx(IconWrapper, { icon: GearPencil, name: "GearPencil" }), _jsx(IconWrapper, { icon: GearTime, name: "GearTime" }), _jsx(IconWrapper, { icon: GenericField, name: "GenericField" }), _jsx(IconWrapper, { icon: GlassWater, name: "GlassWater" }), _jsx(IconWrapper, { icon: GreenFolder, name: "GreenFolder" }), _jsx(IconWrapper, { icon: Group, name: "Group" }), _jsx(IconWrapper, { icon: Groups, name: "Groups" }), _jsx(IconWrapper, { icon: GuestBedroom, name: "GuestBedroom" }), _jsx(IconWrapper, { icon: Hallway, name: "Hallway" }), _jsx(IconWrapper, { icon: HandPencil, name: "HandPencil" }), _jsx(IconWrapper, { icon: Heater, name: "Heater" }), _jsx(IconWrapper, { icon: Help, name: "Help" }), _jsx(IconWrapper, { icon: HomeAddress, name: "HomeAddress" }), _jsx(IconWrapper, { icon: Homeowner, name: "Homeowner" }), _jsx(IconWrapper, { icon: House, name: "House" }), _jsx(IconWrapper, { icon: HouseHands, name: "HouseHands" }), _jsx(IconWrapper, { icon: IA, name: "IA" }), _jsx(IconWrapper, { icon: ImageDefault, name: "ImageDefault" }), _jsx(IconWrapper, { icon: ImgIcon, name: "ImgIcon" }), _jsx(IconWrapper, { icon: Inbox, name: "Inbox" }), _jsx(IconWrapper, { icon: Insect, name: "Insect" }), _jsx(IconWrapper, { icon: Kitchen, name: "Kitchen" }), _jsx(IconWrapper, { icon: Laundry, name: "Laundry" }), _jsx(IconWrapper, { icon: Light, name: "Light" }), _jsx(IconWrapper, { icon: LivingRoom, name: "LivingRoom" }), _jsx(IconWrapper, { icon: LogoSmall, name: "LogoSmall" }), _jsx(IconWrapper, { icon: MagnifyingGlassReport, name: "MagnifyingGlassReport" }), _jsx(IconWrapper, { icon: MagnifyingGlassPerson, name: "MagnifyingGlassPerson" }), _jsx(IconWrapper, { icon: Manager, name: "Manager" }), _jsx(IconWrapper, { icon: MasterBedroom, name: "MasterBedroom" }), _jsx(IconWrapper, { icon: Member, name: "Member" }), _jsx(IconWrapper, { icon: Message, name: "Message" }), _jsx(IconWrapper, { icon: MobileDrop, name: "MobileDrop" }), _jsx(IconWrapper, { icon: Money, name: "Money" }), _jsx(IconWrapper, { icon: Mudroom, name: "Mudroom" }), _jsx(IconWrapper, { icon: NeedHelp, name: "NeedHelp" }), _jsx(IconWrapper, { icon: Office, name: "Office" }), _jsx(IconWrapper, { icon: Painting, name: "Painting" }), _jsx(IconWrapper, { icon: PartnerGeneric, name: "PartnerGeneric" }), _jsx(IconWrapper, { icon: Patio, name: "Patio" }), _jsx(IconWrapper, { icon: PdfIcon, name: "PdfIcon" }), _jsx(IconWrapper, { icon: PersonMail, name: "PersonMail" }), _jsx(IconWrapper, { icon: Plate, name: "Plate" }), _jsx(IconWrapper, { icon: Play, name: "Play" }), _jsx(IconWrapper, { icon: Plus, name: "Plus" }), _jsx(IconWrapper, { icon: Pool, name: "Pool" }), _jsx(IconWrapper, { icon: Pool2, name: "Pool2" }), _jsx(IconWrapper, { icon: PressureWasher, name: "PressureWasher" }), _jsx(IconWrapper, { icon: Price, name: "Price" }), _jsx(IconWrapper, { icon: Profile, name: "Profile" }), _jsx(IconWrapper, { icon: ProgressReport, name: "ProgressReport" }), _jsx(IconWrapper, { icon: Proposal, name: "Proposal" }), _jsx(IconWrapper, { icon: RealEstate, name: "RealEstate" }), _jsx(IconWrapper, { icon: Receipt, name: "Receipt" }), _jsx(IconWrapper, { icon: ReceiptBg, name: "ReceiptBg" }), _jsx(IconWrapper, { icon: ReceiptHouse, name: "ReceiptHouse" }), _jsx(IconWrapper, { icon: Receipts, name: "Receipts" }), _jsx(IconWrapper, { icon: Recipient, name: "Recipient" }), _jsx(IconWrapper, { icon: Records, name: "Records" }), _jsx(IconWrapper, { icon: Register, name: "Register" }), _jsx(IconWrapper, { icon: RelationshipHome, name: "RelationshipHome" }), _jsx(IconWrapper, { icon: ResendPassword, name: "ResendPassword" }), _jsx(IconWrapper, { icon: Rocket, name: "Rocket" }), _jsx(IconWrapper, { icon: Roof2, name: "Roof2" }), _jsx(IconWrapper, { icon: Security, name: "Security" }), _jsx(IconWrapper, { icon: Send, name: "Send" }), _jsx(IconWrapper, { icon: ShareHome, name: "ShareHome" }), _jsx(IconWrapper, { icon: ShareWith, name: "ShareWith" }), _jsx(IconWrapper, { icon: SixtyEight, name: "SixtyEight" }), _jsx(IconWrapper, { icon: SMS, name: "SMS" }), _jsx(IconWrapper, { icon: Social, name: "Social" }), _jsx(IconWrapper, { icon: SolarPanel, name: "SolarPanel" }), _jsx(IconWrapper, { icon: Speaker, name: "Speaker" }), _jsx(IconWrapper, { icon: Sprinkler, name: "Sprinkler" }), _jsx(IconWrapper, { icon: Structure, name: "Structure" }), _jsx(IconWrapper, { icon: Subscription, name: "Subscription" }), _jsx(IconWrapper, { icon: Target, name: "Target" }), _jsx(IconWrapper, { icon: Theatre, name: "Theatre" }), _jsx(IconWrapper, { icon: Thumbnail, name: "Thumbnail" }), _jsx(IconWrapper, { icon: ThumbnailSmall, name: "ThumbnailSmall" }), _jsx(IconWrapper, { icon: ThumbUp, name: "ThumbUp" }), _jsx(IconWrapper, { icon: Trash, name: "Trash" }), _jsx(IconWrapper, { icon: VideoIcon, name: "VideoIcon" }), _jsx(IconWrapper, { icon: VideoPlay, name: "VideoPlay" }), _jsx(IconWrapper, { icon: VioletFolder, name: "VioletFolder" }), _jsx(IconWrapper, { icon: Wallet, name: "Wallet" }), _jsx(IconWrapper, { icon: Warning, name: "Warning" }), _jsx(IconWrapper, { icon: Warranty, name: "Warranty" }), _jsx(IconWrapper, { icon: WellDone, name: "WellDone" }), _jsx(IconWrapper, { icon: WholeHome, name: "WholeHome" }), _jsx(IconWrapper, { icon: Wind, name: "Wind" }), _jsx(IconWrapper, { icon: Wizard, name: "Wizard" }), _jsx(IconWrapper, { icon: WizardDetailed, name: "WizardDetailed" }), _jsx(IconWrapper, { icon: WizardQuick, name: "WizardQuick" }), _jsx(IconWrapper, { icon: YellowFolder, name: "YellowFolder" }), _jsx(IconWrapper, { icon: YellowFolderUnshared, name: "YellowFolderUnshared" })] }));
 };
 const IconWrapper = ({ icon, name }) => {
     return (_jsxs(Center, { flexDirection: "column", children: [_jsx(Image, { src: icon, boxSize: "30px", mb: "2" }), _jsx(Text, { variant: "home", children: name })] }));

package/dist/stories/feedback/NpsScoreButtons.stories.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { NpsScoreButtonsI } from '../../interfaces';
+declare const _default: Meta<NpsScoreButtonsI>;
+export default _default;
+export declare const NpsScoreButtonsComponent: (args: NpsScoreButtonsI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/feedback/NpsScoreButtons.stories.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+import { NpsScoreButtons } from '../../components';
+export default {
+    title: 'Components/Feedback',
+    component: NpsScoreButtons,
+    args: {
+        defaultValue: 7,
+        min: 0,
+        max: 10,
+    },
+};
+export const NpsScoreButtonsComponent = (args) => {
+    return (_jsx(Box, { p: "base", w: ['full', 'md'], children: _jsx(NpsScoreButtons, Object.assign({}, args)) }));
+};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.37.4",
+  "version": "2.37.6",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",