ekm-ui 0.4.39 → 0.4.41

package/dist/index.d.ts

@@ -69,5 +69,6 @@ export { NBUI_Card_Table } from './nbui/nbui-card-table.js';
 export { NBUI_Card_Paragraphs_Large } from './nbui/nbui-card-paragraphs-lg.js';
 export { NBUI_Card_Paragraphs } from './nbui/nbui-card-paragraphs.js';
 export { NBUI_Footer } from './nbui/nbui-footer.js';
+export { DateTimeComponent } from './date-time-component.js';
 import 'prop-types';
 import 'react';

package/dist/index.js

@@ -1,16 +1,17 @@
-export { h as CardPaymentBlock, g as CountryPicker, c as DragAndDrop, d as FilePicker, b as Layout, f as ProductPicker, a as StackedListItem, e as TableResultBlock } from './chunk-QJOSZI6O.js';
+export { h as CardPaymentBlock, g as CountryPicker, c as DragAndDrop, d as FilePicker, b as Layout, f as ProductPicker, a as StackedListItem, e as TableResultBlock } from './chunk-EY2UUYEC.js';
+export { a as Search } from './chunk-LQKVFBLU.js';
 export { b as Sidebar } from './chunk-HVNLAQA6.js';
 export { a as Sort } from './chunk-HW7AZG2V.js';
 export { a as TableHeader } from './chunk-HE5X7TRV.js';
 export { b as ToastProvider, c as useToast } from './chunk-YZ2YZSNQ.js';
 export { a as ToolTip } from './chunk-THOZT55U.js';
+export { a as NBUI_Card_Table } from './chunk-EZPRW5WN.js';
 export { a as NBUI_Card } from './chunk-XKE3VK6Z.js';
 export { a as NBUI_Container } from './chunk-7Q6OMA2A.js';
 export { a as NBUI_Footer } from './chunk-GVNUAH45.js';
 export { a as NBUI_Page_Layout } from './chunk-Y2TFSCAU.js';
 export { a as Pagination } from './chunk-KRMPO53Y.js';
 import './chunk-22RUXGYW.js';
-export { a as Search } from './chunk-LQKVFBLU.js';
 export { a as Navbar } from './chunk-XXP5K6Y4.js';
 export { a as NBUI_Card_Form } from './chunk-LWTESXND.js';
 export { a as NBUI_Card_Image } from './chunk-AN66H4D6.js';
@@ -18,36 +19,35 @@ export { a as NBUI_Card_Large } from './chunk-GWERJBUR.js';
 export { a as NBUI_Card_Paragraphs_Large } from './chunk-I2DMRDYJ.js';
 export { a as NBUI_Card_Paragraphs } from './chunk-FTVJMY65.js';
 export { a as NBUI_Card_Small } from './chunk-YXTGVTGL.js';
-export { a as NBUI_Card_Table } from './chunk-EZPRW5WN.js';
+import './chunk-F7MTEILK.js';
 export { a as FeatureCard } from './chunk-7WJGATIR.js';
 export { a as StaffPickCard } from './chunk-RTRHNOTP.js';
 export { a as FeaturePageGroup } from './chunk-XABECXZS.js';
-import './chunk-NQ5VRJLN.js';
+import './chunk-FPXEE5TC.js';
 export { a as TestComponent } from './chunk-WVAVR5V6.js';
 export { a as TextRow } from './chunk-2VS7BVWY.js';
 export { a as TextArea } from './chunk-QCHLLBHM.js';
 export { a as VideoDashboardNotification } from './chunk-LIXVY47P.js';
 export { a as VideoModal } from './chunk-Y5DEGGVQ.js';
-import './chunk-F7MTEILK.js';
+export { a as Modal } from './chunk-T2SOP5NE.js';
 export { a as NoResultsBlock } from './chunk-AVTJXS4U.js';
 export { a as PageHeader } from './chunk-SFEJDNIA.js';
 export { a as ProgressBar } from './chunk-E5KIDP3Z.js';
-export { a as Radio } from './chunk-U4WMBFRC.js';
+export { a as Radio } from './chunk-R3QJRZTP.js';
 export { a as Spinner } from './chunk-AO5TGD7T.js';
+export { a as ImageThumbnail } from './chunk-Z44LYPKH.js';
 export { a as InputAddon } from './chunk-CNJDESTL.js';
 export { a as InputCopy } from './chunk-7V5M4LMA.js';
 export { a as TextInput } from './chunk-GUK5N5Z2.js';
 export { a as LoadingButton } from './chunk-Y2GINGVR.js';
 export { a as LoveFooter } from './chunk-ESJIQMQJ.js';
 export { a as MiniFeatureBlock } from './chunk-IY6WVOAI.js';
-export { a as Modal } from './chunk-T2SOP5NE.js';
 export { a as DraggableStackedListItem } from './chunk-M4UBHZDH.js';
 export { a as ToggleSwitch } from './chunk-TMO76FWT.js';
 export { a as Drawer } from './chunk-NDDDT4TO.js';
 export { a as Dropdown } from './chunk-QYKN3JZ5.js';
 export { a as EkmLogo } from './chunk-SLIZ4TDR.js';
 export { a as FixedAlert } from './chunk-F3BF3KTV.js';
-export { a as ImageThumbnail } from './chunk-Z44LYPKH.js';
 export { a as Checkbox } from './chunk-ANU7OAPA.js';
 export { a as ColorPicker } from './chunk-ISA6E23B.js';
 export { a as DashboardNotification } from './chunk-3PTVTRDP.js';
@@ -56,9 +56,10 @@ export { a as DateRangePicker } from './chunk-D5TS3JJH.js';
 export { a as Select } from './chunk-DSJ5TRZW.js';
 export { a as FormRow } from './chunk-E4USZ2Q3.js';
 export { a as Label } from './chunk-F47A36U7.js';
+export { a as DateTimeComponent } from './chunk-JFL77JIP.js';
 export { a as DateTimePicker } from './chunk-RRNNHYSF.js';
 import './chunk-4FSPYK2A.js';
-export { b as Accordion } from './chunk-YDCYBJPC.js';
+export { b as Accordion } from './chunk-QZFOPL3O.js';
 export { a as AlertBanner } from './chunk-5SEJVYKM.js';
 export { a as Alert } from './chunk-MBACKGWE.js';
 export { a as Avatar } from './chunk-2OPJLYW6.js';

package/dist/layout/layout.js

@@ -1,16 +1,17 @@
-export { b as Layout } from '../chunk-QJOSZI6O.js';
+export { b as Layout } from '../chunk-EY2UUYEC.js';
+import '../chunk-LQKVFBLU.js';
 import '../chunk-HVNLAQA6.js';
 import '../chunk-HW7AZG2V.js';
 import '../chunk-HE5X7TRV.js';
 import '../chunk-YZ2YZSNQ.js';
 import '../chunk-THOZT55U.js';
+import '../chunk-EZPRW5WN.js';
 import '../chunk-XKE3VK6Z.js';
 import '../chunk-7Q6OMA2A.js';
 import '../chunk-GVNUAH45.js';
 import '../chunk-Y2TFSCAU.js';
 import '../chunk-KRMPO53Y.js';
 import '../chunk-22RUXGYW.js';
-import '../chunk-LQKVFBLU.js';
 import '../chunk-XXP5K6Y4.js';
 import '../chunk-LWTESXND.js';
 import '../chunk-AN66H4D6.js';
@@ -18,36 +19,35 @@ import '../chunk-GWERJBUR.js';
 import '../chunk-I2DMRDYJ.js';
 import '../chunk-FTVJMY65.js';
 import '../chunk-YXTGVTGL.js';
-import '../chunk-EZPRW5WN.js';
+import '../chunk-F7MTEILK.js';
 import '../chunk-7WJGATIR.js';
 import '../chunk-RTRHNOTP.js';
 import '../chunk-XABECXZS.js';
-import '../chunk-NQ5VRJLN.js';
+import '../chunk-FPXEE5TC.js';
 import '../chunk-WVAVR5V6.js';
 import '../chunk-2VS7BVWY.js';
 import '../chunk-QCHLLBHM.js';
 import '../chunk-LIXVY47P.js';
 import '../chunk-Y5DEGGVQ.js';
-import '../chunk-F7MTEILK.js';
+import '../chunk-T2SOP5NE.js';
 import '../chunk-AVTJXS4U.js';
 import '../chunk-SFEJDNIA.js';
 import '../chunk-E5KIDP3Z.js';
-import '../chunk-U4WMBFRC.js';
+import '../chunk-R3QJRZTP.js';
 import '../chunk-AO5TGD7T.js';
+import '../chunk-Z44LYPKH.js';
 import '../chunk-CNJDESTL.js';
 import '../chunk-7V5M4LMA.js';
 import '../chunk-GUK5N5Z2.js';
 import '../chunk-Y2GINGVR.js';
 import '../chunk-ESJIQMQJ.js';
 import '../chunk-IY6WVOAI.js';
-import '../chunk-T2SOP5NE.js';
 import '../chunk-M4UBHZDH.js';
 import '../chunk-TMO76FWT.js';
 import '../chunk-NDDDT4TO.js';
 import '../chunk-QYKN3JZ5.js';
 import '../chunk-SLIZ4TDR.js';
 import '../chunk-F3BF3KTV.js';
-import '../chunk-Z44LYPKH.js';
 import '../chunk-ANU7OAPA.js';
 import '../chunk-ISA6E23B.js';
 import '../chunk-3PTVTRDP.js';
@@ -56,9 +56,10 @@ import '../chunk-D5TS3JJH.js';
 import '../chunk-DSJ5TRZW.js';
 import '../chunk-E4USZ2Q3.js';
 import '../chunk-F47A36U7.js';
+import '../chunk-JFL77JIP.js';
 import '../chunk-RRNNHYSF.js';
 import '../chunk-4FSPYK2A.js';
-import '../chunk-YDCYBJPC.js';
+import '../chunk-QZFOPL3O.js';
 import '../chunk-5SEJVYKM.js';
 import '../chunk-MBACKGWE.js';
 import '../chunk-2OPJLYW6.js';

package/dist/product-picker/product-modal.js

@@ -1,16 +1,17 @@
-export { f as ProductPicker } from '../chunk-QJOSZI6O.js';
+export { f as ProductPicker } from '../chunk-EY2UUYEC.js';
+import '../chunk-LQKVFBLU.js';
 import '../chunk-HVNLAQA6.js';
 import '../chunk-HW7AZG2V.js';
 import '../chunk-HE5X7TRV.js';
 import '../chunk-YZ2YZSNQ.js';
 import '../chunk-THOZT55U.js';
+import '../chunk-EZPRW5WN.js';
 import '../chunk-XKE3VK6Z.js';
 import '../chunk-7Q6OMA2A.js';
 import '../chunk-GVNUAH45.js';
 import '../chunk-Y2TFSCAU.js';
 import '../chunk-KRMPO53Y.js';
 import '../chunk-22RUXGYW.js';
-import '../chunk-LQKVFBLU.js';
 import '../chunk-XXP5K6Y4.js';
 import '../chunk-LWTESXND.js';
 import '../chunk-AN66H4D6.js';
@@ -18,36 +19,35 @@ import '../chunk-GWERJBUR.js';
 import '../chunk-I2DMRDYJ.js';
 import '../chunk-FTVJMY65.js';
 import '../chunk-YXTGVTGL.js';
-import '../chunk-EZPRW5WN.js';
+import '../chunk-F7MTEILK.js';
 import '../chunk-7WJGATIR.js';
 import '../chunk-RTRHNOTP.js';
 import '../chunk-XABECXZS.js';
-import '../chunk-NQ5VRJLN.js';
+import '../chunk-FPXEE5TC.js';
 import '../chunk-WVAVR5V6.js';
 import '../chunk-2VS7BVWY.js';
 import '../chunk-QCHLLBHM.js';
 import '../chunk-LIXVY47P.js';
 import '../chunk-Y5DEGGVQ.js';
-import '../chunk-F7MTEILK.js';
+import '../chunk-T2SOP5NE.js';
 import '../chunk-AVTJXS4U.js';
 import '../chunk-SFEJDNIA.js';
 import '../chunk-E5KIDP3Z.js';
-import '../chunk-U4WMBFRC.js';
+import '../chunk-R3QJRZTP.js';
 import '../chunk-AO5TGD7T.js';
+import '../chunk-Z44LYPKH.js';
 import '../chunk-CNJDESTL.js';
 import '../chunk-7V5M4LMA.js';
 import '../chunk-GUK5N5Z2.js';
 import '../chunk-Y2GINGVR.js';
 import '../chunk-ESJIQMQJ.js';
 import '../chunk-IY6WVOAI.js';
-import '../chunk-T2SOP5NE.js';
 import '../chunk-M4UBHZDH.js';
 import '../chunk-TMO76FWT.js';
 import '../chunk-NDDDT4TO.js';
 import '../chunk-QYKN3JZ5.js';
 import '../chunk-SLIZ4TDR.js';
 import '../chunk-F3BF3KTV.js';
-import '../chunk-Z44LYPKH.js';
 import '../chunk-ANU7OAPA.js';
 import '../chunk-ISA6E23B.js';
 import '../chunk-3PTVTRDP.js';
@@ -56,9 +56,10 @@ import '../chunk-D5TS3JJH.js';
 import '../chunk-DSJ5TRZW.js';
 import '../chunk-E4USZ2Q3.js';
 import '../chunk-F47A36U7.js';
+import '../chunk-JFL77JIP.js';
 import '../chunk-RRNNHYSF.js';
 import '../chunk-4FSPYK2A.js';
-import '../chunk-YDCYBJPC.js';
+import '../chunk-QZFOPL3O.js';
 import '../chunk-5SEJVYKM.js';
 import '../chunk-MBACKGWE.js';
 import '../chunk-2OPJLYW6.js';

package/dist/radio.js

@@ -1,4 +1,4 @@
-export { a as Radio } from './chunk-U4WMBFRC.js';
+export { a as Radio } from './chunk-R3QJRZTP.js';
 import './chunk-6LHL364H.js';
 import './chunk-Z4LPO673.js';
 //# sourceMappingURL=out.js.map

package/dist/stacked-list-item.js

@@ -1,16 +1,17 @@
-export { a as StackedListItem } from './chunk-QJOSZI6O.js';
+export { a as StackedListItem } from './chunk-EY2UUYEC.js';
+import './chunk-LQKVFBLU.js';
 import './chunk-HVNLAQA6.js';
 import './chunk-HW7AZG2V.js';
 import './chunk-HE5X7TRV.js';
 import './chunk-YZ2YZSNQ.js';
 import './chunk-THOZT55U.js';
+import './chunk-EZPRW5WN.js';
 import './chunk-XKE3VK6Z.js';
 import './chunk-7Q6OMA2A.js';
 import './chunk-GVNUAH45.js';
 import './chunk-Y2TFSCAU.js';
 import './chunk-KRMPO53Y.js';
 import './chunk-22RUXGYW.js';
-import './chunk-LQKVFBLU.js';
 import './chunk-XXP5K6Y4.js';
 import './chunk-LWTESXND.js';
 import './chunk-AN66H4D6.js';
@@ -18,36 +19,35 @@ import './chunk-GWERJBUR.js';
 import './chunk-I2DMRDYJ.js';
 import './chunk-FTVJMY65.js';
 import './chunk-YXTGVTGL.js';
-import './chunk-EZPRW5WN.js';
+import './chunk-F7MTEILK.js';
 import './chunk-7WJGATIR.js';
 import './chunk-RTRHNOTP.js';
 import './chunk-XABECXZS.js';
-import './chunk-NQ5VRJLN.js';
+import './chunk-FPXEE5TC.js';
 import './chunk-WVAVR5V6.js';
 import './chunk-2VS7BVWY.js';
 import './chunk-QCHLLBHM.js';
 import './chunk-LIXVY47P.js';
 import './chunk-Y5DEGGVQ.js';
-import './chunk-F7MTEILK.js';
+import './chunk-T2SOP5NE.js';
 import './chunk-AVTJXS4U.js';
 import './chunk-SFEJDNIA.js';
 import './chunk-E5KIDP3Z.js';
-import './chunk-U4WMBFRC.js';
+import './chunk-R3QJRZTP.js';
 import './chunk-AO5TGD7T.js';
+import './chunk-Z44LYPKH.js';
 import './chunk-CNJDESTL.js';
 import './chunk-7V5M4LMA.js';
 import './chunk-GUK5N5Z2.js';
 import './chunk-Y2GINGVR.js';
 import './chunk-ESJIQMQJ.js';
 import './chunk-IY6WVOAI.js';
-import './chunk-T2SOP5NE.js';
 import './chunk-M4UBHZDH.js';
 import './chunk-TMO76FWT.js';
 import './chunk-NDDDT4TO.js';
 import './chunk-QYKN3JZ5.js';
 import './chunk-SLIZ4TDR.js';
 import './chunk-F3BF3KTV.js';
-import './chunk-Z44LYPKH.js';
 import './chunk-ANU7OAPA.js';
 import './chunk-ISA6E23B.js';
 import './chunk-3PTVTRDP.js';
@@ -56,9 +56,10 @@ import './chunk-D5TS3JJH.js';
 import './chunk-DSJ5TRZW.js';
 import './chunk-E4USZ2Q3.js';
 import './chunk-F47A36U7.js';
+import './chunk-JFL77JIP.js';
 import './chunk-RRNNHYSF.js';
 import './chunk-4FSPYK2A.js';
-import './chunk-YDCYBJPC.js';
+import './chunk-QZFOPL3O.js';
 import './chunk-5SEJVYKM.js';
 import './chunk-MBACKGWE.js';
 import './chunk-2OPJLYW6.js';

package/dist/table-result-block.js

@@ -1,16 +1,17 @@
-export { e as TableResultBlock } from './chunk-QJOSZI6O.js';
+export { e as TableResultBlock } from './chunk-EY2UUYEC.js';
+import './chunk-LQKVFBLU.js';
 import './chunk-HVNLAQA6.js';
 import './chunk-HW7AZG2V.js';
 import './chunk-HE5X7TRV.js';
 import './chunk-YZ2YZSNQ.js';
 import './chunk-THOZT55U.js';
+import './chunk-EZPRW5WN.js';
 import './chunk-XKE3VK6Z.js';
 import './chunk-7Q6OMA2A.js';
 import './chunk-GVNUAH45.js';
 import './chunk-Y2TFSCAU.js';
 import './chunk-KRMPO53Y.js';
 import './chunk-22RUXGYW.js';
-import './chunk-LQKVFBLU.js';
 import './chunk-XXP5K6Y4.js';
 import './chunk-LWTESXND.js';
 import './chunk-AN66H4D6.js';
@@ -18,36 +19,35 @@ import './chunk-GWERJBUR.js';
 import './chunk-I2DMRDYJ.js';
 import './chunk-FTVJMY65.js';
 import './chunk-YXTGVTGL.js';
-import './chunk-EZPRW5WN.js';
+import './chunk-F7MTEILK.js';
 import './chunk-7WJGATIR.js';
 import './chunk-RTRHNOTP.js';
 import './chunk-XABECXZS.js';
-import './chunk-NQ5VRJLN.js';
+import './chunk-FPXEE5TC.js';
 import './chunk-WVAVR5V6.js';
 import './chunk-2VS7BVWY.js';
 import './chunk-QCHLLBHM.js';
 import './chunk-LIXVY47P.js';
 import './chunk-Y5DEGGVQ.js';
-import './chunk-F7MTEILK.js';
+import './chunk-T2SOP5NE.js';
 import './chunk-AVTJXS4U.js';
 import './chunk-SFEJDNIA.js';
 import './chunk-E5KIDP3Z.js';
-import './chunk-U4WMBFRC.js';
+import './chunk-R3QJRZTP.js';
 import './chunk-AO5TGD7T.js';
+import './chunk-Z44LYPKH.js';
 import './chunk-CNJDESTL.js';
 import './chunk-7V5M4LMA.js';
 import './chunk-GUK5N5Z2.js';
 import './chunk-Y2GINGVR.js';
 import './chunk-ESJIQMQJ.js';
 import './chunk-IY6WVOAI.js';
-import './chunk-T2SOP5NE.js';
 import './chunk-M4UBHZDH.js';
 import './chunk-TMO76FWT.js';
 import './chunk-NDDDT4TO.js';
 import './chunk-QYKN3JZ5.js';
 import './chunk-SLIZ4TDR.js';
 import './chunk-F3BF3KTV.js';
-import './chunk-Z44LYPKH.js';
 import './chunk-ANU7OAPA.js';
 import './chunk-ISA6E23B.js';
 import './chunk-3PTVTRDP.js';
@@ -56,9 +56,10 @@ import './chunk-D5TS3JJH.js';
 import './chunk-DSJ5TRZW.js';
 import './chunk-E4USZ2Q3.js';
 import './chunk-F47A36U7.js';
+import './chunk-JFL77JIP.js';
 import './chunk-RRNNHYSF.js';
 import './chunk-4FSPYK2A.js';
-import './chunk-YDCYBJPC.js';
+import './chunk-QZFOPL3O.js';
 import './chunk-5SEJVYKM.js';
 import './chunk-MBACKGWE.js';
 import './chunk-2OPJLYW6.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ekm-ui",
-  "version": "0.4.39",
+  "version": "0.4.41",
   "sideEffects": [
     "**/*.css"
   ],

package/src/accordion.tsx

@@ -12,6 +12,7 @@ import PropTypes from "prop-types";
 
 type AccordionContext = {
   currentlyShowing: string | null;
+  colour: string;
   handleSelection: (id: string) => void;
   addPanelOrder: (id: string) => void;
   getPanelList: () => string[];
@@ -19,6 +20,7 @@ type AccordionContext = {
 
 export const AccordionContext = createContext<AccordionContext>({
   currentlyShowing: null,
+  colour: 'gray',
   handleSelection: (_: string) => {},
   addPanelOrder: (_: string) => {},
   getPanelList: () => [],
@@ -26,9 +28,10 @@ export const AccordionContext = createContext<AccordionContext>({
 
 type AccordionProps = {
   children: React.ReactElement<AccordionPanelProps>[];
+  colour: string;
 };
 
-export function Accordion({ children }: AccordionProps) {
+export function Accordion({ children, colour = 'gray' }: AccordionProps) {
   const panelListRef = useRef<string[]>([]);
   const [currentlyShowing, setCurrentlyShowing] = useState<string | null>(null);
 
@@ -50,7 +53,7 @@ export function Accordion({ children }: AccordionProps) {
 
   return (
     <AccordionContext.Provider
-      value={{ currentlyShowing, handleSelection, addPanelOrder, getPanelList }}
+      value={{ currentlyShowing, colour, handleSelection, addPanelOrder, getPanelList }}
     >
       {children}
     </AccordionContext.Provider>
@@ -95,20 +98,17 @@ export function AccordionTitle({ children, id }: AccordionTitleProps) {
 
   return (
     <h2 id={`${id}-title`}>
-      <button
-        type="button"
-        className={`flex w-full items-center justify-between border p-5 text-left font-medium ${
+      <div
+        className={`flex w-full items-center justify-between border p-5 text-left font-medium cursor-pointer ${
           isLastPanel && context.currentlyShowing !== id
-            ? "border-b-1"
-            : "border-b-0"
+            ? "border-b-1 rounded-b-xl"
+            : "border-b-0 rounded-none"
         } border-gray-200 ${
           panelList[0] === id
             ? "rounded-t-xl"
-            : isLastPanel && context.currentlyShowing !== id
-            ? "rounded-b-xl"
-            : "rounded-none"
-        } ${context.currentlyShowing === id && "bg-gray-100"}
-         text-gray-500 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-800`}
+            : ""
+        } ${context.colour === 'white' ? 'bg-white' : 'bg-gray-100'}
+         text-gray-500 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-800 ${context.colour === 'white' ? '' : 'hover:bg-gray-100'}`}
         data-accordion-target={`#${id}-title`}
         aria-expanded="true"
         aria-controls={`${id}-title`}
@@ -120,7 +120,7 @@ export function AccordionTitle({ children, id }: AccordionTitleProps) {
         ) : (
           <HiChevronDown className="h-6 w-6" />
         )}
-      </button>
+      </div>
     </h2>
   );
 }
@@ -144,7 +144,7 @@ export function AccordionContent({ children, id }: AccordionContentProps) {
           context.currentlyShowing === id
             ? "border-b-1 rounded-b-xl"
             : "border-b-0"
-        } border-gray-200 dark:border-gray-700 dark:bg-gray-900`}
+        } border-gray-200 dark:border-gray-700 dark:bg-gray-900 ${context.colour === 'white' ? 'bg-white' : 'bg-gray-100'}`}
       >
         {children}
       </div>
@@ -158,20 +158,21 @@ Accordion.Content = AccordionContent;
 
 Accordion.propTypes = {
   /** Components to be rendered as Part of the Compound Component, each panel is a seperate accordion section*/
-  children: PropTypes.arrayOf(PropTypes.element),
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.element),
+    PropTypes.shape({ type: PropTypes.oneOf([AccordionPanel]) }),
+  ]),
+  colour: PropTypes.oneOf(["gray", "white"]),
 };
 
 AccordionPanel.propTypes = {
   /** Unique id for the dropdown */
   id: PropTypes.string.isRequired,
   /** Components to be rendered as Part of the Compound Component*/
-  children: PropTypes.oneOfType([
-    PropTypes.shape({ type: PropTypes.oneOf([AccordionTitle]) }),
-    PropTypes.shape({ type: PropTypes.oneOf([AccordionContent]) }),
-  ]).isRequired,
+  children: PropTypes.array.isRequired,
 };
 
 AccordionContent.propTypes = {
   /** Components held within the Content section of the AccordionPanel*/
-  children: PropTypes.oneOfType([PropTypes.elementType]),
+  children: PropTypes.oneOfType([PropTypes.element]),
 };