@star-insure/sdk 3.2.12 → 3.2.14

package/package.json

@@ -2,7 +2,7 @@
     "name": "@star-insure/sdk",
     "description": "The SDK for Star Insure client apps with shared helper functions and TypeScript definitions.",
     "author": "alexclark_nz",
-    "version": "3.2.12",
+    "version": "3.2.14",
     "license": "MIT",
     "repository": {
         "type": "git",

package/src/components/common/Modal.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import { Fragment } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
+import { Fragment } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
 
 interface Props {
     children: React.ReactNode;
     isActive?: boolean;
     onClose: () => void;
     title?: string;
+    className?: string;
 }
 
-export default function Modal({ children, isActive = false, onClose, title }: Props) {
+export default function Modal({ children, isActive = false, onClose, title, className = '' }: Props) {
     return (
         <Transition.Root show={isActive} as={Fragment}>
             <Dialog as="div" className="fixed z-[110] inset-0 overflow-y-auto" onClose={onClose}>
@@ -35,7 +36,7 @@ export default function Modal({ children, isActive = false, onClose, title }: Pr
                         leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                         leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     >
-                        <div className="w-full align-start inline-block bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:p-6">
+                        <div className={`${className} w-full align-start inline-block bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:p-6`}>
                             <div className={`flex gap-4 mb-4 text-asphalt ${title ? 'border-b-2 border-asphalt pb-4' : ''}`}>
                                 {title && <h3 className="font-black text-lg">{title}</h3>}
                                 <button type="button" onClick={onClose} className="ml-auto transition-all hover:opacity-50">

package/src/components/filter/FilterItem.tsx

@@ -198,7 +198,7 @@ export function FilterItem({ filter }: { filter: FilterOption, path?: string })
             </div>
         }>
             <form
-                className={`mt-2 flex max-h-[350px] min-w-[200px] flex-col gap-2 rounded-md border border-gray-300 bg-white p-4 shadow-lg ${ filter.type && filter.type === 'select' ? '' : 'overflow-y-scroll'}`}
+                className={`mt-2 flex max-h-[350px] min-w-[200px] max-w-[220px] flex-col gap-2 rounded-md border border-gray-300 bg-white p-4 shadow-lg ${ filter.type && filter.type === 'select' ? '' : 'overflow-y-scroll'}`}
                 onSubmit={handleApply}
             >
                 <div className="flex flex-col items-start gap-1">
@@ -213,7 +213,7 @@ export function FilterItem({ filter }: { filter: FilterOption, path?: string })
                                     checked={selected.includes(option.value.toString())}
                                     onChange={handleInput}
                                 />
-                                <label className="whitespace-nowrap" htmlFor={option.label}>
+                                <label className="leading-tight" htmlFor={option.label}>
                                     {option.label}
                                 </label>
                             </div>