feat(dashboard,icons,types,js-sdk): add providers to location UI (#8328)

packages/admin-next/dashboard/src/hooks/api/stock-locations.tsx

@@ -11,6 +11,7 @@ import { HttpTypes } from "@medusajs/types"
 import { sdk } from "../../lib/client"
 import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
+import { fulfillmentProvidersQueryKeys } from "./fulfillment-providers"
 
 const STOCK_LOCATIONS_QUERY_KEY = "stock_locations" as const
 export const stockLocationsQueryKeys = queryKeysFactory(
@@ -175,3 +176,28 @@ export const useCreateStockLocationFulfillmentSet = (
     ...options,
   })
 }
+
+export const useUpdateStockLocationFulfillmentProviders = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminStockLocationResponse,
+    FetchError,
+    HttpTypes.AdminBatchLink
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) =>
+      sdk.admin.stockLocation.updateFulfillmentProviders(id, payload),
+    onSuccess: async (data, variables, context) => {
+      await queryClient.invalidateQueries({
+        queryKey: stockLocationsQueryKeys.details(),
+      })
+      await queryClient.invalidateQueries({
+        queryKey: fulfillmentProvidersQueryKeys.all,
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}

packages/admin-next/dashboard/src/hooks/table/columns/use-fulfillment-provider-table-columns.tsx

@@ -0,0 +1,25 @@
+import { HttpTypes } from "@medusajs/types"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import {
+  TextCell,
+  TextHeader,
+} from "../../../components/table/table-cells/common/text-cell"
+import { formatProvider } from "../../../lib/format-provider"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminFulfillmentProvider>()
+
+export const useFulfillmentProviderTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("id", {
+        header: () => <TextHeader text={"Provider"} />,
+        cell: ({ getValue }) => <TextCell text={formatProvider(getValue())} />,
+      }),
+    ],
+    [t]
+  )
+}

packages/admin-next/dashboard/src/hooks/table/query/use-fulfillment-providers-table-query.tsx

@@ -0,0 +1,31 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseFulfillmentProviderTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useFulfillmentProvidersTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseFulfillmentProviderTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "stock_location_id"],
+    prefix
+  )
+
+  const { offset, q, stock_location_id } = queryObject
+
+  const searchParams: HttpTypes.AdminFulfillmentProviderListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    stock_location_id,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin-next/dashboard/src/i18n/translations/en.json

@@ -1020,6 +1020,15 @@
     "delete": {
       "confirmation": "You are about to delete the stock location {{name}}. This action cannot be undone."
     },
+    "fulfillmentProviders": {
+      "header": "Fulfillment Providers",
+      "shippingOptionsTooltip": "This dropdown will only consist of providers enabled for this location. Add them to the location if the dropdown is disabled.",
+      "label": "Connected fulfillment providers",
+      "connectedTo": "Connected to {{count}} of {{total}} fulfillment providers",
+      "noProviders": "This Stock Location is not connected to any fulfillment providers.",
+      "action": "Connect Providers",
+      "successToast": "Fulfillment providers for stock location were successfully updated."
+    },
     "fulfillmentSets": {
       "pickup": {
         "header": "Pickup"

packages/admin-next/dashboard/src/providers/router-provider/route-map.tsx

@@ -871,6 +871,13 @@ export const RouteMap: RouteObject[] = [
                     lazy: () =>
                       import("../../routes/locations/location-sales-channels"),
                   },
+                  {
+                    path: "fulfillment-providers",
+                    lazy: () =>
+                      import(
+                        "../../routes/locations/location-fulfillment-providers"
+                      ),
+                  },
                   {
                     path: "fulfillment-set/:fset_id",
                     children: [

packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-fulfillment-providers-section/index.ts

@@ -0,0 +1 @@
+export * from "./location-fulfillment-providers-section"

packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-fulfillment-providers-section/location-fulfillment-providers-section.tsx

@@ -0,0 +1,79 @@
+import { HandTruck, PencilSquare } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
+import { Container, Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { NoRecords } from "../../../../../components/common/empty-table-content"
+import { IconAvatar } from "../../../../../components/common/icon-avatar"
+import { useFulfillmentProviders } from "../../../../../hooks/api"
+import { formatProvider } from "../../../../../lib/format-provider"
+
+type LocationsFulfillmentProvidersSectionProps = {
+  location: HttpTypes.AdminStockLocation
+}
+
+function LocationsFulfillmentProvidersSection({
+  location,
+}: LocationsFulfillmentProvidersSectionProps) {
+  const { t } = useTranslation()
+  const { fulfillment_providers } = useFulfillmentProviders({
+    stock_location_id: location.id,
+    fields: "id",
+  })
+
+  return (
+    <Container className="flex flex-col px-6 py-4">
+      <div className="flex items-center justify-between">
+        <Heading level="h2">
+          {t("stockLocations.fulfillmentProviders.header")}
+        </Heading>
+
+        <ActionMenu
+          groups={[
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  to: "fulfillment-providers",
+                  icon: <PencilSquare />,
+                },
+              ],
+            },
+          ]}
+        />
+      </div>
+
+      {fulfillment_providers?.length ? (
+        <div className="flex flex-col gap-y-4 pt-4">
+          <div className="grid grid-cols-[28px_1fr] items-center gap-x-3 gap-y-3">
+            {fulfillment_providers?.map((fulfillmentProvider) => {
+              return (
+                <>
+                  <IconAvatar>
+                    <HandTruck className="text-ui-fg-subtle" />
+                  </IconAvatar>
+
+                  <div className="txt-compact-small">
+                    {formatProvider(fulfillmentProvider.id)}
+                  </div>
+                </>
+              )
+            })}
+          </div>
+        </div>
+      ) : (
+        <NoRecords
+          className="h-fit pb-2 pt-6 text-center"
+          action={{
+            label: t("stockLocations.fulfillmentProviders.action"),
+            to: "fulfillment-providers",
+          }}
+          message={t("stockLocations.fulfillmentProviders.noProviders")}
+        />
+      )}
+    </Container>
+  )
+}
+
+export default LocationsFulfillmentProvidersSection

packages/admin-next/dashboard/src/routes/locations/location-detail/const.ts

@@ -1,2 +1,2 @@
 export const detailsFields =
-  "name,*sales_channels,*address,fulfillment_sets.type,fulfillment_sets.name,*fulfillment_sets.service_zones.geo_zones,*fulfillment_sets.service_zones,*fulfillment_sets.service_zones.shipping_options,*fulfillment_sets.service_zones.shipping_options.rules,*fulfillment_sets.service_zones.shipping_options.shipping_profile"
+  "name,*sales_channels,*address,fulfillment_sets.type,fulfillment_sets.name,*fulfillment_sets.service_zones.geo_zones,*fulfillment_sets.service_zones,*fulfillment_sets.service_zones.shipping_options,*fulfillment_sets.service_zones.shipping_options.rules,*fulfillment_sets.service_zones.shipping_options.shipping_profile,*fulfillment_providers"

packages/admin-next/dashboard/src/routes/locations/location-detail/location-detail.tsx

@@ -10,6 +10,7 @@ import after from "virtual:medusa/widgets/location/details/after"
 import before from "virtual:medusa/widgets/location/details/before"
 import sideAfter from "virtual:medusa/widgets/location/details/side/after"
 import sideBefore from "virtual:medusa/widgets/location/details/side/before"
+import LocationsFulfillmentProvidersSection from "./components/location-fulfillment-providers-section/location-fulfillment-providers-section"
 import { detailsFields } from "./const"
 
 export const LocationDetail = () => {
@@ -23,15 +24,7 @@ export const LocationDetail = () => {
     isPending: isLoading,
     isError,
     error,
-  } = useStockLocation(
+  } = useStockLocation(location_id!, { fields: detailsFields }, { initialData })
-    location_id!,
-    {
-      fields: detailsFields,
-    },
-    {
-      initialData,
-    }
-  )
 
   // TODO: Move to loading.tsx and set as Suspense fallback for the route
   if (isLoading || !location) {
@@ -73,7 +66,10 @@ export const LocationDetail = () => {
               </div>
             )
           })}
+
           <LocationsSalesChannelsSection location={location} />
+          <LocationsFulfillmentProvidersSection location={location} />
+
           {sideAfter.widgets.map((w, i) => {
             return (
               <div key={i}>

packages/admin-next/dashboard/src/routes/locations/location-fulfillment-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx

@@ -0,0 +1,198 @@
+import { HttpTypes } from "@medusajs/types"
+import { Button, Checkbox, toast } from "@medusajs/ui"
+import { keepPreviousData } from "@tanstack/react-query"
+import { RowSelectionState, createColumnHelper } from "@tanstack/react-table"
+import { useEffect, useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import {
+  RouteFocusModal,
+  useRouteModal,
+} from "../../../../../components/modals"
+import { DataTable } from "../../../../../components/table/data-table"
+import { useFulfillmentProviders } from "../../../../../hooks/api/fulfillment-providers"
+import { useUpdateStockLocationFulfillmentProviders } from "../../../../../hooks/api/stock-locations"
+import { useFulfillmentProviderTableColumns } from "../../../../../hooks/table/columns/use-fulfillment-provider-table-columns"
+import { useDateTableFilters } from "../../../../../hooks/table/filters"
+import { useFulfillmentProvidersTableQuery } from "../../../../../hooks/table/query/use-fulfillment-providers-table-query"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+
+type LocationEditFulfillmentProvidersFormProps = {
+  location: HttpTypes.AdminStockLocation
+}
+
+const EditFulfillmentProvidersFormSchema = zod.object({
+  fulfillment_providers: zod.array(zod.string()).optional(),
+})
+
+const PAGE_SIZE = 50
+
+export const LocationEditFulfillmentProvidersForm = ({
+  location,
+}: LocationEditFulfillmentProvidersFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<zod.infer<typeof EditFulfillmentProvidersFormSchema>>({
+    defaultValues: {
+      fulfillment_providers:
+        location.fulfillment_providers?.map((fp) => fp.id) ?? [],
+    },
+    resolver: zodResolver(EditFulfillmentProvidersFormSchema),
+  })
+
+  const { setValue } = form
+
+  const initialState =
+    location.fulfillment_providers?.reduce((acc, curr) => {
+      acc[curr.id] = true
+      return acc
+    }, {} as RowSelectionState) ?? {}
+
+  const [rowSelection, setRowSelection] =
+    useState<RowSelectionState>(initialState)
+
+  useEffect(() => {
+    const ids = Object.keys(rowSelection)
+    setValue("fulfillment_providers", ids, {
+      shouldDirty: true,
+      shouldTouch: true,
+    })
+  }, [rowSelection, setValue])
+
+  const { searchParams, raw } = useFulfillmentProvidersTableQuery({
+    pageSize: PAGE_SIZE,
+  })
+
+  const { fulfillment_providers, count, isLoading, isError, error } =
+    useFulfillmentProviders(
+      { ...searchParams },
+      { placeholderData: keepPreviousData }
+    )
+
+  const filters = useDateTableFilters()
+  const columns = useColumns()
+
+  const { table } = useDataTable({
+    data: fulfillment_providers ?? [],
+    columns,
+    count,
+    enablePagination: true,
+    enableRowSelection: true,
+    rowSelection: {
+      state: rowSelection,
+      updater: setRowSelection,
+    },
+    getRowId: (row) => row.id,
+    pageSize: PAGE_SIZE,
+  })
+
+  const { mutateAsync, isPending: isMutating } =
+    useUpdateStockLocationFulfillmentProviders(location.id)
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const originalIds = location.fulfillment_providers?.map((sc) => sc.id)
+
+    const arr = data.fulfillment_providers ?? []
+
+    await mutateAsync(
+      {
+        add: arr.filter((i) => !originalIds?.includes(i)),
+        remove: originalIds?.filter((i) => !arr.includes(i)),
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("stockLocations.fulfillmentProviders.successToast"))
+          handleSuccess(`/settings/locations/${location.id}`)
+        },
+        onError: (e) => {
+          toast.error(e.message)
+        },
+      }
+    )
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteFocusModal.Form form={form}>
+      <div className="flex h-full flex-col overflow-hidden">
+        <RouteFocusModal.Body>
+          <DataTable
+            table={table}
+            columns={columns}
+            pageSize={PAGE_SIZE}
+            isLoading={isLoading}
+            count={count}
+            filters={filters}
+            search
+            pagination
+            orderBy={["id", "created_at", "updated_at"]}
+            queryObject={raw}
+            layout="fill"
+          />
+        </RouteFocusModal.Body>
+
+        <RouteFocusModal.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteFocusModal.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("actions.cancel")}
+              </Button>
+            </RouteFocusModal.Close>
+
+            <Button size="small" isLoading={isMutating} onClick={handleSubmit}>
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteFocusModal.Footer>
+      </div>
+    </RouteFocusModal.Form>
+  )
+}
+
+const columnHelper = createColumnHelper<HttpTypes.AdminFulfillmentProvider>()
+
+const useColumns = () => {
+  const columns = useFulfillmentProviderTableColumns()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => {
+          return (
+            <Checkbox
+              checked={
+                table.getIsSomePageRowsSelected()
+                  ? "indeterminate"
+                  : table.getIsAllPageRowsSelected()
+              }
+              onCheckedChange={(value) =>
+                table.toggleAllPageRowsSelected(!!value)
+              }
+            />
+          )
+        },
+        cell: ({ row }) => {
+          return (
+            <Checkbox
+              checked={row.getIsSelected()}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            />
+          )
+        },
+      }),
+      ...columns,
+    ],
+    [columns]
+  )
+}

packages/admin-next/dashboard/src/routes/locations/location-fulfillment-providers/components/edit-fulfillment-providers-form/index.ts

@@ -0,0 +1 @@
+export * from "./edit-fulfillment-providers-form"

packages/admin-next/dashboard/src/routes/locations/location-fulfillment-providers/index.ts

@@ -0,0 +1 @@
+export { LocationFulfillmentProviders as Component } from "./location-fulfillment-providers"

packages/admin-next/dashboard/src/routes/locations/location-fulfillment-providers/location-fulfillment-providers.tsx

@@ -0,0 +1,27 @@
+import { useParams } from "react-router-dom"
+
+import { RouteFocusModal } from "../../../components/modals"
+import { useStockLocation } from "../../../hooks/api/stock-locations"
+import { LocationEditFulfillmentProvidersForm } from "./components/edit-fulfillment-providers-form"
+
+export const LocationFulfillmentProviders = () => {
+  const { location_id } = useParams()
+  const { stock_location, isPending, isError, error } = useStockLocation(
+    location_id!,
+    { fields: "id,*fulfillment_providers" }
+  )
+
+  const ready = !isPending && !!stock_location
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteFocusModal>
+      {ready && (
+        <LocationEditFulfillmentProvidersForm location={stock_location} />
+      )}
+    </RouteFocusModal>
+  )
+}

packages/admin-next/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-option-details-form.tsx

@@ -17,12 +17,14 @@ type CreateShippingOptionDetailsFormProps = {
   form: UseFormReturn<CreateShippingOptionSchema>
   isReturn?: boolean
   zone: HttpTypes.AdminServiceZone
+  locationId: string
 }
 
 export const CreateShippingOptionDetailsForm = ({
   form,
   isReturn = false,
   zone,
+  locationId,
 }: CreateShippingOptionDetailsFormProps) => {
   const { t } = useTranslation()
 
@@ -37,7 +39,11 @@ export const CreateShippingOptionDetailsForm = ({
   })
 
   const fulfillmentProviders = useComboboxData({
-    queryFn: (params) => sdk.admin.fulfillmentProvider.list(params),
+    queryFn: (params) =>
+      sdk.admin.fulfillmentProvider.list({
+        ...params,
+        stock_location_id: locationId,
+      }),
     queryKey: ["fulfillment_providers"],
     getOptions: (data) =>
       data.fulfillment_providers.map((provider) => ({
@@ -161,7 +167,11 @@ export const CreateShippingOptionDetailsForm = ({
             render={({ field }) => {
               return (
                 <Form.Item>
-                  <Form.Label>
+                  <Form.Label
+                    tooltip={t(
+                      "stockLocations.fulfillmentProviders.shippingOptionsTooltip"
+                    )}
+                  >
                     {t("stockLocations.shippingOptions.fields.provider")}
                   </Form.Label>
                   <Form.Control>

packages/admin-next/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-options-form.tsx

@@ -257,6 +257,7 @@ export function CreateShippingOptionsForm({
                 form={form}
                 zone={zone}
                 isReturn={isReturn}
+                locationId={locationId}
               />
             </ProgressTabs.Content>
             <ProgressTabs.Content value={Tab.PRICING} className="size-full">

packages/admin-next/dashboard/src/routes/locations/location-service-zone-shipping-option-edit/components/edit-region-form/edit-shipping-option-form.tsx

@@ -49,7 +49,11 @@ export const EditShippingOptionForm = ({
   })
 
   const fulfillmentProviders = useComboboxData({
-    queryFn: (params) => sdk.admin.fulfillmentProvider.list(params),
+    queryFn: (params) =>
+      sdk.admin.fulfillmentProvider.list({
+        ...params,
+        stock_location_id: locationId,
+      }),
     queryKey: ["fulfillment_providers"],
     getOptions: (data) =>
       data.fulfillment_providers.map((provider) => ({
@@ -210,7 +214,11 @@ export const EditShippingOptionForm = ({
                   render={({ field }) => {
                     return (
                       <Form.Item>
-                        <Form.Label>
+                        <Form.Label
+                          tooltip={t(
+                            "stockLocations.fulfillmentProviders.shippingOptionsTooltip"
+                          )}
+                        >
                           {t("stockLocations.shippingOptions.fields.provider")}
                         </Form.Label>
                         <Form.Control>

packages/core/js-sdk/src/admin/stock-location.ts

@@ -105,4 +105,19 @@ export class StockLocation {
       }
     )
   }
+
+  async updateFulfillmentProviders(
+    id: string,
+    body: HttpTypes.AdminBatchLink,
+    headers?: ClientHeaders
+  ) {
+    return await this.client.fetch<HttpTypes.AdminStockLocationResponse>(
+      `/admin/stock-locations/${id}/fulfillment-providers`,
+      {
+        method: "POST",
+        headers,
+        body,
+      }
+    )
+  }
 }

packages/core/types/src/http/common/request.ts

@@ -7,3 +7,8 @@ export interface FindParams extends SelectParams {
   offset?: number
   order?: string
 }
+
+export interface AdminBatchLink {
+  add?: string[]
+  remove?: string[]
+}

packages/core/types/src/http/fulfillment-provider/admin/queries.ts

@@ -4,4 +4,5 @@ export interface AdminFulfillmentProviderListParams extends FindParams {
   id?: string | string[]
   q?: string
   is_enabled?: boolean
+  stock_location_id?: string | string[]
 }

packages/core/types/src/http/stock-locations/admin/entities.ts

@@ -1,3 +1,4 @@
+import { AdminFulfillmentProvider } from "../../fulfillment-provider"
 import { AdminFulfillmentSet } from "../../fulfillment-set"
 import { AdminSalesChannel } from "../../sales-channel"
 
@@ -19,5 +20,6 @@ export interface AdminStockLocation {
   address_id: string
   address?: AdminStockLocationAddress
   sales_channels?: AdminSalesChannel[]
+  fulfillment_providers?: AdminFulfillmentProvider[]
   fulfillment_sets?: AdminFulfillmentSet[]
 }

packages/design-system/icons/src/components/hand-truck.tsx

@@ -0,0 +1,69 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+
+const HandTruck = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <g
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          clipPath="url(#a)"
+        >
+          <path
+            d="M10.6918 3.42715L6.96541 4.49011C6.50807 4.62056 6.24309 5.09706 6.37354 5.5544L7.31839 8.86672C7.44885 9.32405 7.92535 9.58904 8.38269 9.45858L12.109 8.39563C12.5664 8.26517 12.8314 7.78867 12.7009 7.33133L11.7561 4.01901C11.6256 3.56168 11.1491 3.29669 10.6918 3.42715Z"
+            stroke="#52525B"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M8.82837 3.95886L9.30112 5.61478"
+            stroke="#52525B"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M7.37573 12.2083L14.6736 10.127"
+            stroke="#52525B"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M5.43299 10.8572L3.26988 3.24407C3.16482 2.87379 2.8264 2.61804 2.44149 2.61804H1.54163"
+            stroke="#52525B"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M5.84728 13.8125C6.67954 13.8125 7.35422 13.1378 7.35422 12.3055C7.35422 11.4733 6.67954 10.7986 5.84728 10.7986C5.01501 10.7986 4.34033 11.4733 4.34033 12.3055C4.34033 13.1378 5.01501 13.8125 5.84728 13.8125Z"
+            stroke="#52525B"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+HandTruck.displayName = "HandTruck"
+export default HandTruck

packages/design-system/icons/src/components/index.ts

@@ -1,26 +1,26 @@
 // This file is generated automatically.
-export { default as AcademicCapSolid } from "./academic-cap-solid"
 export { default as AcademicCap } from "./academic-cap"
-export { default as AdjustmentsDone } from "./adjustments-done"
+export { default as AcademicCapSolid } from "./academic-cap-solid"
 export { default as Adjustments } from "./adjustments"
+export { default as AdjustmentsDone } from "./adjustments-done"
 export { default as AiAssistent } from "./ai-assistent"
 export { default as Apple } from "./apple"
 export { default as ArchiveBox } from "./archive-box"
+export { default as ArrowDown } from "./arrow-down"
 export { default as ArrowDownCircle } from "./arrow-down-circle"
-export { default as ArrowDownLeftMini } from "./arrow-down-left-mini"
 export { default as ArrowDownLeft } from "./arrow-down-left"
+export { default as ArrowDownLeftMini } from "./arrow-down-left-mini"
 export { default as ArrowDownMini } from "./arrow-down-mini"
 export { default as ArrowDownRightMini } from "./arrow-down-right-mini"
 export { default as ArrowDownTray } from "./arrow-down-tray"
-export { default as ArrowDown } from "./arrow-down"
-export { default as ArrowLeftMini } from "./arrow-left-mini"
 export { default as ArrowLeft } from "./arrow-left"
+export { default as ArrowLeftMini } from "./arrow-left-mini"
 export { default as ArrowLongDown } from "./arrow-long-down"
 export { default as ArrowLongLeft } from "./arrow-long-left"
 export { default as ArrowLongRight } from "./arrow-long-right"
 export { default as ArrowLongUp } from "./arrow-long-up"
-export { default as ArrowPathMini } from "./arrow-path-mini"
 export { default as ArrowPath } from "./arrow-path"
+export { default as ArrowPathMini } from "./arrow-path-mini"
 export { default as ArrowRightMini } from "./arrow-right-mini"
 export { default as ArrowRightOnRectangle } from "./arrow-right-on-rectangle"
 export { default as ArrowUpCircleSolid } from "./arrow-up-circle-solid"
@@ -31,58 +31,58 @@ export { default as ArrowUpRightMini } from "./arrow-up-right-mini"
 export { default as ArrowUpRightOnBox } from "./arrow-up-right-on-box"
 export { default as ArrowUpTray } from "./arrow-up-tray"
 export { default as ArrowUturnLeft } from "./arrow-uturn-left"
-export { default as ArrowsPointingOutMini } from "./arrows-pointing-out-mini"
 export { default as ArrowsPointingOut } from "./arrows-pointing-out"
+export { default as ArrowsPointingOutMini } from "./arrows-pointing-out-mini"
 export { default as ArrrowRight } from "./arrrow-right"
 export { default as AtSymbol } from "./at-symbol"
 export { default as BackwardSolid } from "./backward-solid"
 export { default as BarsArrowDown } from "./bars-arrow-down"
 export { default as BarsThree } from "./bars-three"
 export { default as Beaker } from "./beaker"
-export { default as BellAlertSolid } from "./bell-alert-solid"
 export { default as BellAlert } from "./bell-alert"
 export { default as BellAlertDone } from "./bell-alert-done"
-export { default as BoltSolid } from "./bolt-solid"
+export { default as BellAlertSolid } from "./bell-alert-solid"
 export { default as Bolt } from "./bolt"
-export { default as BookOpen } from "./book-open"
+export { default as BoltSolid } from "./bolt-solid"
 export { default as Book } from "./book"
+export { default as BookOpen } from "./book-open"
 export { default as Bookmarks } from "./bookmarks"
 export { default as BottomToTop } from "./bottom-to-top"
-export { default as BugAntSolid } from "./bug-ant-solid"
 export { default as Bug } from "./bug"
+export { default as BugAntSolid } from "./bug-ant-solid"
 export { default as BuildingStorefront } from "./building-storefront"
 export { default as BuildingTax } from "./building-tax"
+export { default as Buildings } from "./buildings"
 export { default as BuildingsMini } from "./buildings-mini"
 export { default as BuildingsSolid } from "./buildings-solid"
-export { default as Buildings } from "./buildings"
+export { default as Calendar } from "./calendar"
 export { default as CalendarMini } from "./calendar-mini"
 export { default as CalendarSolid } from "./calendar-solid"
-export { default as Calendar } from "./calendar"
 export { default as Camera } from "./camera"
-export { default as CashSolid } from "./cash-solid"
 export { default as Cash } from "./cash"
-export { default as ChannelsSolid } from "./channels-solid"
+export { default as CashSolid } from "./cash-solid"
 export { default as Channels } from "./channels"
+export { default as ChannelsSolid } from "./channels-solid"
 export { default as ChartBar } from "./chart-bar"
 export { default as ChartPie } from "./chart-pie"
-export { default as ChatBubbleLeftRightSolid } from "./chat-bubble-left-right-solid"
-export { default as ChatBubbleLeftRight } from "./chat-bubble-left-right"
 export { default as ChatBubble } from "./chat-bubble"
+export { default as ChatBubbleLeftRight } from "./chat-bubble-left-right"
+export { default as ChatBubbleLeftRightSolid } from "./chat-bubble-left-right-solid"
+export { default as Check } from "./check"
+export { default as CheckCircle } from "./check-circle"
 export { default as CheckCircleMiniSolid } from "./check-circle-mini-solid"
 export { default as CheckCircleSolid } from "./check-circle-solid"
-export { default as CheckCircle } from "./check-circle"
 export { default as CheckMini } from "./check-mini"
-export { default as Check } from "./check"
-export { default as ChevronDoubleLeftMiniSolid } from "./chevron-double-left-mini-solid"
 export { default as ChevronDoubleLeft } from "./chevron-double-left"
-export { default as ChevronDoubleRightMiniSolid } from "./chevron-double-right-mini-solid"
+export { default as ChevronDoubleLeftMiniSolid } from "./chevron-double-left-mini-solid"
 export { default as ChevronDoubleRight } from "./chevron-double-right"
-export { default as ChevronDownMini } from "./chevron-down-mini"
+export { default as ChevronDoubleRightMiniSolid } from "./chevron-double-right-mini-solid"
 export { default as ChevronDown } from "./chevron-down"
-export { default as ChevronLeftMini } from "./chevron-left-mini"
+export { default as ChevronDownMini } from "./chevron-down-mini"
 export { default as ChevronLeft } from "./chevron-left"
-export { default as ChevronRightMini } from "./chevron-right-mini"
+export { default as ChevronLeftMini } from "./chevron-left-mini"
 export { default as ChevronRight } from "./chevron-right"
+export { default as ChevronRightMini } from "./chevron-right-mini"
 export { default as ChevronUpDown } from "./chevron-up-down"
 export { default as ChevronUpMini } from "./chevron-up-mini"
 export { default as CircleArrowUp } from "./circle-arrow-up"
@@ -93,34 +93,34 @@ export { default as CircleMiniFilledSolid } from "./circle-mini-filled-solid"
 export { default as CircleMiniSolid } from "./circle-mini-solid"
 export { default as CircleQuarterSolid } from "./circle-quarter-solid"
 export { default as CircleSolid } from "./circle-solid"
-export { default as CircleStackSolid } from "./circle-stack-solid"
 export { default as CircleStack } from "./circle-stack"
+export { default as CircleStackSolid } from "./circle-stack-solid"
 export { default as CircleThreeQuartersSolid } from "./circle-three-quarters-solid"
-export { default as ClockChangedSolidMini } from "./clock-changed-solid-mini"
-export { default as ClockSolidMini } from "./clock-solid-mini"
-export { default as ClockSolid } from "./clock-solid"
 export { default as Clock } from "./clock"
+export { default as ClockChangedSolidMini } from "./clock-changed-solid-mini"
+export { default as ClockSolid } from "./clock-solid"
+export { default as ClockSolidMini } from "./clock-solid-mini"
 export { default as CloudArrowDown } from "./cloud-arrow-down"
 export { default as CloudArrowUp } from "./cloud-arrow-up"
-export { default as CogSixToothSolid } from "./cog-six-tooth-solid"
 export { default as CogSixTooth } from "./cog-six-tooth"
-export { default as CommandLineSolid } from "./command-line-solid"
+export { default as CogSixToothSolid } from "./cog-six-tooth-solid"
 export { default as CommandLine } from "./command-line"
-export { default as ComponentSolid } from "./component-solid"
+export { default as CommandLineSolid } from "./command-line-solid"
 export { default as Component } from "./component"
-export { default as ComputerDesktopSolid } from "./computer-desktop-solid"
+export { default as ComponentSolid } from "./component-solid"
 export { default as ComputerDesktop } from "./computer-desktop"
-export { default as CreditCardSolid } from "./credit-card-solid"
+export { default as ComputerDesktopSolid } from "./computer-desktop-solid"
 export { default as CreditCard } from "./credit-card"
+export { default as CreditCardSolid } from "./credit-card-solid"
 export { default as CubeSolid } from "./cube-solid"
-export { default as CurrencyDollarSolid } from "./currency-dollar-solid"
 export { default as CurrencyDollar } from "./currency-dollar"
+export { default as CurrencyDollarSolid } from "./currency-dollar-solid"
 export { default as CursorArrowRays } from "./cursor-arrow-rays"
 export { default as DescendingSorting } from "./descending-sorting"
 export { default as Discord } from "./discord"
 export { default as DocumentSeries } from "./document-series"
-export { default as DocumentTextSolid } from "./document-text-solid"
 export { default as DocumentText } from "./document-text"
+export { default as DocumentTextSolid } from "./document-text-solid"
 export { default as DotsSix } from "./dots-six"
 export { default as EllipseBlueSolid } from "./ellipse-blue-solid"
 export { default as EllipseGreenSolid } from "./ellipse-green-solid"
@@ -132,121 +132,122 @@ export { default as EllipseRedSolid } from "./ellipse-red-solid"
 export { default as EllipseSolid } from "./ellipse-solid"
 export { default as EllipsisHorizontal } from "./ellipsis-horizontal"
 export { default as EllipsisVertical } from "./ellipsis-vertical"
-export { default as EnvelopeSolid } from "./envelope-solid"
 export { default as Envelope } from "./envelope"
-export { default as ExclamationCircleSolid } from "./exclamation-circle-solid"
+export { default as EnvelopeSolid } from "./envelope-solid"
 export { default as ExclamationCircle } from "./exclamation-circle"
-export { default as EyeMini } from "./eye-mini"
+export { default as ExclamationCircleSolid } from "./exclamation-circle-solid"
-export { default as EyeSlashMini } from "./eye-slash-mini"
-export { default as EyeSlash } from "./eye-slash"
 export { default as Eye } from "./eye"
+export { default as EyeMini } from "./eye-mini"
+export { default as EyeSlash } from "./eye-slash"
+export { default as EyeSlashMini } from "./eye-slash-mini"
 export { default as FaceSmile } from "./face-smile"
 export { default as Facebook } from "./facebook"
 export { default as Figma } from "./figma"
 export { default as FlagMini } from "./flag-mini"
 export { default as FlyingBox } from "./flying-box"
-export { default as FolderIllustration } from "./folder-illustration"
-export { default as FolderOpenIllustration } from "./folder-open-illustration"
-export { default as FolderOpen } from "./folder-open"
 export { default as Folder } from "./folder"
+export { default as FolderIllustration } from "./folder-illustration"
+export { default as FolderOpen } from "./folder-open"
+export { default as FolderOpenIllustration } from "./folder-open-illustration"
 export { default as ForwardSolid } from "./forward-solid"
 export { default as Funnel } from "./funnel"
-export { default as GatsbyEx } from "./gatsby-ex"
 export { default as Gatsby } from "./gatsby"
-export { default as GiftSolid } from "./gift-solid"
+export { default as GatsbyEx } from "./gatsby-ex"
 export { default as Gift } from "./gift"
+export { default as GiftSolid } from "./gift-solid"
 export { default as Github } from "./github"
 export { default as Glasses } from "./glasses"
-export { default as GlobeEuropeSolid } from "./globe-europe-solid"
 export { default as GlobeEurope } from "./globe-europe"
+export { default as GlobeEuropeSolid } from "./globe-europe-solid"
 export { default as Google } from "./google"
 export { default as GridList } from "./grid-list"
+export { default as HandTruck } from "./hand-truck"
 export { default as Hashtag } from "./hashtag"
 export { default as Heart } from "./heart"
 export { default as History } from "./history"
 export { default as InboxSolid } from "./inbox-solid"
-export { default as InformationCircleSolid } from "./information-circle-solid"
 export { default as InformationCircle } from "./information-circle"
-export { default as JavascriptEx } from "./javascript-ex"
+export { default as InformationCircleSolid } from "./information-circle-solid"
 export { default as Javascript } from "./javascript"
-export { default as KeySolid } from "./key-solid"
+export { default as JavascriptEx } from "./javascript-ex"
 export { default as Key } from "./key"
+export { default as KeySolid } from "./key-solid"
 export { default as Keyboard } from "./keyboard"
-export { default as KlarnaEx } from "./klarna-ex"
 export { default as Klarna } from "./klarna"
+export { default as KlarnaEx } from "./klarna-ex"
 export { default as Klaviyo } from "./klaviyo"
 export { default as Lifebuoy } from "./lifebuoy"
-export { default as LightBulbSolid } from "./light-bulb-solid"
 export { default as LightBulb } from "./light-bulb"
+export { default as LightBulbSolid } from "./light-bulb-solid"
 export { default as Link } from "./link"
 export { default as Linkedin } from "./linkedin"
 export { default as ListBullet } from "./list-bullet"
 export { default as ListCheckbox } from "./list-checkbox"
 export { default as ListTree } from "./list-tree"
 export { default as Loader } from "./loader"
-export { default as LockClosedSolidMini } from "./lock-closed-solid-mini"
 export { default as LockClosedSolid } from "./lock-closed-solid"
+export { default as LockClosedSolidMini } from "./lock-closed-solid-mini"
 export { default as LockOpenSolid } from "./lock-open-solid"
 export { default as MagnifierAlert } from "./magnifier-alert"
-export { default as MagnifyingGlassMini } from "./magnifying-glass-mini"
 export { default as MagnifyingGlass } from "./magnifying-glass"
-export { default as MapPin } from "./map-pin"
+export { default as MagnifyingGlassMini } from "./magnifying-glass-mini"
 export { default as Map } from "./map"
+export { default as MapPin } from "./map-pin"
 export { default as Mastercard } from "./mastercard"
 export { default as Medusa } from "./medusa"
 export { default as Meta } from "./meta"
-export { default as MinusMini } from "./minus-mini"
 export { default as Minus } from "./minus"
-export { default as MoonSolid } from "./moon-solid"
+export { default as MinusMini } from "./minus-mini"
 export { default as Moon } from "./moon"
+export { default as MoonSolid } from "./moon-solid"
 export { default as Newspaper } from "./newspaper"
 export { default as NextJs } from "./next-js"
 export { default as OpenRectArrowOut } from "./open-rect-arrow-out"
 export { default as PaperClip } from "./paper-clip"
 export { default as PauseSolid } from "./pause-solid"
 export { default as PenPlus } from "./pen-plus"
-export { default as PencilSquareSolid } from "./pencil-square-solid"
-export { default as PencilSquare } from "./pencil-square"
 export { default as Pencil } from "./pencil"
+export { default as PencilSquare } from "./pencil-square"
+export { default as PencilSquareSolid } from "./pencil-square-solid"
 export { default as Phone } from "./phone"
-export { default as PhotoSolid } from "./photo-solid"
 export { default as Photo } from "./photo"
+export { default as PhotoSolid } from "./photo-solid"
 export { default as PlayMiniSolid } from "./play-mini-solid"
 export { default as PlaySolid } from "./play-solid"
-export { default as PlusMini } from "./plus-mini"
 export { default as Plus } from "./plus"
-export { default as PuzzleSolid } from "./puzzle-solid"
+export { default as PlusMini } from "./plus-mini"
 export { default as Puzzle } from "./puzzle"
-export { default as QuestionMarkCircle } from "./question-mark-circle"
+export { default as PuzzleSolid } from "./puzzle-solid"
 export { default as QuestionMark } from "./question-mark"
+export { default as QuestionMarkCircle } from "./question-mark-circle"
 export { default as QueueList } from "./queue-list"
-export { default as ReactJsEx } from "./react-js-ex"
 export { default as ReactJs } from "./react-js"
-export { default as ReceiptPercent } from "./receipt-percent"
+export { default as ReactJsEx } from "./react-js-ex"
 export { default as Receipt } from "./receipt"
+export { default as ReceiptPercent } from "./receipt-percent"
 export { default as ReplaySolid } from "./replay-solid"
 export { default as Resize } from "./resize"
-export { default as RocketLaunchSolid } from "./rocket-launch-solid"
 export { default as RocketLaunch } from "./rocket-launch"
+export { default as RocketLaunchSolid } from "./rocket-launch-solid"
 export { default as Rss } from "./rss"
 export { default as Sanity } from "./sanity"
-export { default as ServerSolid } from "./server-solid"
-export { default as ServerStackSolid } from "./server-stack-solid"
-export { default as ServerStack } from "./server-stack"
 export { default as Server } from "./server"
+export { default as ServerSolid } from "./server-solid"
+export { default as ServerStack } from "./server-stack"
+export { default as ServerStackSolid } from "./server-stack-solid"
 export { default as Share } from "./share"
-export { default as ShoppingBag } from "./shopping-bag"
-export { default as ShoppingCartSolid } from "./shopping-cart-solid"
-export { default as ShoppingCart } from "./shopping-cart"
 export { default as Shopping } from "./shopping"
+export { default as ShoppingBag } from "./shopping-bag"
+export { default as ShoppingCart } from "./shopping-cart"
+export { default as ShoppingCartSolid } from "./shopping-cart-solid"
 export { default as SidebarLeft } from "./sidebar-left"
 export { default as SidebarRight } from "./sidebar-right"
 export { default as Slack } from "./slack"
 export { default as Snooze } from "./snooze"
-export { default as SparklesMiniSolid } from "./sparkles-mini-solid"
-export { default as SparklesMini } from "./sparkles-mini"
-export { default as SparklesSolid } from "./sparkles-solid"
 export { default as Sparkles } from "./sparkles"
+export { default as SparklesMini } from "./sparkles-mini"
+export { default as SparklesMiniSolid } from "./sparkles-mini-solid"
+export { default as SparklesSolid } from "./sparkles-solid"
 export { default as Spinner } from "./spinner"
 export { default as SquareBlueSolid } from "./square-blue-solid"
 export { default as SquareGreenSolid } from "./square-green-solid"
@@ -254,54 +255,54 @@ export { default as SquareGreySolid } from "./square-grey-solid"
 export { default as SquareOrangeSolid } from "./square-orange-solid"
 export { default as SquarePurpleSolid } from "./square-purple-solid"
 export { default as SquareRedSolid } from "./square-red-solid"
+export { default as SquareTwoStack } from "./square-two-stack"
 export { default as SquareTwoStackMini } from "./square-two-stack-mini"
 export { default as SquareTwoStackSolid } from "./square-two-stack-solid"
-export { default as SquareTwoStack } from "./square-two-stack"
-export { default as SquaresPlusSolid } from "./squares-plus-solid"
 export { default as SquaresPlus } from "./squares-plus"
+export { default as SquaresPlusSolid } from "./squares-plus-solid"
 export { default as StackPerspective } from "./stack-perspective"
-export { default as StarSolid } from "./star-solid"
 export { default as Star } from "./star"
+export { default as StarSolid } from "./star-solid"
 export { default as Stopwatch } from "./stopwatch"
 export { default as Stripe } from "./stripe"
-export { default as SunSolid } from "./sun-solid"
 export { default as Sun } from "./sun"
-export { default as SwatchSolid } from "./swatch-solid"
+export { default as SunSolid } from "./sun-solid"
 export { default as Swatch } from "./swatch"
-export { default as TagSolid } from "./tag-solid"
+export { default as SwatchSolid } from "./swatch-solid"
 export { default as Tag } from "./tag"
+export { default as TagSolid } from "./tag-solid"
 export { default as Tailwind } from "./tailwind"
 export { default as Text } from "./text"
 export { default as ThumbDown } from "./thumb-down"
 export { default as ThumbUp } from "./thumb-up"
 export { default as ThumbnailBadge } from "./thumbnail-badge"
 export { default as TimelineVertical } from "./timeline-vertical"
-export { default as ToolsSolid } from "./tools-solid"
 export { default as Tools } from "./tools"
+export { default as ToolsSolid } from "./tools-solid"
 export { default as TopToBottom } from "./top-to-bottom"
 export { default as Trash } from "./trash"
 export { default as TriangleDownMini } from "./triangle-down-mini"
 export { default as TriangleLeftMini } from "./triangle-left-mini"
-export { default as TriangleRightMiniHover } from "./triangle-right-mini-hover"
 export { default as TriangleRightMini } from "./triangle-right-mini"
+export { default as TriangleRightMiniHover } from "./triangle-right-mini-hover"
 export { default as TriangleUpMini } from "./triangle-up-mini"
 export { default as TrianglesMini } from "./triangles-mini"
 export { default as Trophy } from "./trophy"
 export { default as TruckFast } from "./truck-fast"
-export { default as TypescriptEx } from "./typescript-ex"
 export { default as Typescript } from "./typescript"
+export { default as TypescriptEx } from "./typescript-ex"
+export { default as User } from "./user"
 export { default as UserGroup } from "./user-group"
 export { default as UserMini } from "./user-mini"
-export { default as User } from "./user"
-export { default as UsersSolid } from "./users-solid"
 export { default as Users } from "./users"
+export { default as UsersSolid } from "./users-solid"
 export { default as Vercel } from "./vercel"
 export { default as VerifiedBadge } from "./verified-badge"
 export { default as Visa } from "./visa"
 export { default as WandSparkle } from "./wand-sparkle"
 export { default as Window } from "./window"
-export { default as XCircleSolid } from "./x-circle-solid"
-export { default as XCircle } from "./x-circle"
-export { default as XMarkMini } from "./x-mark-mini"
-export { default as XMark } from "./x-mark"
 export { default as X } from "./x"
+export { default as XCircle } from "./x-circle"
+export { default as XCircleSolid } from "./x-circle-solid"
+export { default as XMark } from "./x-mark"
+export { default as XMarkMini } from "./x-mark-mini"