@a-type/ui 0.4.8 → 0.5.0

package/src/components/camera/Camera.tsx

@@ -29,7 +29,7 @@ const CameraContext = createContext<{
 
 export interface CameraRootProps {
 	className?: string;
-	onCapture?: (data: string) => void;
+	onCapture?: (data: File) => void;
 	children?: ReactNode;
 	format?: 'image/png' | 'image/jpeg';
 }
@@ -49,7 +49,8 @@ export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
 				canvas.height = video.videoHeight;
 				canvas.getContext('2d')?.drawImage(video, 0, 0);
 				const data = canvas.toDataURL(format);
-				onCapture?.(data);
+				const file = dataURItoFile(data);
+				onCapture?.(file);
 			}
 		};
 
@@ -213,3 +214,20 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 		</Select>
 	);
 };
+
+function dataURItoFile(dataURI: string) {
+	// convert base64/URLEncoded data component to raw binary data held in a string
+	var byteString;
+	if (dataURI.split(',')[0].indexOf('base64') >= 0)
+		byteString = atob(dataURI.split(',')[1]);
+	else byteString = unescape(dataURI.split(',')[1]);
+	// separate out the mime component
+	var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+	// write the bytes of the string to a typed array
+	var ia = new Uint8Array(byteString.length);
+	for (var i = 0; i < byteString.length; i++) {
+		ia[i] = byteString.charCodeAt(i);
+	}
+	const fileExt = mimeString.split('/')[1];
+	return new File([ia], `image.${fileExt}`, { type: mimeString });
+}

package/src/components/datePicker/DatePicker.tsx

@@ -5,7 +5,6 @@ import {
 } from 'calendar-blocks';
 import { Button } from '../button.js';
 import { Icon } from '../icon.js';
-import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
 import { useCallback, useState } from 'react';
 import { withClassName } from '../../hooks.js';
 import classNames from 'classnames';
@@ -50,7 +49,7 @@ export function DatePicker({
 						}))
 					}
 				>
-					<ArrowLeftIcon />
+					<Icon name="arrowLeft" />
 				</MonthButton>
 				<MonthLabel>{monthLabel}</MonthLabel>
 				<MonthButton
@@ -63,7 +62,7 @@ export function DatePicker({
 						}))
 					}
 				>
-					<ArrowRightIcon />
+					<Icon name="arrowRight" />
 				</MonthButton>
 			</MonthRow>
 			<Calendar
@@ -154,10 +153,10 @@ export function DateRangePicker({
 						}))
 					}
 				>
-					<ArrowLeftIcon />
+					<Icon name="arrowLeft" />
 				</MonthButton>
 				<MonthLabel className="[grid-area:leftMonth]">{monthLabel}</MonthLabel>
-				<MonthLabel className="[grid-area:rightMonth]">
+				<MonthLabel className="[grid-area:rightMonth] !hidden !sm:block">
 					{nextMonthLabel}
 				</MonthLabel>
 				<MonthButton
@@ -171,7 +170,7 @@ export function DateRangePicker({
 						}))
 					}
 				>
-					<ArrowRightIcon />
+					<Icon name="arrowRight" />
 				</MonthButton>
 				<CalendarGrid className="[grid-area:leftGrid]">
 					<DayLabels />
@@ -179,7 +178,7 @@ export function DateRangePicker({
 						{(value) => <CalendarDay value={value} key={value.key} />}
 					</CalendarDays>
 				</CalendarGrid>
-				<CalendarGrid className="[grid-area:rightGrid]">
+				<CalendarGrid className="[grid-area:rightGrid] !hidden !sm:grid">
 					<DayLabels />
 					<CalendarDays monthOffset={1}>
 						{(value) => <CalendarDay value={value} key={value.key} />}
@@ -255,6 +254,7 @@ const DayLabels = () => (
 
 const RangeLayout = withClassName(
 	'div',
-	'grid [grid-template-areas:"prevMonth_leftMonth_rightMonth_nextMonth""leftGrid_leftGrid_rightGrid_rightGrid"]',
-	'[grid-template-columns:auto_1fr_1fr_auto] [grid-template-rows:auto_1fr] gap-2',
+	'grid [grid-template-areas:"prevMonth_leftMonth_nextMonth""leftGrid_leftGrid_leftGrid"] [grid-template-columns:auto_1fr_auto]',
+	'[grid-template-rows:auto_1fr] gap-2',
+	'sm:([grid-template-areas:"prevMonth_leftMonth_rightMonth_nextMonth""leftGrid_leftGrid_rightGrid_rightGrid"] [grid-template-columns:auto_1fr_1fr_auto])',
 );

package/src/components/icon/generated/IconSpritesheet.tsx

@@ -26,30 +26,30 @@ export const IconSpritesheet = (props: any) => (
 				/>
 			</symbol>
 			<symbol id="icon-globe" viewBox="0 0 15 15">
-				<mask
-					id="mask0_301_239"
-					style={{ maskType: 'alpha' }}
-					maskUnits="userSpaceOnUse"
-					x="1"
-					y="1"
-					width="13"
-					height="13"
-				>
-					<circle cx="7.5" cy="7.5" r="6.5" fill="#D9D9D9" />
-				</mask>
-				<g mask="url(#mask0_301_239)">
-					<circle cx="7.5" cy="7.5" r="6" stroke="currentColor" />
-					<path
-						d="M14.5 7.5C14.5 8.15685 13.9097 8.90677 12.5919 9.52178C11.3146 10.1179 9.51485 10.5 7.5 10.5C5.48515 10.5 3.68543 10.1179 2.40814 9.52178C1.09025 8.90677 0.5 8.15685 0.5 7.5C0.5 6.84315 1.09025 6.09323 2.40814 5.47822C3.68543 4.88215 5.48515 4.5 7.5 4.5C9.51485 4.5 11.3146 4.88215 12.5919 5.47822C13.9097 6.09323 14.5 6.84315 14.5 7.5Z"
-						stroke="currentColor"
-					/>
-					<path
-						d="M10.5 7.5C10.5 9.22874 10.1216 10.769 9.53464 11.8591C8.93669 12.9696 8.19442 13.5 7.5 13.5C6.80558 13.5 6.06331 12.9696 5.46536 11.8591C4.87838 10.769 4.5 9.22874 4.5 7.5C4.5 5.77126 4.87838 4.23096 5.46536 3.14086C6.06331 2.03038 6.80558 1.5 7.5 1.5C8.19442 1.5 8.93669 2.03038 9.53464 3.14086C10.1216 4.23096 10.5 5.77126 10.5 7.5Z"
-						stroke="currentColor"
-					/>
-					<path d="M1 7.5H14" stroke="currentColor" />
-					<path d="M7.5 1V14" stroke="currentColor" />
+				<g clipPath="url(#clip0_301_239)">
+					<mask
+						id="mask0_301_239"
+						style={{ maskType: 'alpha' }}
+						maskUnits="userSpaceOnUse"
+						x="0"
+						y="0"
+						width="15"
+						height="15"
+					>
+						<circle cx="7.5" cy="7.5" r="7" fill="#D9D9D9" />
+					</mask>
+					<g mask="url(#mask0_301_239)">
+						<path
+							d="M14 7.5C14 11.0899 11.0899 14 7.5 14M14 7.5C14 3.91015 11.0899 1 7.5 1M14 7.5H1M7.5 14C3.91015 14 1 11.0899 1 7.5M7.5 14C9.433 14 11 11.0899 11 7.5C11 3.91015 9.433 1 7.5 1M7.5 14C5.567 14 4 11.0899 4 7.5C4 3.91015 5.567 1 7.5 1M7.5 14V1M1 7.5C1 3.91015 3.91015 1 7.5 1M15 7.5C15 9.433 11.6421 11 7.5 11C3.35786 11 0 9.433 0 7.5C0 5.567 3.35786 4 7.5 4C11.6421 4 15 5.567 15 7.5Z"
+							stroke="currentColor"
+						/>
+					</g>
 				</g>
+				<defs>
+					<clipPath id="clip0_301_239">
+						<rect width="15" height="15" fill="white" />
+					</clipPath>
+				</defs>
 			</symbol>
 			<symbol id="icon-cart" viewBox="0 0 15 15">
 				<path
@@ -453,6 +453,139 @@ export const IconSpritesheet = (props: any) => (
 					fill="currentColor"
 				/>
 			</symbol>
+			<symbol id="icon-gear" viewBox="0 0 15 15">
+				<g clipPath="url(#clip0_830_55)">
+					<path
+						fillRule="evenodd"
+						clipRule="evenodd"
+						d="M7.07095 0.650238C6.67391 0.650238 6.32977 0.925096 6.24198 1.31231L6.0039 2.36247C5.6249 2.47269 5.26335 2.62363 4.92436 2.81013L4.01335 2.23585C3.67748 2.02413 3.23978 2.07312 2.95903 2.35386L2.35294 2.95996C2.0722 3.2407 2.0232 3.6784 2.23493 4.01427L2.80942 4.92561C2.62307 5.2645 2.47227 5.62594 2.36216 6.00481L1.31209 6.24287C0.924883 6.33065 0.650024 6.6748 0.650024 7.07183V7.92897C0.650024 8.32601 0.924883 8.67015 1.31209 8.75794L2.36228 8.99603C2.47246 9.375 2.62335 9.73652 2.80979 10.0755L2.2354 10.9867C2.02367 11.3225 2.07267 11.7602 2.35341 12.041L2.95951 12.6471C3.24025 12.9278 3.67795 12.9768 4.01382 12.7651L4.92506 12.1907C5.26384 12.377 5.62516 12.5278 6.0039 12.6379L6.24198 13.6881C6.32977 14.0753 6.67391 14.3502 7.07095 14.3502H7.92809C8.32512 14.3502 8.66927 14.0753 8.75705 13.6881L8.99505 12.6383C9.37411 12.5282 9.73573 12.3773 10.0748 12.1909L10.986 12.7653C11.3218 12.977 11.7595 12.928 12.0403 12.6473L12.6464 12.0412C12.9271 11.7604 12.9761 11.3227 12.7644 10.9869L12.1902 10.076C12.3768 9.73688 12.5278 9.37515 12.638 8.99596L13.6879 8.75794C14.0751 8.67015 14.35 8.32601 14.35 7.92897V7.07183C14.35 6.6748 14.0751 6.33065 13.6879 6.24287L12.6381 6.00488C12.528 5.62578 12.3771 5.26414 12.1906 4.92507L12.7648 4.01407C12.9766 3.6782 12.9276 3.2405 12.6468 2.95975L12.0407 2.35366C11.76 2.07292 11.3223 2.02392 10.9864 2.23565L10.0755 2.80989C9.73622 2.62328 9.37437 2.47229 8.99505 2.36209L8.75705 1.31231C8.66927 0.925096 8.32512 0.650238 7.92809 0.650238H7.07095ZM4.92053 3.81251C5.44724 3.44339 6.05665 3.18424 6.71543 3.06839L7.07095 1.50024H7.92809L8.28355 3.06816C8.94267 3.18387 9.5524 3.44302 10.0794 3.81224L11.4397 2.9547L12.0458 3.56079L11.1882 4.92117C11.5573 5.44798 11.8164 6.0575 11.9321 6.71638L13.5 7.07183V7.92897L11.932 8.28444C11.8162 8.94342 11.557 9.55301 11.1878 10.0798L12.0453 11.4402L11.4392 12.0462L10.0787 11.1886C9.55192 11.5576 8.94241 11.8166 8.28355 11.9323L7.92809 13.5002H7.07095L6.71543 11.932C6.0569 11.8162 5.44772 11.5572 4.92116 11.1883L3.56055 12.046L2.95445 11.4399L3.81213 10.0794C3.4431 9.55266 3.18403 8.94326 3.06825 8.2845L1.50002 7.92897V7.07183L3.06818 6.71632C3.18388 6.05765 3.44283 5.44833 3.81171 4.92165L2.95398 3.561L3.56008 2.95491L4.92053 3.81251ZM9.02496 7.50008C9.02496 8.34226 8.34223 9.02499 7.50005 9.02499C6.65786 9.02499 5.97513 8.34226 5.97513 7.50008C5.97513 6.65789 6.65786 5.97516 7.50005 5.97516C8.34223 5.97516 9.02496 6.65789 9.02496 7.50008ZM9.92496 7.50008C9.92496 8.83932 8.83929 9.92499 7.50005 9.92499C6.1608 9.92499 5.07513 8.83932 5.07513 7.50008C5.07513 6.16084 6.1608 5.07516 7.50005 5.07516C8.83929 5.07516 9.92496 6.16084 9.92496 7.50008Z"
+						fill="currentColor"
+					/>
+				</g>
+				<defs>
+					<clipPath id="clip0_830_55">
+						<rect width="15" height="15" fill="white" />
+					</clipPath>
+				</defs>
+			</symbol>
+			<symbol id="icon-lock" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M5 4.63601C5 3.76031 5.24219 3.1054 5.64323 2.67357C6.03934 2.24705 6.64582 1.9783 7.5014 1.9783C8.35745 1.9783 8.96306 2.24652 9.35823 2.67208C9.75838 3.10299 10 3.75708 10 4.63325V5.99999H5V4.63601ZM4 5.99999V4.63601C4 3.58148 4.29339 2.65754 4.91049 1.99307C5.53252 1.32329 6.42675 0.978302 7.5014 0.978302C8.57583 0.978302 9.46952 1.32233 10.091 1.99162C10.7076 2.65557 11 3.57896 11 4.63325V5.99999H12C12.5523 5.99999 13 6.44771 13 6.99999V13C13 13.5523 12.5523 14 12 14H3C2.44772 14 2 13.5523 2 13V6.99999C2 6.44771 2.44772 5.99999 3 5.99999H4ZM3 6.99999H12V13H3V6.99999Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-lockOpen" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M7.4986 0C6.3257 0 5.36107 0.38943 4.73753 1.19361C4.23745 1.83856 4 2.68242 4 3.63325H5C5 2.84313 5.19691 2.23312 5.5278 1.80636C5.91615 1.30552 6.55152 1 7.4986 1C8.35683 1 8.96336 1.26502 9.35846 1.68623C9.75793 2.11211 10 2.76044 10 3.63601V6H3C2.44772 6 2 6.44772 2 7V13C2 13.5523 2.44772 14 3 14H12C12.5523 14 13 13.5523 13 13V7C13 6.44772 12.5523 6 12 6H11V3.63601C11 2.58135 10.7065 1.66167 10.0878 1.0021C9.46477 0.337871 8.57061 0 7.4986 0ZM3 7H12V13H3V7Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-send" viewBox="0 0 15 15">
+				<g clipPath="url(#clip0_830_77)">
+					<path
+						fillRule="evenodd"
+						clipRule="evenodd"
+						d="M1.20308 1.04312C1.00481 0.954998 0.772341 1.0048 0.627577 1.16641C0.482813 1.32802 0.458794 1.56455 0.568117 1.75196L3.92115 7.50002L0.568117 13.2481C0.458794 13.4355 0.482813 13.672 0.627577 13.8336C0.772341 13.9952 1.00481 14.045 1.20308 13.9569L14.7031 7.95693C14.8836 7.87668 15 7.69762 15 7.50002C15 7.30243 14.8836 7.12337 14.7031 7.04312L1.20308 1.04312ZM4.84553 7.10002L2.21234 2.586L13.2689 7.50002L2.21234 12.414L4.84552 7.90002H9C9.22092 7.90002 9.4 7.72094 9.4 7.50002C9.4 7.27911 9.22092 7.10002 9 7.10002H4.84553Z"
+						fill="currentColor"
+					/>
+				</g>
+				<defs>
+					<clipPath id="clip0_830_77">
+						<rect width="15" height="15" fill="white" />
+					</clipPath>
+				</defs>
+			</symbol>
+			<symbol id="icon-pencil" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M11.8536 1.14645C11.6583 0.951184 11.3417 0.951184 11.1465 1.14645L3.71455 8.57836C3.62459 8.66832 3.55263 8.77461 3.50251 8.89155L2.04044 12.303C1.9599 12.491 2.00189 12.709 2.14646 12.8536C2.29103 12.9981 2.50905 13.0401 2.69697 12.9596L6.10847 11.4975C6.2254 11.4474 6.3317 11.3754 6.42166 11.2855L13.8536 3.85355C14.0488 3.65829 14.0488 3.34171 13.8536 3.14645L11.8536 1.14645ZM4.42166 9.28547L11.5 2.20711L12.7929 3.5L5.71455 10.5784L4.21924 11.2192L3.78081 10.7808L4.42166 9.28547Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-eye" viewBox="0 0 15 15">
+				<g clipPath="url(#clip0_830_91)">
+					<path
+						fillRule="evenodd"
+						clipRule="evenodd"
+						d="M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z"
+						fill="currentColor"
+					/>
+				</g>
+				<defs>
+					<clipPath id="clip0_830_91">
+						<rect width="15" height="15" fill="white" />
+					</clipPath>
+				</defs>
+			</symbol>
+			<symbol id="icon-stopwatch" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M5.49998 0.5C5.49998 0.223858 5.72383 0 5.99998 0H7.49998H8.99998C9.27612 0 9.49998 0.223858 9.49998 0.5C9.49998 0.776142 9.27612 1 8.99998 1H7.99998V2.11922C9.09832 2.20409 10.119 2.56622 10.992 3.13572C11.0116 3.10851 11.0336 3.08252 11.058 3.05806L11.858 2.25806C12.1021 2.01398 12.4978 2.01398 12.7419 2.25806C12.986 2.50214 12.986 2.89786 12.7419 3.14194L11.967 3.91682C13.1595 5.07925 13.9 6.70314 13.9 8.49998C13.9 12.0346 11.0346 14.9 7.49998 14.9C3.96535 14.9 1.09998 12.0346 1.09998 8.49998C1.09998 5.13362 3.69904 2.3743 6.99998 2.11922V1H5.99998C5.72383 1 5.49998 0.776142 5.49998 0.5ZM2.09998 8.49998C2.09998 5.51764 4.51764 3.09998 7.49998 3.09998C10.4823 3.09998 12.9 5.51764 12.9 8.49998C12.9 11.4823 10.4823 13.9 7.49998 13.9C4.51764 13.9 2.09998 11.4823 2.09998 8.49998ZM7.99998 4.5C7.99998 4.22386 7.77612 4 7.49998 4C7.22383 4 6.99998 4.22386 6.99998 4.5V9.5C6.99998 9.77614 7.22383 10 7.49998 10C7.77612 10 7.99998 9.77614 7.99998 9.5V4.5Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-zoomIn" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159ZM4.25 6.5C4.25 6.22386 4.47386 6 4.75 6H6V4.75C6 4.47386 6.22386 4.25 6.5 4.25C6.77614 4.25 7 4.47386 7 4.75V6H8.25C8.52614 6 8.75 6.22386 8.75 6.5C8.75 6.77614 8.52614 7 8.25 7H7V8.25C7 8.52614 6.77614 8.75 6.5 8.75C6.22386 8.75 6 8.52614 6 8.25V7H4.75C4.47386 7 4.25 6.77614 4.25 6.5Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-zoomOut" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M6.5 10C8.433 10 10 8.433 10 6.5C10 4.567 8.433 3 6.5 3C4.567 3 3 4.567 3 6.5C3 8.433 4.567 10 6.5 10ZM6.5 11C7.56251 11 8.53901 10.6318 9.30884 10.0159L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L10.0159 9.30884C10.6318 8.53901 11 7.56251 11 6.5C11 4.01472 8.98528 2 6.5 2C4.01472 2 2 4.01472 2 6.5C2 8.98528 4.01472 11 6.5 11ZM4.75 6C4.47386 6 4.25 6.22386 4.25 6.5C4.25 6.77614 4.47386 7 4.75 7H8.25C8.52614 7 8.75 6.77614 8.75 6.5C8.75 6.22386 8.52614 6 8.25 6H4.75Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-picture" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M2.5 1H12.5C13.3284 1 14 1.67157 14 2.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V2.5C1 1.67157 1.67157 1 2.5 1ZM2.5 2C2.22386 2 2 2.22386 2 2.5V8.3636L3.6818 6.6818C3.76809 6.59551 3.88572 6.54797 4.00774 6.55007C4.12975 6.55216 4.24568 6.60372 4.32895 6.69293L7.87355 10.4901L10.6818 7.6818C10.8575 7.50607 11.1425 7.50607 11.3182 7.6818L13 9.3636V2.5C13 2.22386 12.7761 2 12.5 2H2.5ZM2 12.5V9.6364L3.98887 7.64753L7.5311 11.4421L8.94113 13H2.5C2.22386 13 2 12.7761 2 12.5ZM12.5 13H10.155L8.48336 11.153L11 8.6364L13 10.6364V12.5C13 12.7761 12.7761 13 12.5 13ZM6.64922 5.5C6.64922 5.03013 7.03013 4.64922 7.5 4.64922C7.96987 4.64922 8.35078 5.03013 8.35078 5.5C8.35078 5.96987 7.96987 6.35078 7.5 6.35078C7.03013 6.35078 6.64922 5.96987 6.64922 5.5ZM7.5 3.74922C6.53307 3.74922 5.74922 4.53307 5.74922 5.5C5.74922 6.46693 6.53307 7.25078 7.5 7.25078C8.46693 7.25078 9.25078 6.46693 9.25078 5.5C9.25078 4.53307 8.46693 3.74922 7.5 3.74922Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-arrowLeft" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-arrowRight" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-arrowUp" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-arrowDown" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M7.5 2C7.77614 2 8 2.22386 8 2.5L8 11.2929L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L7.85355 12.8536C7.75979 12.9473 7.63261 13 7.5 13C7.36739 13 7.24021 12.9473 7.14645 12.8536L3.14645 8.85355C2.95118 8.65829 2.95118 8.34171 3.14645 8.14645C3.34171 7.95118 3.65829 7.95118 3.85355 8.14645L7 11.2929L7 2.5C7 2.22386 7.22386 2 7.5 2Z"
+					fill="currentColor"
+				/>
+			</symbol>
 		</defs>
 	</svg>
 );

package/src/components/icon/generated/iconNames.ts

@@ -41,6 +41,20 @@ export const iconNames = [
 	'camera',
 	'calendar',
 	'page',
+	'gear',
+	'lock',
+	'lockOpen',
+	'send',
+	'pencil',
+	'eye',
+	'stopwatch',
+	'zoomIn',
+	'zoomOut',
+	'picture',
+	'arrowLeft',
+	'arrowRight',
+	'arrowUp',
+	'arrowDown',
 ] as const;
 
 export type IconName = (typeof iconNames)[number];

package/src/components/imageUploader/ImageUploader.tsx

@@ -155,8 +155,8 @@ export function ImageUploader({
 				<CameraRoot
 					className="absolute w-full h-full z-1"
 					format="image/png"
-					onCapture={(dataUrl) => {
-						onChange(dataURItoBlob(dataUrl));
+					onCapture={(file) => {
+						onChange(file);
 						setCameraOpen(false);
 					}}
 				>
@@ -185,19 +185,3 @@ export function ImageUploader({
 		</div>
 	);
 }
-
-function dataURItoBlob(dataURI: string) {
-	// convert base64/URLEncoded data component to raw binary data held in a string
-	var byteString;
-	if (dataURI.split(',')[0].indexOf('base64') >= 0)
-		byteString = atob(dataURI.split(',')[1]);
-	else byteString = unescape(dataURI.split(',')[1]);
-	// separate out the mime component
-	var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
-	// write the bytes of the string to a typed array
-	var ia = new Uint8Array(byteString.length);
-	for (var i = 0; i < byteString.length; i++) {
-		ia[i] = byteString.charCodeAt(i);
-	}
-	return new File([ia], 'image.png', { type: mimeString });
-}