@dragunio/fe-libs 0.1.7 → 0.1.9

package/README.md

@@ -9,6 +9,7 @@ src/                 # Public library entrypoints and styles
 packages/            # Internal component source folders
 ├── icons/
 ├── button/
+├── tabs/
 ├── table/
 ├── toggle/
 ├── drawer/
@@ -47,12 +48,16 @@ Available review routes:
 - `http://127.0.0.1:3000/#/` — overview
 - `http://127.0.0.1:3000/#/icons` — SVG Icons
 - `http://127.0.0.1:3000/#/button` — Button
+- `http://127.0.0.1:3000/#/button-bar` — Button Bar
+- `http://127.0.0.1:3000/#/tabs` — Tabs & Segments
 - `http://127.0.0.1:3000/#/table` — Table
 - `http://127.0.0.1:3000/#/drawer` — Drawer
 - `http://127.0.0.1:3000/#/selection` — Selection
 - `http://127.0.0.1:3000/#/datetime` — DateTimePicker
 - `http://127.0.0.1:3000/#/currency` — CurrencyInput
 - `http://127.0.0.1:3000/#/number` — NumberInput
+- `http://127.0.0.1:3000/#/file-upload` — FileUpload
+- `http://127.0.0.1:3000/#/file-preview` — FilePreview
 - `http://127.0.0.1:3000/#/tooltip` — Tooltip
 - `http://127.0.0.1:3000/#/expandable` — ExpandableSection
 - `http://127.0.0.1:3000/#/loading` — Loading
@@ -62,6 +67,7 @@ Available review routes:
 - `http://127.0.0.1:3000/#/chip` — Chip
 - `http://127.0.0.1:3000/#/avatar` — Avatar
 - `http://127.0.0.1:3000/#/text-input` — TextInput & TextArea
+- `http://127.0.0.1:3000/#/validated-inputs` — EmailInput, PasswordInput & PhoneNumberInput
 - `http://127.0.0.1:3000/#/pagination` — Pagination
 - `http://127.0.0.1:3000/#/message` — Message
 - `http://127.0.0.1:3000/#/snackbar` — Snackbar
@@ -78,6 +84,12 @@ To verify a production-like consumer build:
 pnpm build
 ```
 
+## Security review note
+
+The playground may be exposed through a short-lived Vite tunnel for external manual testing. Treat a shared tunnel link as public for as long as the tunnel is running: do not place secrets, credentials, private IP addresses, internal API details, authorization headers, or sensitive response fixtures in the demo source. `VITE_*` values are client-side values and must not contain secrets.
+
+Proposed automated safeguard (not installed yet): run a pre-commit scan only on staged files and block the commit when it finds common credentials, `.env` content, private network details, or sensitive API configuration. This should normally take less than a second for a small staged change and has no ongoing runtime cost. A dedicated secret scanner in CI can be added later to catch commits that bypass the local hook; a unit test is not a reliable secret-detection mechanism.
+
 ## Consuming the published library
 
 ```bash
@@ -89,6 +101,7 @@ import {
   Button,
   PlusIcon,
   Table,
+  Tabs,
   Toggle,
   Checkbox,
   RadioButton,
@@ -99,6 +112,25 @@ import {
 import '@dragunio/fe-libs/styles.css';
 ```
 
+### Tabs and segments
+
+`Tabs` divides related content into accessible tabs and supports `variant="tab"` (the default underline style) or `variant="segment"`. It can be controlled with `value` or used uncontrolled with `defaultValue`. When labels overflow, the tab list scrolls horizontally; `scrollButtons="auto"` reveals arrow controls only when needed, while the chosen tab is automatically scrolled into view.
+
+```tsx
+const [section, setSection] = useState('overview');
+
+<Tabs
+  aria-label="Project sections"
+  value={section}
+  onChange={(value) => setSection(value)}
+  items={[
+    { id: 'overview', label: 'Overview', content: <Overview /> },
+    { id: 'activity', label: 'Activity', content: <Activity /> },
+    { id: 'members', label: 'Members', content: <Members /> },
+  ]}
+/>;
+```
+
 ### Toggle
 
 `Toggle` is a native checkbox styled as a switch. It supports controlled and uncontrolled usage, including the standard `onChange`, `onClick`, and `disabled` props. The active color is green by default and accepts any CSS color. Use `labelPosition="top"` to render its label above the switch; `right` is the default.
@@ -162,14 +194,17 @@ The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a
 
 ### New form and overlay primitives
 
-- `Drawer` is a portal-based modal panel with `left`, `right`, `top`, and `bottom` slide-in animations. Use `fullScreen` for a full-viewport panel and `footer` for fixed actions below the scrollable body.
+- `Drawer` is a portal-based modal panel with `left`, `right`, `top`, and `bottom` slide-in animations. Use `DrawerWidths.small`, `.medium`, or `.large` (360px, 400px, 480px) with `width`, or provide any custom CSS width. Use `fullScreen` for a full-viewport panel and `footer` for fixed actions below the scrollable body. It automatically adapts to smaller screens: side drawers use the available viewport width, while top and bottom drawers become sheet-style panels.
 - `Selection` is a rounded custom dropdown inspired by DropdownCustom, with single/multiple modes, optional search, clear action, tags, form-field values, and keyboard navigation.
 - `DateTimePicker` supports `mode="single"` and `mode="range"`; its default format is `dd/MM/yyyy HH:mm`.
 - `NumberInput` and `CurrencyInput` format values immediately while typing (`1000` → `1,000`) and keep up to two fractional digits by default. Both include accessible up/down controls (and arrow-key support); use `step` or `showStepper` to configure them. `NumberInput` also accepts `prefix`/`suffix` adornments. Use `allowDecimal`, `decimals`, `min`, and `max` to control decimal input and numeric limits. Both support `error` and `errorMessage` with the same red border/message treatment as `TextInput`. `CurrencyInput` adds a `VND` suffix by default, or a currency dropdown through `currencies`.
+- `FileUpload` accepts browser `File` objects from selecting or dropping files. Choose its preset `accept` groups—such as `image`, `pdf`, `document`, `audio`, and `video`—instead of manually assembling MIME patterns; it validates them with `maxSize`, `maxFiles`, and duplicate checks locally, then emits `onChange`, `onAccept`, `onReject`, and `onRemove` synchronously. It deliberately contains no endpoint, request, `async`, or upload-progress behavior.
+- `FilePreview` is a local, portal-based File viewer. It displays the current file count in its backdrop header, supports buttons and ArrowLeft/ArrowRight navigation, calls `onEscape` then `onClose('escape')`, and reports `onDelete`/`onDownload` with the active `File`. Its Download action starts a direct local browser download—there is no endpoint or transport behavior.
 - `Tooltip` shows accessible content on hover and focus.
 - `ExpandableSection` provides controlled and uncontrolled expand/collapse behavior.
 - `TextInput` and `TextArea` support `error`/`errorMessage`, `helperText`, `clearable`, `onClear`, and `onValueChange`. `TextArea` also accepts `autosize` (default `false`) to grow with its content. `TextInput` also accepts `label`, `isRequired`, and `prefix`/`suffix` adornments. Passing a string to `error` shows it below the field and applies the error border.
-- `Modal` is a centered portal dialog in `small`, `medium`, `large`, `xlarge`, and `full` sizes. Its close control and `actions` are library `Button` instances.
+- `EmailInput`, `PasswordInput`, and `PhoneNumberInput` add their standard mailbox, show/hide password, and phone adornments. They validate their formats on blur by default; use `validateOn="change"` for immediate feedback and `validate={(value) => ...}` for an additional rule. Passwords require at least eight characters including uppercase, lowercase, and a number; phone numbers accept digits, spaces, parentheses, and plus signs, and require 7–15 digits.
+- `Modal` is a centered portal dialog in `small`, `medium`, `large`, `xlarge`, and `full` sizes. Its close control and `actions` are library `Button` instances. Modal and Drawer trap keyboard focus, lock background scrolling, return focus to their opener, and respect reduced-motion preferences. Use `initialFocusRef`, `restoreFocus`, `closeOnEscape`, and `closeOnBackdropClick` to customize that behavior.
 - `Loading` provides `small`, `medium`, and `large` circular indicators (or a custom pixel `size`); use `Skeleton.Circle` and `Skeleton.Square` with `size`, or `Skeleton.Box` and `Skeleton.Line` with `width` and `height`.
 - `ProgressBar` is determinate when `value` is supplied and renders an indeterminate back-and-forth animation when it is omitted.
 - `Chip` supports the standard `default`, `success`, `error`, `info`, and `warning` palettes, plus `color` for any CSS color and `subtle`, `solid`, or `outline` variants.
@@ -190,6 +225,17 @@ The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a
   clearable
 />
 
+<EmailInput
+  label="Work email"
+  value={email}
+  onValueChange={setEmail}
+  validate={(value) =>
+    value.endsWith('@dragunio.com') || 'Use your work email.'
+  }
+/>
+<PasswordInput label="Password" />
+<PhoneNumberInput label="Phone number" placeholder="+84 (123) 456 789" />
+
 <ProgressBar label="Upload" value={72} />
 <ProgressBar label="Synchronising" />
 <Chip status="success" dot>Complete</Chip>

package/dist/{chunk-GT4546FD.mjs → chunk-BAZJ5UJ5.mjs}

@@ -52,16 +52,16 @@ var iconProps2 = ({ size, ...props }) => ({
   ...props
 });
 var chevron_right = (props) => {
-  return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.39898 5.39898C8.73093 5.06704 9.26912 5.06704 9.60107 5.39898L15.6011 11.399C15.933 11.7309 15.933 12.2691 15.6011 12.6011L9.60107 18.6011C9.26912 18.933 8.73093 18.933 8.39898 18.6011C8.06704 18.2691 8.06704 17.7309 8.39898 17.399L13.7979 12L8.39898 6.60107C8.06704 6.26912 8.06704 5.73093 8.39898 5.39898Z", fill: props.fill }) });
+  return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.39898 5.39898C8.73093 5.06704 9.26912 5.06704 9.60107 5.39898L15.6011 11.399C15.933 11.7309 15.933 12.2691 15.6011 12.6011L9.60107 18.6011C9.26912 18.933 8.73093 18.933 8.39898 18.6011C8.06704 18.2691 8.06704 17.7309 8.39898 17.399L13.7979 12L8.39898 6.60107C8.06704 6.26912 8.06704 5.73093 8.39898 5.39898Z", fill: props.fill }) });
 };
 var chevron_up = (props) => {
-  return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.399 8.39898C11.7309 8.06704 12.2691 8.06704 12.6011 8.39898L18.6011 14.399C18.933 14.7309 18.933 15.2691 18.6011 15.6011C18.2691 15.933 17.7309 15.933 17.399 15.6011L12 10.2021L6.60107 15.6011C6.26912 15.933 5.73093 15.933 5.39898 15.6011C5.06704 15.2691 5.06704 14.7309 5.39898 14.399L11.399 8.39898Z", fill: "#101828" }) });
+  return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.399 8.39898C11.7309 8.06704 12.2691 8.06704 12.6011 8.39898L18.6011 14.399C18.933 14.7309 18.933 15.2691 18.6011 15.6011C18.2691 15.933 17.7309 15.933 17.399 15.6011L12 10.2021L6.60107 15.6011C6.26912 15.933 5.73093 15.933 5.39898 15.6011C5.06704 15.2691 5.06704 14.7309 5.39898 14.399L11.399 8.39898Z", fill: "#101828" }) });
 };
 var chevron_left = (props) => {
-  return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.6011 5.39898C15.933 5.73093 15.933 6.26912 15.6011 6.60107L10.2021 12L15.6011 17.399C15.933 17.7309 15.933 18.2691 15.6011 18.6011C15.2691 18.933 14.7309 18.933 14.399 18.6011L8.39898 12.6011C8.06704 12.2691 8.06704 11.7309 8.39898 11.399L14.399 5.39898C14.7309 5.06704 15.2691 5.06704 15.6011 5.39898Z", fill: "#101828" }) });
+  return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.6011 5.39898C15.933 5.73093 15.933 6.26912 15.6011 6.60107L10.2021 12L15.6011 17.399C15.933 17.7309 15.933 18.2691 15.6011 18.6011C15.2691 18.933 14.7309 18.933 14.399 18.6011L8.39898 12.6011C8.06704 12.2691 8.06704 11.7309 8.39898 11.399L14.399 5.39898C14.7309 5.06704 15.2691 5.06704 15.6011 5.39898Z", fill: "#101828" }) });
 };
 var chevron_down = (props) => {
-  return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.39898 8.39898C5.73093 8.06704 6.26912 8.06704 6.60107 8.39898L12 13.7979L17.399 8.39898C17.7309 8.06704 18.2691 8.06704 18.6011 8.39898C18.933 8.73093 18.933 9.26912 18.6011 9.60107L12.6011 15.6011C12.2691 15.933 11.7309 15.933 11.399 15.6011L5.39898 9.60107C5.06704 9.26912 5.06704 8.73093 5.39898 8.39898Z", fill: "#101828" }) });
+  return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.39898 8.39898C5.73093 8.06704 6.26912 8.06704 6.60107 8.39898L12 13.7979L17.399 8.39898C17.7309 8.06704 18.2691 8.06704 18.6011 8.39898C18.933 8.73093 18.933 9.26912 18.6011 9.60107L12.6011 15.6011C12.2691 15.933 11.7309 15.933 11.399 15.6011L5.39898 9.60107C5.06704 9.26912 5.06704 8.73093 5.39898 8.39898Z", fill: "#101828" }) });
 };
 
 // packages/icons/src/svgItems/security.tsx
@@ -169,6 +169,82 @@ function SearchIcon(props) {
     )
   ] });
 }
+function MailboxIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ jsx4(
+      "rect",
+      {
+        x: "3.5",
+        y: "5.5",
+        width: "17",
+        height: "13",
+        rx: "2",
+        stroke: "currentColor",
+        strokeWidth: "1.8"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "m4.5 7 6.04 4.53a2.4 2.4 0 0 0 2.92 0L19.5 7",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function PhoneIcon(props) {
+  return /* @__PURE__ */ jsx4("svg", { ...iconProps4(props), children: /* @__PURE__ */ jsx4(
+    "path",
+    {
+      d: "M8.05 3.75 5.84 4.8c-.76.36-1.15 1.2-.94 2.02 1.55 6.14 6.34 10.93 12.48 12.48.82.21 1.66-.18 2.02-.94l1.05-2.21a1.5 1.5 0 0 0-.57-1.91l-2.41-1.48a1.5 1.5 0 0 0-1.8.18l-1.23 1.06a10.38 10.38 0 0 1-4.45-4.45l1.06-1.23a1.5 1.5 0 0 0 .18-1.8L9.96 4.32a1.5 1.5 0 0 0-1.91-.57Z",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function EyeIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "M2.9 12s3.1-5 9.1-5 9.1 5 9.1 5-3.1 5-9.1 5-9.1-5-9.1-5Z",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "2.4", stroke: "currentColor", strokeWidth: "1.8" })
+  ] });
+}
+function EyeOffIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "M10.58 7.16A6.1 6.1 0 0 1 12 7c6 0 9.1 5 9.1 5a16.1 16.1 0 0 1-2.54 2.84M13.28 16.83A6.1 6.1 0 0 1 12 17c-6 0-9.1-5-9.1-5a16.1 16.1 0 0 1 2.59-2.87",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "m3.5 3.5 17 17M10.1 10.1a2.7 2.7 0 0 0 3.8 3.8",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
 
 export {
   plus,
@@ -194,5 +270,9 @@ export {
   CloseIcon,
   MoreHorizontalIcon,
   MoreVerticalIcon,
-  SearchIcon
+  SearchIcon,
+  MailboxIcon,
+  PhoneIcon,
+  EyeIcon,
+  EyeOffIcon
 };

package/dist/icons.d.mts

@@ -31,5 +31,9 @@ declare function CloseIcon(props: IconProps): react.JSX.Element;
 declare function MoreHorizontalIcon(props: IconProps): react.JSX.Element;
 declare function MoreVerticalIcon(props: IconProps): react.JSX.Element;
 declare function SearchIcon(props: IconProps): react.JSX.Element;
+declare function MailboxIcon(props: IconProps): react.JSX.Element;
+declare function PhoneIcon(props: IconProps): react.JSX.Element;
+declare function EyeIcon(props: IconProps): react.JSX.Element;
+declare function EyeOffIcon(props: IconProps): react.JSX.Element;
 
-export { ChevronDownIcon, ChevronUpIcon, CloseIcon, type IconProps, MoreHorizontalIcon, MoreVerticalIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };
+export { ChevronDownIcon, ChevronUpIcon, CloseIcon, EyeIcon, EyeOffIcon, type IconProps, MailboxIcon, MoreHorizontalIcon, MoreVerticalIcon, PhoneIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };

package/dist/icons.d.ts

@@ -31,5 +31,9 @@ declare function CloseIcon(props: IconProps): react.JSX.Element;
 declare function MoreHorizontalIcon(props: IconProps): react.JSX.Element;
 declare function MoreVerticalIcon(props: IconProps): react.JSX.Element;
 declare function SearchIcon(props: IconProps): react.JSX.Element;
+declare function MailboxIcon(props: IconProps): react.JSX.Element;
+declare function PhoneIcon(props: IconProps): react.JSX.Element;
+declare function EyeIcon(props: IconProps): react.JSX.Element;
+declare function EyeOffIcon(props: IconProps): react.JSX.Element;
 
-export { ChevronDownIcon, ChevronUpIcon, CloseIcon, type IconProps, MoreHorizontalIcon, MoreVerticalIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };
+export { ChevronDownIcon, ChevronUpIcon, CloseIcon, EyeIcon, EyeOffIcon, type IconProps, MailboxIcon, MoreHorizontalIcon, MoreVerticalIcon, PhoneIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };

package/dist/icons.js

@@ -23,8 +23,12 @@ __export(icons_exports, {
   ChevronDownIcon: () => ChevronDownIcon,
   ChevronUpIcon: () => ChevronUpIcon,
   CloseIcon: () => CloseIcon,
+  EyeIcon: () => EyeIcon,
+  EyeOffIcon: () => EyeOffIcon,
+  MailboxIcon: () => MailboxIcon,
   MoreHorizontalIcon: () => MoreHorizontalIcon,
   MoreVerticalIcon: () => MoreVerticalIcon,
+  PhoneIcon: () => PhoneIcon,
   PlusIcon: () => PlusIcon,
   SearchIcon: () => SearchIcon,
   arrow_left: () => arrow_left,
@@ -101,16 +105,16 @@ var iconProps2 = ({ size, ...props }) => ({
   ...props
 });
 var chevron_right = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.39898 5.39898C8.73093 5.06704 9.26912 5.06704 9.60107 5.39898L15.6011 11.399C15.933 11.7309 15.933 12.2691 15.6011 12.6011L9.60107 18.6011C9.26912 18.933 8.73093 18.933 8.39898 18.6011C8.06704 18.2691 8.06704 17.7309 8.39898 17.399L13.7979 12L8.39898 6.60107C8.06704 6.26912 8.06704 5.73093 8.39898 5.39898Z", fill: props.fill }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.39898 5.39898C8.73093 5.06704 9.26912 5.06704 9.60107 5.39898L15.6011 11.399C15.933 11.7309 15.933 12.2691 15.6011 12.6011L9.60107 18.6011C9.26912 18.933 8.73093 18.933 8.39898 18.6011C8.06704 18.2691 8.06704 17.7309 8.39898 17.399L13.7979 12L8.39898 6.60107C8.06704 6.26912 8.06704 5.73093 8.39898 5.39898Z", fill: props.fill }) });
 };
 var chevron_up = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.399 8.39898C11.7309 8.06704 12.2691 8.06704 12.6011 8.39898L18.6011 14.399C18.933 14.7309 18.933 15.2691 18.6011 15.6011C18.2691 15.933 17.7309 15.933 17.399 15.6011L12 10.2021L6.60107 15.6011C6.26912 15.933 5.73093 15.933 5.39898 15.6011C5.06704 15.2691 5.06704 14.7309 5.39898 14.399L11.399 8.39898Z", fill: "#101828" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.399 8.39898C11.7309 8.06704 12.2691 8.06704 12.6011 8.39898L18.6011 14.399C18.933 14.7309 18.933 15.2691 18.6011 15.6011C18.2691 15.933 17.7309 15.933 17.399 15.6011L12 10.2021L6.60107 15.6011C6.26912 15.933 5.73093 15.933 5.39898 15.6011C5.06704 15.2691 5.06704 14.7309 5.39898 14.399L11.399 8.39898Z", fill: "#101828" }) });
 };
 var chevron_left = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.6011 5.39898C15.933 5.73093 15.933 6.26912 15.6011 6.60107L10.2021 12L15.6011 17.399C15.933 17.7309 15.933 18.2691 15.6011 18.6011C15.2691 18.933 14.7309 18.933 14.399 18.6011L8.39898 12.6011C8.06704 12.2691 8.06704 11.7309 8.39898 11.399L14.399 5.39898C14.7309 5.06704 15.2691 5.06704 15.6011 5.39898Z", fill: "#101828" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.6011 5.39898C15.933 5.73093 15.933 6.26912 15.6011 6.60107L10.2021 12L15.6011 17.399C15.933 17.7309 15.933 18.2691 15.6011 18.6011C15.2691 18.933 14.7309 18.933 14.399 18.6011L8.39898 12.6011C8.06704 12.2691 8.06704 11.7309 8.39898 11.399L14.399 5.39898C14.7309 5.06704 15.2691 5.06704 15.6011 5.39898Z", fill: "#101828" }) });
 };
 var chevron_down = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.39898 8.39898C5.73093 8.06704 6.26912 8.06704 6.60107 8.39898L12 13.7979L17.399 8.39898C17.7309 8.06704 18.2691 8.06704 18.6011 8.39898C18.933 8.73093 18.933 9.26912 18.6011 9.60107L12.6011 15.6011C12.2691 15.933 11.7309 15.933 11.399 15.6011L5.39898 9.60107C5.06704 9.26912 5.06704 8.73093 5.39898 8.39898Z", fill: "#101828" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.39898 8.39898C5.73093 8.06704 6.26912 8.06704 6.60107 8.39898L12 13.7979L17.399 8.39898C17.7309 8.06704 18.2691 8.06704 18.6011 8.39898C18.933 8.73093 18.933 9.26912 18.6011 9.60107L12.6011 15.6011C12.2691 15.933 11.7309 15.933 11.399 15.6011L5.39898 9.60107C5.06704 9.26912 5.06704 8.73093 5.39898 8.39898Z", fill: "#101828" }) });
 };
 
 // packages/icons/src/svgItems/security.tsx
@@ -218,13 +222,93 @@ function SearchIcon(props) {
     )
   ] });
 }
+function MailboxIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "rect",
+      {
+        x: "3.5",
+        y: "5.5",
+        width: "17",
+        height: "13",
+        rx: "2",
+        stroke: "currentColor",
+        strokeWidth: "1.8"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "m4.5 7 6.04 4.53a2.4 2.4 0 0 0 2.92 0L19.5 7",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function PhoneIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...iconProps4(props), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "path",
+    {
+      d: "M8.05 3.75 5.84 4.8c-.76.36-1.15 1.2-.94 2.02 1.55 6.14 6.34 10.93 12.48 12.48.82.21 1.66-.18 2.02-.94l1.05-2.21a1.5 1.5 0 0 0-.57-1.91l-2.41-1.48a1.5 1.5 0 0 0-1.8.18l-1.23 1.06a10.38 10.38 0 0 1-4.45-4.45l1.06-1.23a1.5 1.5 0 0 0 .18-1.8L9.96 4.32a1.5 1.5 0 0 0-1.91-.57Z",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function EyeIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "M2.9 12s3.1-5 9.1-5 9.1 5 9.1 5-3.1 5-9.1 5-9.1-5-9.1-5Z",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "2.4", stroke: "currentColor", strokeWidth: "1.8" })
+  ] });
+}
+function EyeOffIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "M10.58 7.16A6.1 6.1 0 0 1 12 7c6 0 9.1 5 9.1 5a16.1 16.1 0 0 1-2.54 2.84M13.28 16.83A6.1 6.1 0 0 1 12 17c-6 0-9.1-5-9.1-5a16.1 16.1 0 0 1 2.59-2.87",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "m3.5 3.5 17 17M10.1 10.1a2.7 2.7 0 0 0 3.8 3.8",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ChevronDownIcon,
   ChevronUpIcon,
   CloseIcon,
+  EyeIcon,
+  EyeOffIcon,
+  MailboxIcon,
   MoreHorizontalIcon,
   MoreVerticalIcon,
+  PhoneIcon,
   PlusIcon,
   SearchIcon,
   arrow_left,

package/dist/icons.mjs

@@ -2,8 +2,12 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
   CloseIcon,
+  EyeIcon,
+  EyeOffIcon,
+  MailboxIcon,
   MoreHorizontalIcon,
   MoreVerticalIcon,
+  PhoneIcon,
   PlusIcon,
   SearchIcon,
   arrow_left,
@@ -23,13 +27,17 @@ import {
   search,
   trash,
   x_close
-} from "./chunk-GT4546FD.mjs";
+} from "./chunk-BAZJ5UJ5.mjs";
 export {
   ChevronDownIcon,
   ChevronUpIcon,
   CloseIcon,
+  EyeIcon,
+  EyeOffIcon,
+  MailboxIcon,
   MoreHorizontalIcon,
   MoreVerticalIcon,
+  PhoneIcon,
   PlusIcon,
   SearchIcon,
   arrow_left,