@next-degree/pickle-shared-js 0.13.4 → 0.13.6

package/dist/{chunk-ZBCGHL2Z.cjs → chunk-VAHZQJTA.cjs}

@@ -1,11 +1,12 @@
 'use strict';
 
-var chunk3BGXWNKI_cjs = require('./chunk-3BGXWNKI.cjs');
-var chunkHMKEBIBE_cjs = require('./chunk-HMKEBIBE.cjs');
+var chunkXWQI5MC3_cjs = require('./chunk-XWQI5MC3.cjs');
+var chunkLTJXX7NG_cjs = require('./chunk-LTJXX7NG.cjs');
 var chunkMGWZXPMF_cjs = require('./chunk-MGWZXPMF.cjs');
 var cva = require('cva');
 var lucideReact = require('lucide-react');
 var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
 var Input = react.forwardRef(
   ({ label, error, description, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
@@ -17,39 +18,47 @@ var Input = react.forwardRef(
     const placeholder = props.placeholder ?? (icon === "Search" ? "Search..." : "");
     const hasIcon = !!icon;
     const iconColor = theme === "dark" ? "text-white" : "text-grey-80";
-    return /* @__PURE__ */ React.createElement("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}` }, label && /* @__PURE__ */ React.createElement(
-      chunk3BGXWNKI_cjs.Label_default,
-      {
-        text: label,
-        htmlFor: props.name,
-        required: props.required,
-        description,
-        className: classNames?.label
-      }
-    ), /* @__PURE__ */ React.createElement("div", { className: "relative flex flex-row items-center" }, IconComponent && /* @__PURE__ */ React.createElement(
-      IconComponent,
-      {
-        className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
-      }
-    ), /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        className: chunkMGWZXPMF_cjs.cn(inputVariants({ theme, hasIcon })),
-        ref,
-        placeholder,
-        value,
-        onChange,
-        "data-testid": `input-element-${props.id}`,
-        ...props
-      }
-    ), hasIcon && value && /* @__PURE__ */ React.createElement(
-      lucideReact.X,
-      {
-        className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
-        onClick: handleClear,
-        "data-testid": "clear-button"
-      }
-    )), /* @__PURE__ */ React.createElement(chunkHMKEBIBE_cjs.ErrorMessage_default, { message: error }));
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}`, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(
+        chunkXWQI5MC3_cjs.Label_default,
+        {
+          text: label,
+          htmlFor: props.name,
+          required: props.required,
+          description,
+          className: classNames?.label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-row items-center", children: [
+        IconComponent && /* @__PURE__ */ jsxRuntime.jsx(
+          IconComponent,
+          {
+            className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            className: chunkMGWZXPMF_cjs.cn(inputVariants({ theme, hasIcon })),
+            ref,
+            placeholder,
+            value,
+            onChange,
+            "data-testid": `input-element-${props.id}`,
+            ...props
+          }
+        ),
+        hasIcon && value && /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.X,
+          {
+            className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
+            onClick: handleClear,
+            "data-testid": "clear-button"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkLTJXX7NG_cjs.ErrorMessage_default, { message: error })
+    ] });
   }
 );
 Input.displayName = "Input";
@@ -104,5 +113,5 @@ var inputVariants = cva.cva(
 var Input_default = Input;
 
 exports.Input_default = Input_default;
-//# sourceMappingURL=chunk-ZBCGHL2Z.cjs.map
-//# sourceMappingURL=chunk-ZBCGHL2Z.cjs.map
+//# sourceMappingURL=chunk-VAHZQJTA.cjs.map
+//# sourceMappingURL=chunk-VAHZQJTA.cjs.map

package/dist/chunk-VAHZQJTA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/Input.tsx"],"names":["forwardRef","icons","jsxs","jsx","Label_default","cn","X","ErrorMessage_default","cva"],"mappings":"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","file":"chunk-VAHZQJTA.cjs","sourcesContent":["import { cva, type VariantProps } from 'cva'\nimport { icons, X } from 'lucide-react'\nimport { type ChangeEvent, forwardRef, type InputHTMLAttributes } from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {\n  label?: string\n  error?: string\n  icon?: keyof typeof icons\n  description?: string\n  classNames?: { label?: string }\n  onClear?: () => void\n}\n\n/**\n * A reusable input component that supports icons, labels, error messages, and clearing functionality.\n *\n * @example\n * // Basic usage\n * <Input\n *   id=\"email\"\n *   name=\"email\"\n *   placeholder=\"Enter your email\"\n * />\n *\n * @example\n * // With label and error\n * <Input\n *   id=\"username\"\n *   label=\"Username\"\n *   error=\"Username is required\"\n *   required\n * />\n *\n * @example\n * // Search input with clear functionality\n * <Input\n *   icon=\"Search\"\n *   value={searchValue}\n *   onChange={handleChange}\n *   onClear={() => setSearchValue('')}\n * />\n */\nconst Input = forwardRef<HTMLInputElement, Props>(\n  (\n    { label, error, description, theme, icon, onClear, value, onChange, classNames, ...props },\n    ref\n  ) => {\n    const handleClear = () => {\n      onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>)\n      onClear?.()\n    }\n\n    const IconComponent = icon && icons[icon]\n\n    const placeholder = props.placeholder ?? (icon === 'Search' ? 'Search...' : '')\n    const hasIcon = !!icon\n\n    const iconColor = theme === 'dark' ? 'text-white' : 'text-grey-80'\n\n    return (\n      <div className=\"group flex w-full flex-col gap-1\" data-testid={`input-wrapper-${props.id}`}>\n        {label && (\n          <Label\n            text={label}\n            htmlFor={props.name}\n            required={props.required}\n            description={description}\n            className={classNames?.label}\n          />\n        )}\n        <div className=\"relative flex flex-row items-center\">\n          {IconComponent && (\n            <IconComponent\n              className={`absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`}\n            />\n          )}\n          <input\n            className={cn(inputVariants({ theme, hasIcon }))}\n            ref={ref}\n            placeholder={placeholder}\n            value={value}\n            onChange={onChange}\n            data-testid={`input-element-${props.id}`}\n            {...props}\n          />\n          {hasIcon && value && (\n            <X\n              className={`absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`}\n              onClick={handleClear}\n              data-testid=\"clear-button\"\n            />\n          )}\n        </div>\n\n        <ErrorMessage message={error} />\n      </div>\n    )\n  }\n)\nInput.displayName = 'Input'\n\nconst inputVariants = cva(\n  [\n    'border-input',\n    'placeholder:text-muted-foreground',\n    'focus-visible:ring-ring',\n    'inline-flex',\n    'w-full',\n    'h-11',\n    'items-center',\n    'justify-start',\n    'gap-3',\n    'rounded-lg',\n    'bg-transparent',\n    'px-3',\n    'pt-0.5',\n    'text-sm',\n    'shadow-sm',\n    'ring-grey-50',\n    'transition-colors',\n    'focus-visible:outline-none',\n    'focus-visible:ring-1',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-50',\n    'appearance-none',\n    '[&::-webkit-search-cancel-button]:appearance-none',\n    '[&::-webkit-search-decoration]:appearance-none',\n    '[&::-webkit-search-results-button]:appearance-none',\n    '[&::-webkit-search-results-decoration]:appearance-none',\n    '[&::-ms-clear]:display-none',\n    '[&::-ms-reveal]:display-none',\n  ],\n  {\n    variants: {\n      theme: {\n        light: 'text-grey-80 border',\n        dark: 'text-white',\n      },\n      hasIcon: {\n        false: 'pl-3',\n        true: 'pl-8',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n      hasIcon: false,\n    },\n  }\n)\n\nexport default Input\n"]}

package/dist/chunk-VB32IBQC.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+var chunkXWQI5MC3_cjs = require('./chunk-XWQI5MC3.cjs');
+var chunkLTJXX7NG_cjs = require('./chunk-LTJXX7NG.cjs');
+var chunk6EW2D7K7_cjs = require('./chunk-6EW2D7K7.cjs');
+var chunkMGWZXPMF_cjs = require('./chunk-MGWZXPMF.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Radio = react.forwardRef(
+  ({
+    label,
+    error,
+    description,
+    options,
+    classNames,
+    onChange: handleValueChange,
+    orientation,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMGWZXPMF_cjs.cn("flex flex-col gap-1", classNames?.root), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkXWQI5MC3_cjs.Label_default, { text: label, description, required: props.required }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        chunk6EW2D7K7_cjs.RadioGroup,
+        {
+          ref,
+          className: chunkMGWZXPMF_cjs.cn(
+            "flex text-sm",
+            orientation === "vertical" ? "flex-col gap-2" : "flex-row gap-4",
+            classNames?.group
+          ),
+          onValueChange: handleValueChange,
+          ...props,
+          children: options?.map(({ id, title, value }) => /* @__PURE__ */ jsxRuntime.jsx(
+            chunk6EW2D7K7_cjs.RadioGroupItem,
+            {
+              value,
+              id: `radio-group-item-${title}`,
+              className: classNames?.item,
+              children: title
+            },
+            id
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkLTJXX7NG_cjs.ErrorMessage_default, { message: error })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+
+exports.Radio = Radio;
+//# sourceMappingURL=chunk-VB32IBQC.cjs.map
+//# sourceMappingURL=chunk-VB32IBQC.cjs.map

package/dist/chunk-VB32IBQC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/Radio.tsx"],"names":["forwardRef","cn","jsx","Label_default","RadioGroup","RadioGroupItem","ErrorMessage_default"],"mappings":";;;;;;;;;AAmBO,IAAM,KAAQ,GAAAA,gBAAA;AAAA,EACnB,CACE;AAAA,IACE,KAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAU,EAAA,iBAAA;AAAA,IACV,WAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,uCACG,KAAI,EAAA,EAAA,SAAA,EAAWC,qBAAG,qBAAuB,EAAA,UAAA,EAAY,IAAI,CACxD,EAAA,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAACC,mCAAM,IAAM,EAAA,KAAA,EAAO,WAA0B,EAAA,QAAA,EAAU,MAAM,QAAU,EAAA,CAAA;AAAA,sBAExED,cAAA;AAAA,QAACE,4BAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,SAAW,EAAAH,oBAAA;AAAA,YACT,cAAA;AAAA,YACA,WAAA,KAAgB,aAAa,gBAAmB,GAAA,gBAAA;AAAA,YAChD,UAAY,EAAA;AAAA,WACd;AAAA,UACA,aAAe,EAAA,iBAAA;AAAA,UACd,GAAG,KAAA;AAAA,UAEH,mBAAS,GAAI,CAAA,CAAC,EAAE,EAAI,EAAA,KAAA,EAAO,OAC1B,qBAAAC,cAAA;AAAA,YAACG,gCAAA;AAAA,YAAA;AAAA,cAEC,KAAA;AAAA,cACA,EAAA,EAAI,oBAAoB,KAAK,CAAA,CAAA;AAAA,cAC7B,WAAW,UAAY,EAAA,IAAA;AAAA,cAEtB,QAAA,EAAA;AAAA,aAAA;AAAA,YALI;AAAA,WAOR;AAAA;AAAA,OACH;AAAA,sBAEAH,cAAA,CAACI,sCAAa,EAAA,EAAA,OAAA,EAAS,KAAO,EAAA;AAAA,KAChC,EAAA,CAAA;AAAA;AAGN;AACA,KAAA,CAAM,WAAc,GAAA,OAAA","file":"chunk-VB32IBQC.cjs","sourcesContent":["import { type ComponentProps, forwardRef } from 'react'\n\nimport { RadioGroup, RadioGroupItem } from '@/components/primitives/radio-group'\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ntype RadioItem = { id: string | number; title: string; value: string }\ntype RadioClassNames = { root?: string; group?: string; item?: string }\ntype RadioGroupProps = Omit<ComponentProps<typeof RadioGroup>, 'onValueChange'>\nexport type RadioProps = RadioGroupProps & {\n  label?: string\n  error?: string\n  description?: string\n  classNames?: RadioClassNames\n  options?: RadioItem[]\n  onChange?: (value: string) => void\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      label,\n      error,\n      description,\n      options,\n      classNames,\n      onChange: handleValueChange,\n      orientation,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div className={cn('flex flex-col gap-1', classNames?.root)}>\n        <Label text={label} description={description} required={props.required} />\n\n        <RadioGroup\n          ref={ref}\n          className={cn(\n            'flex text-sm',\n            orientation === 'vertical' ? 'flex-col gap-2' : 'flex-row gap-4',\n            classNames?.group\n          )}\n          onValueChange={handleValueChange}\n          {...props}\n        >\n          {options?.map(({ id, title, value }) => (\n            <RadioGroupItem\n              key={id}\n              value={value}\n              id={`radio-group-item-${title}`}\n              className={classNames?.item}\n            >\n              {title}\n            </RadioGroupItem>\n          ))}\n        </RadioGroup>\n\n        <ErrorMessage message={error} />\n      </div>\n    )\n  }\n)\nRadio.displayName = 'Radio'\n"]}

package/dist/{chunk-TBV7NDAG.cjs → chunk-W2UGL7QI.cjs}

@@ -1,8 +1,9 @@
 'use strict';
 
-var chunkQDSCHWM3_cjs = require('./chunk-QDSCHWM3.cjs');
+var chunkIMAHT6W4_cjs = require('./chunk-IMAHT6W4.cjs');
 var cva = require('cva');
 var Link = require('next/link');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -12,9 +13,12 @@ function Avatar({ size, src, href, name, ...linkProps }) {
   const fallbackShort = name?.slice(0, 2);
   const fallbackWords = name?.split(" ").map((n) => n[0]).join("").slice(0, 2);
   const fallback = fallbackWords && fallbackWords.length > 1 ? fallbackWords : fallbackShort;
-  const renderAvatar = () => /* @__PURE__ */ React.createElement(chunkQDSCHWM3_cjs.AvatarBase, { className: avatarVariants({ size }) }, /* @__PURE__ */ React.createElement(chunkQDSCHWM3_cjs.AvatarImage, { src, alt: name }), /* @__PURE__ */ React.createElement(chunkQDSCHWM3_cjs.AvatarFallback, null, fallback?.toUpperCase()));
+  const renderAvatar = () => /* @__PURE__ */ jsxRuntime.jsxs(chunkIMAHT6W4_cjs.AvatarBase, { className: avatarVariants({ size }), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkIMAHT6W4_cjs.AvatarImage, { src, alt: name }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkIMAHT6W4_cjs.AvatarFallback, { children: fallback?.toUpperCase() })
+  ] });
   if (href) {
-    return /* @__PURE__ */ React.createElement(Link__default.default, { href, ...linkProps }, renderAvatar());
+    return /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href, ...linkProps, children: renderAvatar() });
   }
   return renderAvatar();
 }
@@ -33,5 +37,5 @@ var avatarVariants = cva.cva("ring ring-white ring-2", {
 
 exports.Avatar = Avatar;
 exports.avatarVariants = avatarVariants;
-//# sourceMappingURL=chunk-TBV7NDAG.cjs.map
-//# sourceMappingURL=chunk-TBV7NDAG.cjs.map
+//# sourceMappingURL=chunk-W2UGL7QI.cjs.map
+//# sourceMappingURL=chunk-W2UGL7QI.cjs.map

package/dist/chunk-W2UGL7QI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/Avatar.tsx"],"names":["jsxs","AvatarBase","jsx","AvatarImage","AvatarFallback","Link","cva"],"mappings":";;;;;;;;;;;AAaO,SAAS,MAAA,CAAO,EAAE,IAAM,EAAA,GAAA,EAAK,MAAM,IAAM,EAAA,GAAG,WAA0B,EAAA;AAC3E,EAAA,MAAM,aAAgB,GAAA,IAAA,EAAM,KAAM,CAAA,CAAA,EAAG,CAAC,CAAA;AACtC,EAAA,MAAM,gBAAgB,IAClB,EAAA,KAAA,CAAM,GAAG,CAAA,CACV,IAAI,CAAC,CAAA,KAAM,CAAE,CAAA,CAAC,CAAC,CACf,CAAA,IAAA,CAAK,EAAE,CACP,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAEb,EAAA,MAAM,QAAW,GAAA,aAAA,IAAiB,aAAc,CAAA,MAAA,GAAS,IAAI,aAAgB,GAAA,aAAA;AAE7E,EAAM,MAAA,YAAA,GAAe,sBAClBA,eAAA,CAAAC,4BAAA,EAAA,EAAW,WAAW,cAAe,CAAA,EAAE,IAAK,EAAC,CAC5C,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,6BAAA,EAAA,EAAY,GAAU,EAAA,GAAA,EAAK,IAAM,EAAA,CAAA;AAAA,oBACjCD,cAAA,CAAAE,gCAAA,EAAA,EAAgB,QAAU,EAAA,QAAA,EAAA,WAAA,EAAc,EAAA;AAAA,GAC3C,EAAA,CAAA;AAGF,EAAA,IAAI,IAAM,EAAA;AACR,IAAA,sCACGC,qBAAK,EAAA,EAAA,IAAA,EAAa,GAAG,SAAA,EACnB,wBACH,EAAA,CAAA;AAAA;AAIJ,EAAA,OAAO,YAAa,EAAA;AACtB;AAEa,IAAA,cAAA,GAAiBC,QAAI,wBAA0B,EAAA;AAAA,EAC1D,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,KAAO,EAAA,WAAA;AAAA,MACP,MAAQ,EAAA,WAAA;AAAA,MACR,KAAO,EAAA;AAAA;AACT,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA;AAAA;AAEV,CAAC","file":"chunk-W2UGL7QI.cjs","sourcesContent":["import { cva, type VariantProps } from 'cva'\nimport Link from 'next/link'\nimport { type ComponentProps } from 'react'\n\nimport { AvatarBase, AvatarFallback, AvatarImage } from '@/components/primitives/avatar'\n\nexport type AvatarProps = VariantProps<typeof avatarVariants> &\n  Omit<ComponentProps<'a'>, 'href'> & {\n    src?: string\n    href?: string\n    name?: string\n  }\n\nexport function Avatar({ size, src, href, name, ...linkProps }: AvatarProps) {\n  const fallbackShort = name?.slice(0, 2)\n  const fallbackWords = name\n    ?.split(' ')\n    .map((n) => n[0])\n    .join('')\n    .slice(0, 2)\n\n  const fallback = fallbackWords && fallbackWords.length > 1 ? fallbackWords : fallbackShort\n\n  const renderAvatar = () => (\n    <AvatarBase className={avatarVariants({ size })}>\n      <AvatarImage src={src} alt={name} />\n      <AvatarFallback>{fallback?.toUpperCase()}</AvatarFallback>\n    </AvatarBase>\n  )\n\n  if (href) {\n    return (\n      <Link href={href} {...linkProps}>\n        {renderAvatar()}\n      </Link>\n    )\n  }\n\n  return renderAvatar()\n}\n\nexport const avatarVariants = cva('ring ring-white ring-2', {\n  variants: {\n    size: {\n      large: 'h-16 w-16',\n      medium: 'h-10 w-10',\n      small: 'h-8 w-8',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n})\n"]}

package/dist/chunk-WFQHWK6X.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var chunkXWQI5MC3_cjs = require('./chunk-XWQI5MC3.cjs');
+var chunkLTJXX7NG_cjs = require('./chunk-LTJXX7NG.cjs');
+var chunkZQFFPZMA_cjs = require('./chunk-ZQFFPZMA.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var InputOtp = react.forwardRef(
+  ({ digits, label, description, error, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "group flex w-full flex-col gap-1",
+        "data-testid": `input-otp-wrapper-${props.id}`,
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(
+            chunkXWQI5MC3_cjs.Label_default,
+            {
+              text: label,
+              htmlFor: props.name,
+              required: props.required,
+              description
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex flex-row items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            chunkZQFFPZMA_cjs.InputOTP,
+            {
+              ref,
+              maxLength: digits,
+              "data-testid": `input-otp-element-${props.id}`,
+              ...props,
+              children: [...Array(digits)].map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(chunkZQFFPZMA_cjs.InputOTPGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                chunkZQFFPZMA_cjs.InputOTPSlot,
+                {
+                  "data-testid": `input-otp-slot-${index}`,
+                  index,
+                  error: Boolean(error)
+                }
+              ) }, index))
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkLTJXX7NG_cjs.ErrorMessage_default, { message: error })
+        ]
+      }
+    );
+  }
+);
+InputOtp.displayName = "Input";
+
+exports.InputOtp = InputOtp;
+//# sourceMappingURL=chunk-WFQHWK6X.cjs.map
+//# sourceMappingURL=chunk-WFQHWK6X.cjs.map

package/dist/chunk-WFQHWK6X.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/InputOtp.tsx"],"names":["forwardRef","jsxs","jsx","Label_default","InputOTP","InputOTPGroup","InputOTPSlot","ErrorMessage_default"],"mappings":";;;;;;;;AAeO,IAAM,QAAW,GAAAA,gBAAA;AAAA,EACtB,CAAC,EAAE,MAAQ,EAAA,KAAA,EAAO,aAAa,KAAO,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AACxD,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,kCAAA;AAAA,QACV,aAAA,EAAa,CAAqB,kBAAA,EAAA,KAAA,CAAM,EAAE,CAAA,CAAA;AAAA,QAEzC,QAAA,EAAA;AAAA,UACC,KAAA,oBAAAC,cAAA;AAAA,YAACC,+BAAA;AAAA,YAAA;AAAA,cACC,IAAM,EAAA,KAAA;AAAA,cACN,SAAS,KAAM,CAAA,IAAA;AAAA,cACf,UAAU,KAAM,CAAA,QAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BAEFD,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,qCACb,EAAA,QAAA,kBAAAA,cAAA;AAAA,YAACE,0BAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,SAAW,EAAA,MAAA;AAAA,cACX,aAAA,EAAa,CAAqB,kBAAA,EAAA,KAAA,CAAM,EAAE,CAAA,CAAA;AAAA,cACzC,GAAG,KAAA;AAAA,cAEH,QAAA,EAAA,CAAC,GAAG,KAAA,CAAM,MAAM,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,KAC1B,qBAAAF,cAAA,CAACG,+BACC,EAAA,EAAA,QAAA,kBAAAH,cAAA;AAAA,gBAACI,8BAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAa,kBAAkB,KAAK,CAAA,CAAA;AAAA,kBACpC,KAAA;AAAA,kBACA,KAAA,EAAO,QAAQ,KAAK;AAAA;AAAA,eACtB,EAAA,EALkB,KAMpB,CACD;AAAA;AAAA,WAEL,EAAA,CAAA;AAAA,0BAEAJ,cAAA,CAACK,sCAAa,EAAA,EAAA,OAAA,EAAS,KAAO,EAAA;AAAA;AAAA;AAAA,KAChC;AAAA;AAGN;AACA,QAAA,CAAS,WAAc,GAAA,OAAA","file":"chunk-WFQHWK6X.cjs","sourcesContent":["import { forwardRef, type InputHTMLAttributes } from 'react'\n\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/primitives/input-otp'\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\n\ninterface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  digits: 4 | 6 | 8\n  value?: string\n  label?: string\n  description?: string\n  error?: string\n  onChange?: (v: string) => void\n}\n\nexport const InputOtp = forwardRef<HTMLInputElement, Props>(\n  ({ digits, label, description, error, ...props }, ref) => {\n    return (\n      <div\n        className=\"group flex w-full flex-col gap-1\"\n        data-testid={`input-otp-wrapper-${props.id}`}\n      >\n        {label && (\n          <Label\n            text={label}\n            htmlFor={props.name}\n            required={props.required}\n            description={description}\n          />\n        )}\n        <div className=\"relative flex flex-row items-center\">\n          <InputOTP\n            ref={ref}\n            maxLength={digits}\n            data-testid={`input-otp-element-${props.id}`}\n            {...props}\n          >\n            {[...Array(digits)].map((_, index) => (\n              <InputOTPGroup key={index}>\n                <InputOTPSlot\n                  data-testid={`input-otp-slot-${index}`}\n                  index={index}\n                  error={Boolean(error)}\n                />\n              </InputOTPGroup>\n            ))}\n          </InputOTP>\n        </div>\n\n        <ErrorMessage message={error} />\n      </div>\n    )\n  }\n)\nInputOtp.displayName = 'Input'\n"]}

package/dist/chunk-WOD47B4V.js

@@ -0,0 +1,154 @@
+import { Chip_default } from './chunk-LQ4DG6ST.js';
+import { BackButton } from './chunk-IJQTUD3D.js';
+import { Avatar } from './chunk-2TEFWPFS.js';
+import { iconMap } from './chunk-PONUWUJ7.js';
+import { cn } from './chunk-2FGZQI42.js';
+import { Dot } from 'lucide-react';
+import Image from 'next/image';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function JobHeader({
+  title,
+  subtitles,
+  standalone,
+  bannerSrc,
+  avatarSrc,
+  avatarName,
+  avatarHref,
+  backFallbackHref,
+  backAcceptedRoutes,
+  actions,
+  tags
+}) {
+  const renderIcon = (icon) => {
+    const Icon = iconMap[icon];
+    return /* @__PURE__ */ jsx(Icon, { size: 18 });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "job-header-root",
+      className: cn(
+        "-mt-8 flex w-full flex-col items-center justify-between gap-6 md:-mt-0",
+        !standalone && "rounded-3xl"
+      ),
+      children: [
+        !standalone && /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-16 w-full items-center rounded-t-3xl bg-transparent md:min-h-24 md:flex-row lg:min-h-32", children: [
+          /* @__PURE__ */ jsx(
+            Image,
+            {
+              className: "h-full w-full rounded-t-3xl object-cover",
+              src: bannerSrc,
+              alt: "job banner",
+              fill: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BackButton,
+            {
+              acceptedRoutes: backAcceptedRoutes,
+              fallbackHref: backFallbackHref,
+              className: "absolute right-2 top-2 flex items-center justify-center text-white sm:hidden",
+              "data-testid": "job-header-back-button"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute left-4 top-8 md:left-6 md:top-16 lg:top-24",
+              "data-testid": "job-header-avatar",
+              children: /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  size: "large",
+                  target: "_blank",
+                  href: avatarHref,
+                  name: avatarName,
+                  src: avatarSrc,
+                  rel: "noopener noreferrer"
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start justify-start gap-4 px-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row", children: [
+            standalone && /* @__PURE__ */ jsx("div", { className: "-mt-4 mr-4 md:mt-0", "data-testid": "job-header-avatar", children: /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                size: "large",
+                target: "_blank",
+                href: avatarHref,
+                name: avatarName,
+                src: avatarSrc,
+                rel: "noopener noreferrer"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "prose mt-4 flex w-full items-center text-grey-80 lg:prose-lg", children: subtitles?.map((subtitle, i) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-testid": `job-header-subtitle-${i}`,
+                className: "flex items-center",
+                children: [
+                  subtitle,
+                  i < subtitles.length - 1 && /* @__PURE__ */ jsx(Dot, { className: "mx-1 shrink-0", size: 10 })
+                ]
+              },
+              subtitle
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-testid": "job-header-content",
+              className: "mt-2 flex w-full flex-row flex-wrap items-center justify-between gap-1",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    "data-testid": "job-header-title",
+                    className: "break-word max-w-full text-2xl font-bold text-black sm:max-w-2xl md:max-w-lg",
+                    children: title
+                  }
+                ),
+                !!actions && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex w-full justify-end gap-2 md:w-auto",
+                    "data-testid": "job-header-actions",
+                    children: actions
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-testid": "job-header-tags",
+              className: "flex flex-row flex-wrap items-center justify-start gap-2",
+              children: tags?.map(({ name, label, icon }) => /* @__PURE__ */ jsxs(
+                Chip_default,
+                {
+                  size: "small",
+                  variant: "neutral",
+                  "aria-label": name,
+                  "data-testid": `job-header-tag-${name}`,
+                  children: [
+                    renderIcon(icon),
+                    /* @__PURE__ */ jsx("span", { children: label })
+                  ]
+                },
+                `${name}-${label}`
+              ))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { JobHeader };
+//# sourceMappingURL=chunk-WOD47B4V.js.map
+//# sourceMappingURL=chunk-WOD47B4V.js.map

package/dist/chunk-WOD47B4V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/jobPost/JobHeader.tsx"],"names":[],"mappings":"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","file":"chunk-WOD47B4V.js","sourcesContent":["'use client'\n\nimport { Dot } from 'lucide-react'\nimport Image from 'next/image'\nimport { type ReactNode } from 'react'\n\nimport { BackButton } from '@/components/buttons/BackButton'\nimport { Avatar } from '@/components/ui/Avatar'\nimport Chip from '@/components/ui/Chip'\nimport { iconMap } from '@/lib/icons'\nimport { cn } from '@/lib/utils'\n\nexport type JobHeaderTag = {\n  name: string\n  label: string\n  icon: keyof typeof iconMap\n}\n\nexport type JobHeaderProps = {\n  title: string\n  bannerSrc: string\n  subtitles?: string[]\n  standalone?: boolean\n  avatarSrc?: string\n  avatarName?: string\n  avatarHref?: string\n  backFallbackHref?: string\n  backAcceptedRoutes?: string[]\n  actions?: ReactNode\n  tags?: JobHeaderTag[]\n}\n\nexport function JobHeader({\n  title,\n  subtitles,\n  standalone,\n  bannerSrc,\n  avatarSrc,\n  avatarName,\n  avatarHref,\n  backFallbackHref,\n  backAcceptedRoutes,\n  actions,\n  tags,\n}: Readonly<JobHeaderProps>) {\n  const renderIcon = (icon: JobHeaderTag['icon']) => {\n    const Icon = iconMap[icon]\n    return <Icon size={18} />\n  }\n\n  return (\n    <div\n      data-testid=\"job-header-root\"\n      className={cn(\n        '-mt-8 flex w-full flex-col items-center justify-between gap-6 md:-mt-0',\n        !standalone && 'rounded-3xl'\n      )}\n    >\n      {!standalone && (\n        <div className=\"relative flex min-h-16 w-full items-center rounded-t-3xl bg-transparent md:min-h-24 md:flex-row lg:min-h-32\">\n          <Image\n            className=\"h-full w-full rounded-t-3xl object-cover\"\n            src={bannerSrc}\n            alt=\"job banner\"\n            fill\n          />\n          <BackButton\n            acceptedRoutes={backAcceptedRoutes}\n            fallbackHref={backFallbackHref}\n            className=\"absolute right-2 top-2 flex items-center justify-center text-white sm:hidden\"\n            data-testid=\"job-header-back-button\"\n          />\n          <div\n            className=\"absolute left-4 top-8 md:left-6 md:top-16 lg:top-24\"\n            data-testid=\"job-header-avatar\"\n          >\n            <Avatar\n              size=\"large\"\n              target=\"_blank\"\n              href={avatarHref}\n              name={avatarName}\n              src={avatarSrc}\n              rel=\"noopener noreferrer\"\n            />\n          </div>\n        </div>\n      )}\n\n      <div className=\"flex w-full flex-col items-start justify-start gap-4 px-6\">\n        <div className=\"flex flex-col md:flex-row\">\n          {standalone && (\n            <div className=\"-mt-4 mr-4 md:mt-0\" data-testid=\"job-header-avatar\">\n              <Avatar\n                size=\"large\"\n                target=\"_blank\"\n                href={avatarHref}\n                name={avatarName}\n                src={avatarSrc}\n                rel=\"noopener noreferrer\"\n              />\n            </div>\n          )}\n\n          <div className=\"prose mt-4 flex w-full items-center text-grey-80 lg:prose-lg\">\n            {subtitles?.map((subtitle, i) => (\n              <div\n                key={subtitle}\n                data-testid={`job-header-subtitle-${i}`}\n                className=\"flex items-center\"\n              >\n                {subtitle}\n                {i < subtitles.length - 1 && <Dot className=\"mx-1 shrink-0\" size={10} />}\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div\n          data-testid=\"job-header-content\"\n          className=\"mt-2 flex w-full flex-row flex-wrap items-center justify-between gap-1\"\n        >\n          <h2\n            data-testid=\"job-header-title\"\n            className=\"break-word max-w-full text-2xl font-bold text-black sm:max-w-2xl md:max-w-lg\"\n          >\n            {title}\n          </h2>\n\n          {!!actions && (\n            <div\n              className=\"flex w-full justify-end gap-2 md:w-auto\"\n              data-testid=\"job-header-actions\"\n            >\n              {actions}\n            </div>\n          )}\n        </div>\n\n        <div\n          data-testid=\"job-header-tags\"\n          className=\"flex flex-row flex-wrap items-center justify-start gap-2\"\n        >\n          {tags?.map(({ name, label, icon }) => (\n            <Chip\n              key={`${name}-${label}`}\n              size=\"small\"\n              variant=\"neutral\"\n              aria-label={name}\n              data-testid={`job-header-tag-${name}`}\n            >\n              {renderIcon(icon)}\n              <span>{label}</span>\n            </Chip>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n"]}