@luxonis/common-fe-components 1.12.0 → 1.13.0

package/dist/components/custom/DropdownMenu.d.ts

@@ -13,10 +13,10 @@ export type DropdownMenuItemProps = React.ComponentPropsWithoutRef<typeof _Dropd
 export declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
 export type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof _DropdownMenuContent>;
 export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<{
+    ref?: React.Ref<HTMLDivElement> | undefined;
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
-    ref?: React.Ref<HTMLDivElement> | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -275,11 +275,21 @@ export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<{
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-    align?: ("center" | "end" | "start") | undefined;
+    asChild?: boolean | undefined;
     key?: React.Key | null | undefined;
-    loop?: boolean | undefined;
     sticky?: ("partial" | "always") | undefined;
-    asChild?: boolean | undefined;
+    align?: ("center" | "end" | "start") | undefined;
+    loop?: boolean | undefined;
+    side?: ("bottom" | "left" | "right" | "top") | undefined;
+    sideOffset?: number | undefined;
+    alignOffset?: number | undefined;
+    arrowPadding?: number | undefined;
+    avoidCollisions?: boolean | undefined;
+    collisionBoundary?: ((Element | null) | (Element | null)[]) | undefined;
+    collisionPadding?: (number | Partial<Record<"bottom" | "left" | "right" | "top", number>>) | undefined;
+    hideWhenDetached?: boolean | undefined;
+    updatePositionStrategy?: ("optimized" | "always") | undefined;
+    onCloseAutoFocus?: ((event: Event) => void) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
     onPointerDownOutside?: ((event: CustomEvent<{
         originalEvent: PointerEvent;
@@ -292,17 +302,7 @@ export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<{
     }> | CustomEvent<{
         originalEvent: FocusEvent;
     }>) => void) | undefined;
-    onCloseAutoFocus?: ((event: Event) => void) | undefined;
     forceMount?: true | undefined;
-    side?: ("top" | "left" | "right" | "bottom") | undefined;
-    sideOffset?: number | undefined;
-    alignOffset?: number | undefined;
-    arrowPadding?: number | undefined;
-    avoidCollisions?: boolean | undefined;
-    collisionBoundary?: ((Element | null) | (Element | null)[]) | undefined;
-    collisionPadding?: (number | Partial<Record<"top" | "left" | "right" | "bottom", number>>) | undefined;
-    hideWhenDetached?: boolean | undefined;
-    updatePositionStrategy?: ("optimized" | "always") | undefined;
     htmlWidth?: (string | number) | undefined;
     htmlHeight?: (string | number) | undefined;
     htmlTranslate?: "yes" | "no" | undefined;

package/dist/components/custom/ExternalLink.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ButtonProps } from './Button.js';
 export type ExternalLinkProps = ButtonProps & {
     to: string;
+    target?: '_blank' | '_self';
     newTab?: boolean;
     raw?: boolean;
     notifyOnLeave?: boolean;

package/dist/components/custom/ExternalLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalLink.d.ts","sourceRoot":"","sources":["../../../src/components/custom/ExternalLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,YAAY,mIAmDxB,CAAC"}
+{"version":3,"file":"ExternalLink.d.ts","sourceRoot":"","sources":["../../../src/components/custom/ExternalLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,YAAY,mIAmDxB,CAAC"}

package/dist/components/custom/ExternalLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalLink.js","sourceRoot":"","sources":["../../../src/components/custom/ExternalLink.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAYrC,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,EAAE,EACF,QAAQ,EACR,GAAG,EACH,MAAM,GAAG,IAAI,EACb,SAAS,EACT,SAAS,EACT,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,iBAAiB,GAAG,kBAAkB,EACtC,GAAG,WAAW,EACf,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,GAAG,CAAC;QACrB,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;KAC7C,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,IACE,CAAC,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC;YAC7B,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC;YACnB,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC;YACnB,CAAC,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC;YACzB,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,EACtB,CAAC;YACD,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,IAAI,iBAAiB,EAAE,CAAC,CAAC;YACtE,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAC;YACvD,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC;QACxB,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,gBACM,SAAS,EACb,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,EACtC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EACnC,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,aAE3D,CAAC,GAAG,IAAI,CACP,KAAC,MAAM,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,KAAM,WAAW,YACzE,QAAQ,GACF,CACV,EACA,GAAG,IAAI,QAAQ,IACd,CACL,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"ExternalLink.js","sourceRoot":"","sources":["../../../src/components/custom/ExternalLink.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAarC,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,EAAE,EACF,QAAQ,EACR,GAAG,EACH,MAAM,GAAG,IAAI,EACb,SAAS,EACT,SAAS,EACT,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,iBAAiB,GAAG,kBAAkB,EACtC,GAAG,WAAW,EACf,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,GAAG,CAAC;QACrB,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;KAC7C,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,IACE,CAAC,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC;YAC7B,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC;YACnB,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC;YACnB,CAAC,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC;YACzB,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,EACtB,CAAC;YACD,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,IAAI,iBAAiB,EAAE,CAAC,CAAC;YACtE,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAC;YACvD,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC;QACxB,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,gBACM,SAAS,EACb,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,EACtC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EACnC,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,aAE3D,CAAC,GAAG,IAAI,CACP,KAAC,MAAM,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,KAAM,WAAW,YACzE,QAAQ,GACF,CACV,EACA,GAAG,IAAI,QAAQ,IACd,CACL,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/components/custom/Grid.d.ts

@@ -11,6 +11,6 @@ export type GridProps = _GridProps & {
     itemWidth?: Token;
     fixed?: boolean;
 };
-export declare const Grid: (props: GridProps) => number | true | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode>;
+export declare const Grid: (props: GridProps) => number | true | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;
 export declare const GridItem: (props: GridItemProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Grid.d.ts.map

package/dist/components/custom/RadioGroup.d.ts

@@ -8,9 +8,9 @@ export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
-    value?: import("@radix-ui/react-radio-group").RadioGroupContextValue["value"];
-    name?: import("@radix-ui/react-radio-group").RadioGroupContextValue["name"];
     ref?: React.Ref<HTMLDivElement> | undefined;
+    children?: React.ReactNode | undefined;
+    key?: React.Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -106,7 +106,6 @@ export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<
     "aria-valuemin"?: number | undefined;
     "aria-valuenow"?: number | undefined;
     "aria-valuetext"?: string | undefined;
-    children?: React.ReactNode | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
@@ -270,12 +269,13 @@ export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-    key?: React.Key | null | undefined;
+    asChild?: boolean | undefined;
+    disabled?: import("@radix-ui/react-primitive").ComponentPropsWithoutRef<typeof import("@radix-ui/react-radio-group").Radio>["disabled"];
+    name?: import("@radix-ui/react-radio-group").RadioGroupContextValue["name"];
+    value?: import("@radix-ui/react-radio-group").RadioGroupContextValue["value"];
     orientation?: import("@radix-ui/react-radio-group").RovingFocusGroupProps["orientation"];
     loop?: import("@radix-ui/react-radio-group").RovingFocusGroupProps["loop"];
-    disabled?: import("@radix-ui/react-primitive").ComponentPropsWithoutRef<typeof import("@radix-ui/react-radio-group").Radio>["disabled"];
     required?: import("@radix-ui/react-primitive").ComponentPropsWithoutRef<typeof import("@radix-ui/react-radio-group").Radio>["required"];
-    asChild?: boolean | undefined;
     onValueChange?: import("@radix-ui/react-radio-group").RadioGroupContextValue["onValueChange"] | undefined;
     htmlWidth?: (string | number) | undefined;
     htmlHeight?: (string | number) | undefined;
@@ -1093,9 +1093,9 @@ export declare const RadioGroupSimple: React.ForwardRefExoticComponent<Omit<Omit
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
-    value?: import("@radix-ui/react-radio-group").RadioGroupContextValue["value"];
-    name?: import("@radix-ui/react-radio-group").RadioGroupContextValue["name"];
     ref?: React.Ref<HTMLDivElement> | undefined;
+    children?: React.ReactNode | undefined;
+    key?: React.Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -1191,7 +1191,6 @@ export declare const RadioGroupSimple: React.ForwardRefExoticComponent<Omit<Omit
     "aria-valuemin"?: number | undefined;
     "aria-valuenow"?: number | undefined;
     "aria-valuetext"?: string | undefined;
-    children?: React.ReactNode | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
@@ -1355,12 +1354,13 @@ export declare const RadioGroupSimple: React.ForwardRefExoticComponent<Omit<Omit
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-    key?: React.Key | null | undefined;
+    asChild?: boolean | undefined;
+    disabled?: import("@radix-ui/react-primitive").ComponentPropsWithoutRef<typeof import("@radix-ui/react-radio-group").Radio>["disabled"];
+    name?: import("@radix-ui/react-radio-group").RadioGroupContextValue["name"];
+    value?: import("@radix-ui/react-radio-group").RadioGroupContextValue["value"];
     orientation?: import("@radix-ui/react-radio-group").RovingFocusGroupProps["orientation"];
     loop?: import("@radix-ui/react-radio-group").RovingFocusGroupProps["loop"];
-    disabled?: import("@radix-ui/react-primitive").ComponentPropsWithoutRef<typeof import("@radix-ui/react-radio-group").Radio>["disabled"];
     required?: import("@radix-ui/react-primitive").ComponentPropsWithoutRef<typeof import("@radix-ui/react-radio-group").Radio>["required"];
-    asChild?: boolean | undefined;
     onValueChange?: import("@radix-ui/react-radio-group").RadioGroupContextValue["onValueChange"] | undefined;
     htmlWidth?: (string | number) | undefined;
     htmlHeight?: (string | number) | undefined;

package/dist/components/custom/Slider.d.ts

@@ -9,11 +9,9 @@ export declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<{
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
     step?: number | undefined;
-    min?: number | undefined;
-    max?: number | undefined;
-    value?: number[] | undefined;
-    name?: string | undefined;
     ref?: React.Ref<HTMLSpanElement> | undefined;
+    children?: React.ReactNode | undefined;
+    key?: React.Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: number[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -109,7 +107,6 @@ export declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<{
     "aria-valuemin"?: number | undefined;
     "aria-valuenow"?: number | undefined;
     "aria-valuetext"?: string | undefined;
-    children?: React.ReactNode | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
@@ -273,10 +270,13 @@ export declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<{
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-    key?: React.Key | null | undefined;
-    orientation?: React.AriaAttributes["aria-orientation"];
-    disabled?: boolean | undefined;
     asChild?: boolean | undefined;
+    disabled?: boolean | undefined;
+    name?: string | undefined;
+    value?: number[] | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    orientation?: React.AriaAttributes["aria-orientation"];
     onValueChange?: ((value: number[]) => void) | undefined;
     inverted?: boolean | undefined;
     minStepsBetweenThumbs?: number | undefined;
@@ -1086,7 +1086,7 @@ export declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<{
     xlTo2xl?: import("../../styled-system/types/conditions.mjs").Nested<import("../../styled-system/types/system-types.mjs").SystemStyleObject> | undefined;
     base?: import("../../styled-system/types/conditions.mjs").Nested<import("../../styled-system/types/system-types.mjs").SystemStyleObject> | undefined;
     css?: import("../../styled-system/types/system-types.mjs").SystemStyleObject | undefined;
-}, "ref">, "value" | "onChange" | "onValueChange"> & {
+}, "ref">, "onChange" | "value" | "onValueChange"> & {
     value: number;
     onChange?: (value: number) => void;
 } & React.RefAttributes<HTMLSpanElement>>;
@@ -1102,11 +1102,9 @@ export declare const DoubleSlider: React.ForwardRefExoticComponent<Omit<Omit<{
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
     step?: number | undefined;
-    min?: number | undefined;
-    max?: number | undefined;
-    value?: number[] | undefined;
-    name?: string | undefined;
     ref?: React.Ref<HTMLSpanElement> | undefined;
+    children?: React.ReactNode | undefined;
+    key?: React.Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: number[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -1202,7 +1200,6 @@ export declare const DoubleSlider: React.ForwardRefExoticComponent<Omit<Omit<{
     "aria-valuemin"?: number | undefined;
     "aria-valuenow"?: number | undefined;
     "aria-valuetext"?: string | undefined;
-    children?: React.ReactNode | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
@@ -1366,10 +1363,13 @@ export declare const DoubleSlider: React.ForwardRefExoticComponent<Omit<Omit<{
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-    key?: React.Key | null | undefined;
-    orientation?: React.AriaAttributes["aria-orientation"];
-    disabled?: boolean | undefined;
     asChild?: boolean | undefined;
+    disabled?: boolean | undefined;
+    name?: string | undefined;
+    value?: number[] | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    orientation?: React.AriaAttributes["aria-orientation"];
     onValueChange?: ((value: number[]) => void) | undefined;
     inverted?: boolean | undefined;
     minStepsBetweenThumbs?: number | undefined;
@@ -2179,7 +2179,7 @@ export declare const DoubleSlider: React.ForwardRefExoticComponent<Omit<Omit<{
     xlTo2xl?: import("../../styled-system/types/conditions.mjs").Nested<import("../../styled-system/types/system-types.mjs").SystemStyleObject> | undefined;
     base?: import("../../styled-system/types/conditions.mjs").Nested<import("../../styled-system/types/system-types.mjs").SystemStyleObject> | undefined;
     css?: import("../../styled-system/types/system-types.mjs").SystemStyleObject | undefined;
-}, "ref">, "value" | "onChange" | "onValueChange"> & {
+}, "ref">, "onChange" | "value" | "onValueChange"> & {
     value: number[];
     maxLabelText?: string;
     minLabelText?: string;

package/dist/components/custom/index.d.ts

@@ -40,4 +40,7 @@ export * from './StatusBar.js';
 export * from './Input.js';
 export * from './FilterDropdown.js';
 export * from './Command.js';
+export * from './oak4/Oak4DeviceCard.js';
+export * from './oak4/device-model.js';
+export * from './oak4/device-info.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/custom/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/custom/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAE3B,cAAc,YAAY,CAAC;AAE3B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,mBAAmB,CAAC;AAElC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,YAAY,CAAC;AAE3B,cAAc,uBAAuB,CAAC;AAEtC,cAAc,WAAW,CAAC;AAE1B,cAAc,YAAY,CAAC;AAE3B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,eAAe,CAAC;AAE9B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAE1B,cAAc,eAAe,CAAC;AAE9B,cAAc,eAAe,CAAC;AAE9B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,eAAe,CAAC;AAE9B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,aAAa,CAAC;AAE5B,cAAc,qBAAqB,CAAC;AAEpC,cAAc,WAAW,CAAC;AAE1B,cAAc,kBAAkB,CAAC;AAEjC,cAAc,cAAc,CAAC;AAE7B,cAAc,sBAAsB,CAAC;AAErC,cAAc,cAAc,CAAC;AAE7B,cAAc,aAAa,CAAC;AAE5B,cAAc,WAAW,CAAC;AAE1B,cAAc,WAAW,CAAC;AAE1B,cAAc,aAAa,CAAC;AAE5B,cAAc,oBAAoB,CAAC;AAEnC,cAAc,kBAAkB,CAAC;AAEjC,cAAc,aAAa,CAAC;AAE5B,cAAc,YAAY,CAAC;AAE3B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,aAAa,CAAC;AAE5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,eAAe,CAAC;AAE9B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,YAAY,CAAC;AAE3B,cAAc,qBAAqB,CAAC;AAEpC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/custom/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAE3B,cAAc,YAAY,CAAC;AAE3B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,mBAAmB,CAAC;AAElC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,YAAY,CAAC;AAE3B,cAAc,uBAAuB,CAAC;AAEtC,cAAc,WAAW,CAAC;AAE1B,cAAc,YAAY,CAAC;AAE3B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,eAAe,CAAC;AAE9B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAE1B,cAAc,eAAe,CAAC;AAE9B,cAAc,eAAe,CAAC;AAE9B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,eAAe,CAAC;AAE9B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,aAAa,CAAC;AAE5B,cAAc,qBAAqB,CAAC;AAEpC,cAAc,WAAW,CAAC;AAE1B,cAAc,kBAAkB,CAAC;AAEjC,cAAc,cAAc,CAAC;AAE7B,cAAc,sBAAsB,CAAC;AAErC,cAAc,cAAc,CAAC;AAE7B,cAAc,aAAa,CAAC;AAE5B,cAAc,WAAW,CAAC;AAE1B,cAAc,WAAW,CAAC;AAE1B,cAAc,aAAa,CAAC;AAE5B,cAAc,oBAAoB,CAAC;AAEnC,cAAc,kBAAkB,CAAC;AAEjC,cAAc,aAAa,CAAC;AAE5B,cAAc,YAAY,CAAC;AAE3B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,aAAa,CAAC;AAE5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,eAAe,CAAC;AAE9B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,YAAY,CAAC;AAE3B,cAAc,qBAAqB,CAAC;AAEpC,cAAc,cAAc,CAAC;AAE7B,cAAc,0BAA0B,CAAC;AAEzC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,uBAAuB,CAAC"}

package/dist/components/custom/index.js

@@ -40,4 +40,7 @@ export * from './StatusBar.js';
 export * from './Input.js';
 export * from './FilterDropdown.js';
 export * from './Command.js';
+export * from './oak4/Oak4DeviceCard.js';
+export * from './oak4/device-model.js';
+export * from './oak4/device-info.js';
 //# sourceMappingURL=index.js.map

package/dist/components/custom/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/custom/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAE3B,cAAc,YAAY,CAAC;AAE3B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,mBAAmB,CAAC;AAElC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,YAAY,CAAC;AAE3B,cAAc,uBAAuB,CAAC;AAEtC,cAAc,WAAW,CAAC;AAE1B,cAAc,YAAY,CAAC;AAE3B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,eAAe,CAAC;AAE9B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAE1B,cAAc,eAAe,CAAC;AAE9B,cAAc,eAAe,CAAC;AAE9B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,eAAe,CAAC;AAE9B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,aAAa,CAAC;AAE5B,cAAc,qBAAqB,CAAC;AAEpC,cAAc,WAAW,CAAC;AAE1B,cAAc,kBAAkB,CAAC;AAEjC,cAAc,cAAc,CAAC;AAE7B,cAAc,sBAAsB,CAAC;AAErC,cAAc,cAAc,CAAC;AAE7B,cAAc,aAAa,CAAC;AAE5B,cAAc,WAAW,CAAC;AAE1B,cAAc,WAAW,CAAC;AAE1B,cAAc,aAAa,CAAC;AAE5B,cAAc,oBAAoB,CAAC;AAEnC,cAAc,kBAAkB,CAAC;AAEjC,cAAc,aAAa,CAAC;AAE5B,cAAc,YAAY,CAAC;AAE3B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,aAAa,CAAC;AAE5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,eAAe,CAAC;AAE9B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,YAAY,CAAC;AAE3B,cAAc,qBAAqB,CAAC;AAEpC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/custom/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAE3B,cAAc,YAAY,CAAC;AAE3B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,mBAAmB,CAAC;AAElC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,YAAY,CAAC;AAE3B,cAAc,uBAAuB,CAAC;AAEtC,cAAc,WAAW,CAAC;AAE1B,cAAc,YAAY,CAAC;AAE3B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,eAAe,CAAC;AAE9B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAE1B,cAAc,eAAe,CAAC;AAE9B,cAAc,eAAe,CAAC;AAE9B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,eAAe,CAAC;AAE9B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,aAAa,CAAC;AAE5B,cAAc,qBAAqB,CAAC;AAEpC,cAAc,WAAW,CAAC;AAE1B,cAAc,kBAAkB,CAAC;AAEjC,cAAc,cAAc,CAAC;AAE7B,cAAc,sBAAsB,CAAC;AAErC,cAAc,cAAc,CAAC;AAE7B,cAAc,aAAa,CAAC;AAE5B,cAAc,WAAW,CAAC;AAE1B,cAAc,WAAW,CAAC;AAE1B,cAAc,aAAa,CAAC;AAE5B,cAAc,oBAAoB,CAAC;AAEnC,cAAc,kBAAkB,CAAC;AAEjC,cAAc,aAAa,CAAC;AAE5B,cAAc,YAAY,CAAC;AAE3B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,aAAa,CAAC;AAE5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,eAAe,CAAC;AAE9B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,YAAY,CAAC;AAE3B,cAAc,qBAAqB,CAAC;AAEpC,cAAc,cAAc,CAAC;AAE7B,cAAc,0BAA0B,CAAC;AAEzC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,uBAAuB,CAAC"}

package/dist/components/custom/oak4/Oak4DeviceCard.d.ts

@@ -0,0 +1,9 @@
+import type { Oak4DeviceModel } from './device-model';
+type Oak4DeviceCardProps = {
+    device: Oak4DeviceModel;
+    onClick: (device: Oak4DeviceModel) => void;
+    isSelected: boolean;
+};
+export declare function Oak4DeviceCard(props: Readonly<Oak4DeviceCardProps>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Oak4DeviceCard.d.ts.map

package/dist/components/custom/oak4/Oak4DeviceCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Oak4DeviceCard.d.ts","sourceRoot":"","sources":["../../../../src/components/custom/oak4/Oak4DeviceCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKtD,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAclE"}

package/dist/components/custom/oak4/Oak4DeviceCard.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NormalText } from '../Text';
+import { Card } from '../Card';
+import { getDeviceInformationByModel } from './device-info';
+import { Circle } from '../Circle';
+import { Wrap } from '../../../styled-system/jsx/wrap.mjs';
+export function Oak4DeviceCard(props) {
+    const { device, onClick, isSelected } = props;
+    const deviceInfo = getDeviceInformationByModel(device);
+    return (_jsx(Card, { onClick: () => onClick(device), withHoverEffect: true, fullWidth: true, colorVariant: isSelected ? 'active' : 'white', children: _jsxs(Wrap, { align: "center", children: [_jsx(Circle, { variant: "icon", children: _jsx("img", { src: deviceInfo.deviceImageName, alt: deviceInfo.deviceName }) }), _jsx(NormalText, { text: deviceInfo.deviceName })] }) }));
+}
+//# sourceMappingURL=Oak4DeviceCard.js.map

package/dist/components/custom/oak4/Oak4DeviceCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Oak4DeviceCard.js","sourceRoot":"","sources":["../../../../src/components/custom/oak4/Oak4DeviceCard.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,OAAO,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,qCAAqC,CAAC;AAQ3D,MAAM,UAAU,cAAc,CAAC,KAAoC;IACjE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAC9C,MAAM,UAAU,GAAG,2BAA2B,CAAC,MAAM,CAAC,CAAC;IAEvD,OAAO,CACL,KAAC,IAAI,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,eAAe,QAAC,SAAS,QAAC,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,YAC3G,MAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,aAClB,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,YACpB,cAAK,GAAG,EAAE,UAAU,CAAC,eAAe,EAAE,GAAG,EAAE,UAAU,CAAC,UAAU,GAAI,GAC7D,EACT,KAAC,UAAU,IAAC,IAAI,EAAE,UAAU,CAAC,UAAU,GAAI,IACtC,GACF,CACR,CAAC;AACJ,CAAC"}

package/dist/components/custom/oak4/device-info.d.ts

@@ -0,0 +1,11 @@
+import type { DeviceModel } from './device-model';
+export declare const DEVICE_IMAGE_PATH = "/images/devices";
+export declare function getDeviceInformationByModel(model: DeviceModel): DeviceInformation;
+export declare function getDeviceNameByModel(model: DeviceModel): string;
+export type DeviceInformation = {
+    model: DeviceModel;
+    deviceName: string;
+    deviceImageName: string;
+    setupSteps: (string | JSX.Element)[];
+};
+//# sourceMappingURL=device-info.d.ts.map

package/dist/components/custom/oak4/device-info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-info.d.ts","sourceRoot":"","sources":["../../../../src/components/custom/oak4/device-info.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,iBAAiB,oBAAoB,CAAC;AAEnD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,WAAW,GAAG,iBAAiB,CAmDjF;AAUD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAsB/D;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,CAAC,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;CACtC,CAAC"}

package/dist/components/custom/oak4/device-info.js

@@ -0,0 +1,91 @@
+import { log } from '@luxonis/common-fe-utils';
+export const DEVICE_IMAGE_PATH = '/images/devices';
+export function getDeviceInformationByModel(model) {
+    switch (model) {
+        case 'rae': {
+            return {
+                model,
+                deviceName: getDeviceNameByModel(model),
+                deviceImageName: `${DEVICE_IMAGE_PATH}/rae.webp`,
+                setupSteps: [
+                    `Press and hold the power button on the ${getDeviceNameByModel(model)} for 10 seconds to activate it. You will know it is fully powered up when the robot emits a purple-orange light.`,
+                    `Aim the RGB camera, situated near the display, directly at the QR code. Ensure the camera is perpendicular to the screen, maintaining an ideal distance of about 6-8 inches (15-20 cm).`,
+                    `Once the Rae Robot starts blinking with a vivid green color, click the 'Continue' button to proceed.`,
+                ],
+            };
+        }
+        case 'oak4s': {
+            return {
+                model,
+                deviceName: getDeviceNameByModel(model),
+                deviceImageName: 'https://static.luxonis.com/images/cameras/OAK4-S.webp',
+                setupSteps: getOak4SetupSteps(model),
+            };
+        }
+        case 'oak4d': {
+            return {
+                model,
+                deviceName: getDeviceNameByModel(model),
+                deviceImageName: 'https://static.luxonis.com/images/cameras/OAK4-D.webp',
+                setupSteps: getOak4SetupSteps(model),
+            };
+        }
+        case 'oak4lr': {
+            return {
+                model,
+                deviceName: getDeviceNameByModel(model),
+                deviceImageName: 'https://static.luxonis.com/images/cameras/OAK4-LR.webp',
+                setupSteps: getOak4SetupSteps(model),
+            };
+        }
+        case 'oak4sr': {
+            return {
+                model,
+                deviceName: getDeviceNameByModel(model),
+                deviceImageName: `${DEVICE_IMAGE_PATH}/oak4-d-sr.webp`,
+                setupSteps: getOak4SetupSteps(model),
+            };
+        }
+        default: {
+            log.error(`Device context received unsupported model: ${model}`);
+            return emptyDeviceInformation;
+        }
+    }
+}
+function getOak4SetupSteps(model) {
+    return [
+        `Connect the PoE/ETH cable to power up the ${getDeviceNameByModel(model)}`,
+        `Scan the QR code.`,
+        'Scanning the QR code will take a few seconds. Try keeping the camera steady without moving your hands.',
+    ];
+}
+export function getDeviceNameByModel(model) {
+    switch (model) {
+        case 'rae': {
+            return 'Rae Robot';
+        }
+        case 'oak4s': {
+            return 'OAK4-S';
+        }
+        case 'oak4d': {
+            return 'OAK4-D';
+        }
+        case 'oak4lr': {
+            return 'OAK4-LR';
+        }
+        case 'oak4sr': {
+            return 'OAK4-SR';
+        }
+        default: {
+            log.error(`Unknown device model: ${model}`);
+            return 'Unknown device';
+        }
+    }
+}
+const emptyDeviceInformation = {
+    deviceName: '',
+    deviceImageName: '',
+    setupSteps: [],
+    model: 'rae',
+};
+//# sourceMappingURL=device-info.js.map

package/dist/components/custom/oak4/device-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-info.js","sourceRoot":"","sources":["../../../../src/components/custom/oak4/device-info.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAI/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,iBAAiB,CAAC;AAEnD,MAAM,UAAU,2BAA2B,CAAC,KAAkB;IAC5D,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,KAAK,CAAC,CAAC,CAAC;YACX,OAAO;gBACL,KAAK;gBACL,UAAU,EAAE,oBAAoB,CAAC,KAAK,CAAC;gBACvC,eAAe,EAAE,GAAG,iBAAiB,WAAW;gBAChD,UAAU,EAAE;oBACV,0CAA0C,oBAAoB,CAAC,KAAK,CAAC,kHAAkH;oBACvL,yLAAyL;oBACzL,sGAAsG;iBACvG;aACF,CAAC;QACJ,CAAC;QACD,KAAK,OAAO,CAAC,CAAC,CAAC;YACb,OAAO;gBACL,KAAK;gBACL,UAAU,EAAE,oBAAoB,CAAC,KAAK,CAAC;gBACvC,eAAe,EAAE,uDAAuD;gBACxE,UAAU,EAAE,iBAAiB,CAAC,KAAK,CAAC;aACrC,CAAC;QACJ,CAAC;QACD,KAAK,OAAO,CAAC,CAAC,CAAC;YACb,OAAO;gBACL,KAAK;gBACL,UAAU,EAAE,oBAAoB,CAAC,KAAK,CAAC;gBACvC,eAAe,EAAE,uDAAuD;gBACxE,UAAU,EAAE,iBAAiB,CAAC,KAAK,CAAC;aACrC,CAAC;QACJ,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,OAAO;gBACL,KAAK;gBACL,UAAU,EAAE,oBAAoB,CAAC,KAAK,CAAC;gBACvC,eAAe,EAAE,wDAAwD;gBACzE,UAAU,EAAE,iBAAiB,CAAC,KAAK,CAAC;aACrC,CAAC;QACJ,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,OAAO;gBACL,KAAK;gBACL,UAAU,EAAE,oBAAoB,CAAC,KAAK,CAAC;gBACvC,eAAe,EAAE,GAAG,iBAAiB,iBAAiB;gBACtD,UAAU,EAAE,iBAAiB,CAAC,KAAK,CAAC;aACrC,CAAC;QACJ,CAAC;QACD,OAAO,CAAC,CAAC,CAAC;YACR,GAAG,CAAC,KAAK,CAAC,8CAA8C,KAAK,EAAE,CAAC,CAAC;YACjE,OAAO,sBAAsB,CAAC;QAChC,CAAC;IACH,CAAC;AACH,CAAC;AAED,SAAS,iBAAiB,CAAC,KAAkB;IAC3C,OAAO;QACL,6CAA6C,oBAAoB,CAAC,KAAK,CAAC,EAAE;QAC1E,mBAAmB;QACnB,wGAAwG;KACzG,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,KAAkB;IACrD,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,KAAK,CAAC,CAAC,CAAC;YACX,OAAO,WAAW,CAAC;QACrB,CAAC;QACD,KAAK,OAAO,CAAC,CAAC,CAAC;YACb,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,KAAK,OAAO,CAAC,CAAC,CAAC;YACb,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,OAAO,CAAC,CAAC,CAAC;YACR,GAAG,CAAC,KAAK,CAAC,yBAAyB,KAAK,EAAE,CAAC,CAAC;YAC5C,OAAO,gBAAgB,CAAC;QAC1B,CAAC;IACH,CAAC;AACH,CAAC;AASD,MAAM,sBAAsB,GAAsB;IAChD,UAAU,EAAE,EAAE;IACd,eAAe,EAAE,EAAE;IACnB,UAAU,EAAE,EAAE;IACd,KAAK,EAAE,KAAK;CACb,CAAC"}

package/dist/components/custom/oak4/device-model.d.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+export declare const Oak4DeviceModelSchema: z.ZodEnum<["oak4d", "oak4lr", "oak4sr", "oak4s"]>;
+export type Oak4DeviceModel = z.infer<typeof Oak4DeviceModelSchema>;
+export declare const DeviceModelSchema: z.ZodEnum<["rae", "oak4d", "oak4lr", "oak4sr", "oak4s"]>;
+export type DeviceModel = z.infer<typeof DeviceModelSchema>;
+//# sourceMappingURL=device-model.d.ts.map

package/dist/components/custom/oak4/device-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-model.d.ts","sourceRoot":"","sources":["../../../../src/components/custom/oak4/device-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,eAAO,MAAM,qBAAqB,mDAAqB,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAEpE,eAAO,MAAM,iBAAiB,0DAAiC,CAAC;AAEhE,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist/components/custom/oak4/device-model.js

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+const Oak4Models = ['oak4d', 'oak4lr', 'oak4sr', 'oak4s'];
+export const Oak4DeviceModelSchema = z.enum(Oak4Models);
+export const DeviceModelSchema = z.enum(['rae', ...Oak4Models]);
+//# sourceMappingURL=device-model.js.map

package/dist/components/custom/oak4/device-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-model.js","sourceRoot":"","sources":["../../../../src/components/custom/oak4/device-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAC;AAEnE,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAIxD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC"}

package/dist/components/custom/oak4/oak4-device-info.d.ts

@@ -0,0 +1,13 @@
+import type { DeviceModel } from '~/models/setup/configuration-schema/configuration.schema';
+import type { LegacyOakFragment } from '~/gql.generated';
+export declare const DEVICE_IMAGE_PATH = "/images/devices";
+export declare function getDeviceInformationByModel(model: DeviceModel): DeviceInformation;
+export declare function getDeviceNameByModel(model: DeviceModel): string;
+export type DeviceInformation = {
+    model: DeviceModel;
+    deviceName: string;
+    deviceImageName: string;
+    setupSteps: (string | JSX.Element)[];
+};
+export declare function getDeviceNameFromInfo(device: LegacyOakFragment): string;
+//# sourceMappingURL=oak4-device-info.d.ts.map

package/dist/components/custom/oak4/oak4-device-info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"oak4-device-info.d.ts","sourceRoot":"","sources":["../../../../src/components/custom/oak4/oak4-device-info.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0DAA0D,CAAC;AAC5F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,eAAO,MAAM,iBAAiB,oBAAoB,CAAC;AAEnD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,WAAW,GAAG,iBAAiB,CAmDjF;AAUD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAsB/D;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,CAAC,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;CACtC,CAAC;AASF,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,iBAAiB,GAAG,MAAM,CAQvE"}

package/dist/components/custom/oak4/oak4-device-info.js

@@ -0,0 +1,100 @@
+import { log } from '@luxonis/common-fe-utils';
+export const DEVICE_IMAGE_PATH = '/images/devices';
+export function getDeviceInformationByModel(model) {
+    switch (model) {
+        case 'rae': {
+            return {
+                model,
+                deviceName: getDeviceNameByModel(model),
+                deviceImageName: `${DEVICE_IMAGE_PATH}/rae.webp`,
+                setupSteps: [
+                    `Press and hold the power button on the ${getDeviceNameByModel(model)} for 10 seconds to activate it. You will know it is fully powered up when the robot emits a purple-orange light.`,
+                    `Aim the RGB camera, situated near the display, directly at the QR code. Ensure the camera is perpendicular to the screen, maintaining an ideal distance of about 6-8 inches (15-20 cm).`,
+                    `Once the Rae Robot starts blinking with a vivid green color, click the 'Continue' button to proceed.`,
+                ],
+            };
+        }
+        case 'oak4s': {
+            return {
+                model,
+                deviceName: getDeviceNameByModel(model),
+                deviceImageName: 'https://static.luxonis.com/images/cameras/OAK4-S.webp',
+                setupSteps: getOak4SetupSteps(model),
+            };
+        }
+        case 'oak4d': {
+            return {
+                model,
+                deviceName: getDeviceNameByModel(model),
+                deviceImageName: 'https://static.luxonis.com/images/cameras/OAK4-D.webp',
+                setupSteps: getOak4SetupSteps(model),
+            };
+        }
+        case 'oak4lr': {
+            return {
+                model,
+                deviceName: getDeviceNameByModel(model),
+                deviceImageName: 'https://static.luxonis.com/images/cameras/OAK4-LR.webp',
+                setupSteps: getOak4SetupSteps(model),
+            };
+        }
+        case 'oak4sr': {
+            return {
+                model,
+                deviceName: getDeviceNameByModel(model),
+                deviceImageName: `${DEVICE_IMAGE_PATH}/oak4-d-sr.webp`,
+                setupSteps: getOak4SetupSteps(model),
+            };
+        }
+        default: {
+            log.error(`Device context received unsupported model: ${model}`);
+            return emptyDeviceInformation;
+        }
+    }
+}
+function getOak4SetupSteps(model) {
+    return [
+        `Connect the PoE/ETH cable to power up the ${getDeviceNameByModel(model)}`,
+        `Scan the QR code.`,
+        'Scanning the QR code will take a few seconds. Try keeping the camera steady without moving your hands.',
+    ];
+}
+export function getDeviceNameByModel(model) {
+    switch (model) {
+        case 'rae': {
+            return 'Rae Robot';
+        }
+        case 'oak4s': {
+            return 'OAK4-S';
+        }
+        case 'oak4d': {
+            return 'OAK4-D';
+        }
+        case 'oak4lr': {
+            return 'OAK4-LR';
+        }
+        case 'oak4sr': {
+            return 'OAK4-SR';
+        }
+        default: {
+            log.error(`Unknown device model: ${model}`);
+            return 'Unknown device';
+        }
+    }
+}
+const emptyDeviceInformation = {
+    deviceName: '',
+    deviceImageName: '',
+    setupSteps: [],
+    model: 'rae',
+};
+export function getDeviceNameFromInfo(device) {
+    if (device.name && device.name !== '' && device.name !== device.serialNumber) {
+        return device.name;
+    }
+    if (device.serialNumber && device.serialNumber !== '' && device.serialNumber !== 'unknown') {
+        return device.serialNumber;
+    }
+    return 'unknown';
+}
+//# sourceMappingURL=oak4-device-info.js.map

package/dist/components/custom/oak4/oak4-device-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oak4-device-info.js","sourceRoot":"","sources":["../../../../src/components/custom/oak4/oak4-device-info.ts"],"names":[],"mappings":"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"}

package/dist/components/custom/oak4/oak4-model.d.ts

@@ -0,0 +1,4 @@
+import { z } from 'zod';
+export declare const Oak4DeviceModelSchema: z.ZodEnum<["oak4d", "oak4lr", "oak4sr", "oak4s"]>;
+export type Oak4DeviceModel = z.infer<typeof Oak4DeviceModelSchema>;
+//# sourceMappingURL=oak4-model.d.ts.map

package/dist/components/custom/oak4/oak4-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"oak4-model.d.ts","sourceRoot":"","sources":["../../../../src/components/custom/oak4/oak4-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,eAAO,MAAM,qBAAqB,mDAAiD,CAAC;AAEpF,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/components/custom/oak4/oak4-model.js

@@ -0,0 +1,3 @@
+import { z } from 'zod';
+export const Oak4DeviceModelSchema = z.enum(['oak4d', 'oak4lr', 'oak4sr', 'oak4s']);
+//# sourceMappingURL=oak4-model.js.map

package/dist/components/custom/oak4/oak4-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oak4-model.js","sourceRoot":"","sources":["../../../../src/components/custom/oak4/oak4-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC"}

package/dist/components/shadow-panda/_Command.d.ts

@@ -14,56 +14,56 @@ declare const __CommandInput: StyledComponent<React.ForwardRefExoticComponent<Om
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "asChild">, "value" | "type" | "onChange"> & {
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>>, {}>;
 export declare const _CommandInput: Nested<typeof __CommandInput>;
 declare const _CommandList: StyledComponent<React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>>, {}>;
 export declare const CommandList: Nested<typeof _CommandList>;
 declare const _CommandEmpty: StyledComponent<React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & React.RefAttributes<HTMLDivElement>>, {}>;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>>, {}>;
 export declare const CommandEmpty: Nested<typeof _CommandEmpty>;
 declare const _CommandGroup: StyledComponent<React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "value" | "heading"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>>, {}>;
 export declare const CommandGroup: Nested<typeof _CommandGroup>;
-declare const _CommandSeparator: StyledComponent<React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+declare const _CommandSeparator: StyledComponent<React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>>, {}>;
 export declare const CommandSeparator: Nested<typeof _CommandSeparator>;
 declare const __CommandItem: StyledComponent<React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "value" | "onSelect" | "disabled"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxonis/common-fe-components",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
-    "@luxonis/common-fe-utils": "^1.12.0",
+    "@luxonis/common-fe-utils": "^1.13.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.1.0",
@@ -59,7 +59,7 @@
     "lucide-react": "^0.438.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "7.50.1",
-    "react-icons": "^5.3.0",
+    "react-icons": "^5.4.0",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "typesafe-i18n": "^5.26.2",
@@ -84,6 +84,6 @@
     "registry": "https://registry.npmjs.org",
     "access": "public"
   },
-  "gitHead": "53453478235ba211fbeb3855f5c86372523f83c1",
+  "gitHead": "3b7ca6a193127a09bf42c2a41f821370a8112377",
   "license": "UNLICENSED"
 }