@ecohouse/ui 0.1.31 → 0.1.33

package/src/icons/CottageDetail/index.ts

@@ -3,6 +3,7 @@ export {
   CheckSuccessIcon,
   ClockFilledIcon,
   CopyIcon,
+  DownloadIcon,
   QrCodeIcon,
   ShareIcon,
   TooltipArrowIcon,

package/src/icons/Edit/EditIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { EDIT_PATH } from "./editPath";
+
+export function EditIcon({ size = 12, color = colors.grey0, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={EDIT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export { EDIT_PATH } from "./editPath";

package/src/icons/Edit/EditIcon.web.tsx

@@ -0,0 +1,19 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { EDIT_PATH } from "./editPath";
+
+export function EditIcon({ size = 12, color = colors.grey0, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path
+        d={EDIT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { EDIT_PATH } from "./editPath";

package/src/icons/Edit/editPath.ts

@@ -0,0 +1,3 @@
+/** Lucide-style square-pen — viewBox 0 0 24 24. */
+export const EDIT_PATH =
+  "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.375 2.625a2.121 2.121 0 1 1 3 3L12.15 13.85a.75.75 0 0 1-.33.2l-3.07.8a.5.5 0 0 1-.61-.61l.8-3.07a.75.75 0 0 1 .2-.33z";

package/src/icons/Edit/index.ts

@@ -0,0 +1 @@
+export { EditIcon, EDIT_PATH } from "./EditIcon";

package/src/icons/Fullscreen/FullscreenIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { FULLSCREEN_PATH } from "./fullscreenPath";
+
+export { FULLSCREEN_PATH } from "./fullscreenPath";
+
+/** Four-corner fullscreen / maximize control (24×24 viewBox). */
+export function FullscreenIcon({ size = 24, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={FULLSCREEN_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Fullscreen/fullscreenPath.ts

@@ -0,0 +1,2 @@
+export const FULLSCREEN_PATH =
+  "M16 8L21 3M21 8V3H16M8 8L3 3M8 3L3 3L3 8M8 16L3 21M3 16L3 21H8M16 16L21 21M16 21H21V16";

package/src/icons/Fullscreen/index.ts

@@ -0,0 +1 @@
+export { FullscreenIcon, FULLSCREEN_PATH } from "./FullscreenIcon";

package/src/icons/Home/homePath.ts

@@ -1,2 +1,2 @@
 export const HOME_PATH =
-  "M1.66675 16.6667H3.33341M3.33341 16.6667H8.33341M3.33341 16.6667V9.54352C3.33341 9.09823 3.33341 8.87548 3.38756 8.66828C3.43554 8.48466 3.51491 8.31089 3.6215 8.15387C3.74178 7.97668 3.90895 7.82974 4.24406 7.53652L8.24538 4.03537C8.86662 3.49178 9.17726 3.21997 9.5271 3.11652C9.83559 3.02529 10.1644 3.02529 10.4729 3.11652C10.823 3.22005 11.1341 3.49212 11.7563 4.03652L15.7563 7.53652C16.0914 7.82974 16.2586 7.97668 16.3789 8.15387C16.4855 8.31089 16.5642 8.48466 16.6122 8.66828C16.6664 8.87548 16.6667 9.09824 16.6667 9.54352V16.6667M8.33341 16.6667H11.6667M8.33341 16.6667V13.3334C8.33341 12.4129 9.07961 11.6667 10.0001 11.6667C10.9206 11.6667 11.6667 12.4129 11.6667 13.3334V16.6667M11.6667 16.6667H16.6667M16.6667 16.6667H18.3334";
+  "M6.77168 11.6663C7.14172 13.104 8.4468 14.1663 10 14.1663C11.5532 14.1663 12.8583 13.104 13.2283 11.6663M9.18141 2.30297L3.52949 6.6989C3.15168 6.99276 2.96278 7.13968 2.82669 7.32368C2.70614 7.48667 2.61633 7.67029 2.56169 7.86551C2.5 8.0859 2.5 8.32521 2.5 8.80384V14.833C2.5 15.7664 2.5 16.2331 2.68166 16.5896C2.84144 16.9032 3.09641 17.1582 3.41002 17.318C3.76654 17.4996 4.23325 17.4996 5.16667 17.4996H14.8333C15.7668 17.4996 16.2335 17.4996 16.59 17.318C16.9036 17.1582 17.1586 16.9032 17.3183 16.5896C17.5 16.2331 17.5 15.7664 17.5 14.833V8.80384C17.5 8.32521 17.5 8.0859 17.4383 7.86551C17.3837 7.67029 17.2939 7.48667 17.1733 7.32368C17.0372 7.13968 16.8483 6.99276 16.4705 6.69891L10.8186 2.30297C10.5258 2.07526 10.3794 1.9614 10.2178 1.91763C10.0752 1.87902 9.92484 1.87902 9.78221 1.91763C9.62057 1.9614 9.47418 2.07526 9.18141 2.30297Z";

package/src/icons/HouseRules/HouseRulesIcons.tsx

@@ -0,0 +1,62 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { NO_SMOKING_PATHS, PAW_PATHS, QUIET_HOURS_PATH, TRASH_PATH } from "./houseRulesPaths";
+
+export function QuietHoursIcon({ size = 20, color = colors.white }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path d={QUIET_HOURS_PATH} fill={color} />
+    </Svg>
+  );
+}
+
+export function NoSmokingIcon({ size = 20, color = colors.white, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      {NO_SMOKING_PATHS.map((d) => (
+        <Path
+          key={d}
+          d={d}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      ))}
+    </Svg>
+  );
+}
+
+export function PawIcon({ size = 20, color = colors.white, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      {PAW_PATHS.map((d) => (
+        <Path
+          key={d}
+          d={d}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      ))}
+    </Svg>
+  );
+}
+
+export function TrashIcon({ size = 20, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={TRASH_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export * from "./houseRulesPaths";

package/src/icons/HouseRules/HouseRulesIcons.web.tsx

@@ -0,0 +1,61 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { NO_SMOKING_PATHS, PAW_PATHS, QUIET_HOURS_PATH, TRASH_PATH } from "./houseRulesPaths";
+
+export function QuietHoursIcon({ size = 20, color = colors.white }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path d={QUIET_HOURS_PATH} fill={color} />
+    </svg>
+  );
+}
+
+export function NoSmokingIcon({ size = 20, color = colors.white, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden>
+      {NO_SMOKING_PATHS.map((d) => (
+        <path
+          key={d}
+          d={d}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      ))}
+    </svg>
+  );
+}
+
+export function PawIcon({ size = 20, color = colors.white, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden>
+      {PAW_PATHS.map((d) => (
+        <path
+          key={d}
+          d={d}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      ))}
+    </svg>
+  );
+}
+
+export function TrashIcon({ size = 20, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path
+        d={TRASH_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export * from "./houseRulesPaths";

package/src/icons/HouseRules/houseRulesPaths.ts

@@ -0,0 +1,24 @@
+/** Quiet-hours clock — filled, 20×20 viewBox. */
+export const QUIET_HOURS_PATH =
+  "M9.99935 4.99996C9.88991 4.99993 9.78153 5.02147 9.68042 5.06334C9.5793 5.1052 9.48742 5.16659 9.41003 5.24397C9.33265 5.32136 9.27126 5.41324 9.2294 5.51436C9.18753 5.61547 9.16599 5.72385 9.16602 5.83329V8.55628L8.2513 8.02812C8.05987 7.91775 7.83243 7.88791 7.61901 7.94518C7.40558 8.00245 7.22363 8.14213 7.11316 8.33351C7.00269 8.52489 6.97274 8.7523 7.0299 8.96576C7.08706 9.17921 7.22665 9.36123 7.41797 9.4718L9.58269 10.7218C9.70938 10.7949 9.8531 10.8335 9.99939 10.8334C10.1457 10.8334 10.2894 10.7949 10.4161 10.7218C10.5428 10.6486 10.648 10.5434 10.7211 10.4167C10.7942 10.29 10.8327 10.1463 10.8327 9.99996V5.83329C10.8327 5.72385 10.8112 5.61547 10.7693 5.51436C10.7274 5.41324 10.6661 5.32136 10.5887 5.24397C10.5113 5.16659 10.4194 5.1052 10.3183 5.06334C10.2172 5.02147 10.1088 4.99993 9.99935 4.99996V4.99996ZM9.99935 1.66663C8.35118 1.66663 6.74001 2.15537 5.3696 3.07105C3.99919 3.98672 2.93109 5.28821 2.30036 6.81093C1.66963 8.33365 1.5046 10.0092 1.82614 11.6257C2.14769 13.2422 2.94136 14.7271 4.1068 15.8925C5.27223 17.058 6.75709 17.8516 8.3736 18.1732C9.99011 18.4947 11.6657 18.3297 13.1884 17.699C14.7111 17.0682 16.0126 16.0001 16.9283 14.6297C17.8439 13.2593 18.3327 11.6481 18.3327 9.99996C18.3302 7.7906 17.4514 5.67245 15.8891 4.11019C14.3269 2.54794 12.2087 1.66915 9.99935 1.66663V1.66663ZM9.99935 16.6666C8.68081 16.6666 7.39188 16.2756 6.29555 15.5431C5.19922 14.8105 4.34474 13.7694 3.84016 12.5512C3.33557 11.333 3.20355 9.99256 3.46078 8.69936C3.71802 7.40615 4.35296 6.21826 5.28531 5.28591C6.21766 4.35356 7.40554 3.71863 8.69875 3.46139C9.99196 3.20416 11.3324 3.33618 12.5506 3.84076C13.7687 4.34535 14.8099 5.19983 15.5425 6.29616C16.275 7.39249 16.666 8.68142 16.666 9.99996C16.664 11.7674 15.961 13.462 14.7112 14.7118C13.4614 15.9616 11.7668 16.6646 9.99935 16.6666V16.6666Z";
+
+/** No-smoking — stroke paths, 20×20 viewBox. */
+export const NO_SMOKING_PATHS = [
+  "M6.66602 10.8334V14.1667",
+  "M13.334 4.16663V4.58329C13.334 5.02532 13.5096 5.44924 13.8221 5.7618C14.1347 6.07436 14.5586 6.24996 15.0007 6.24996C15.4427 6.24996 15.8666 6.42555 16.1792 6.73811C16.4917 7.05068 16.6673 7.4746 16.6673 7.91663V8.33329",
+  "M2.5 2.5L17.5 17.5",
+  "M14.1667 10.8334H16.6667C16.8877 10.8334 17.0996 10.9212 17.2559 11.0775C17.4122 11.2337 17.5 11.4457 17.5 11.6667V13.3334C17.5 13.5667 17.4042 13.7775 17.25 13.9284M14.1667 14.1667H3.33333C3.11232 14.1667 2.90036 14.0789 2.74408 13.9226C2.5878 13.7663 2.5 13.5544 2.5 13.3334V11.6667C2.5 11.4457 2.5878 11.2337 2.74408 11.0775C2.90036 10.9212 3.11232 10.8334 3.33333 10.8334H10.8333",
+] as const;
+
+/** Paw / pets — stroke paths, 20×20 viewBox. */
+export const PAW_PATHS = [
+  "M12.25 11.25C11.3334 9.58329 11.0492 9.16663 10.0001 9.16663C8.95088 9.16663 8.55338 9.79579 7.63672 11.4558C6.85172 12.875 5.26505 12.9933 4.86922 14.1983C4.78838 14.4191 4.74838 14.7625 4.75005 15C4.75005 15.98 5.40588 16.6666 6.25005 16.6666C7.29922 16.6666 8.75005 15.8333 10.0001 15.8333C11.2501 15.8333 12.7009 16.6666 13.7501 16.6666C14.5942 16.6666 15.25 15.9808 15.25 15C15.25 14.7625 15.2092 14.4191 15.1284 14.1983C14.7325 12.9891 13.035 12.6691 12.25 11.25Z",
+  "M16.8241 6.73496C16.7171 6.68971 16.602 6.66647 16.4858 6.66663H16.4733C15.8608 6.67663 15.1733 7.29163 14.8125 8.22163C14.38 9.33413 14.5791 10.4716 15.2608 10.765C15.3683 10.8108 15.4833 10.8333 15.5991 10.8333C16.215 10.8333 16.9116 10.215 17.275 9.27829C17.705 8.16579 17.5016 7.02829 16.8241 6.73496Z",
+  "M7.89628 7.50004C7.94211 7.50004 7.98711 7.50004 8.03211 7.49087C8.81878 7.38421 9.30961 6.36921 9.13211 5.22254C8.96295 4.14171 8.25961 3.33337 7.52211 3.33337C7.47628 3.33337 7.43128 3.33337 7.38628 3.34254C6.59961 3.44921 6.10878 4.46421 6.28628 5.61087C6.45628 6.68837 7.15961 7.50004 7.89711 7.50004H7.89628Z",
+  "M13.7139 5.61088C13.8922 4.46421 13.4014 3.44921 12.6139 3.34254C12.5692 3.33635 12.5241 3.33329 12.4789 3.33338C11.7414 3.33338 11.0389 4.14171 10.8706 5.22254C10.6922 6.36921 11.1831 7.38421 11.9706 7.49088C12.0156 7.49671 12.0606 7.50004 12.1056 7.50004C12.8431 7.50004 13.5472 6.68838 13.7139 5.61088Z",
+  "M4.74152 10.765C5.42152 10.4716 5.61985 9.33246 5.18819 8.22163C4.82485 7.28496 4.12902 6.66663 3.51402 6.66663C3.39735 6.66663 3.28319 6.68913 3.17485 6.73496C2.49485 7.02829 2.29652 8.16746 2.72819 9.27829C3.09152 10.215 3.78735 10.8333 4.40235 10.8333C4.51902 10.8333 4.63319 10.8108 4.74152 10.765Z",
+] as const;
+
+/** Trash / waste — stroke path, 20×20 viewBox. */
+export const TRASH_PATH =
+  "M7.5 2.5H12.5M2.5 5H17.5M15.8333 5L15.2489 13.7661C15.1612 15.0813 15.1174 15.7389 14.8333 16.2375C14.5833 16.6765 14.206 17.0294 13.7514 17.2497C13.235 17.5 12.5759 17.5 11.2578 17.5H8.74221C7.42409 17.5 6.76503 17.5 6.24861 17.2497C5.79396 17.0294 5.41674 16.6765 5.16665 16.2375C4.88259 15.7389 4.83875 15.0813 4.75107 13.7661L4.16667 5M8.33333 8.75V12.9167M11.6667 8.75V12.9167";

package/src/icons/HouseRules/index.ts

@@ -0,0 +1,2 @@
+export { QuietHoursIcon, NoSmokingIcon, PawIcon, TrashIcon } from "./HouseRulesIcons";
+export { QUIET_HOURS_PATH, NO_SMOKING_PATHS, PAW_PATHS, TRASH_PATH } from "./houseRulesPaths";

package/src/icons/LocationUser/LocationUserIcon.tsx

@@ -0,0 +1,15 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { LOCATION_USER_PATH } from "./locationUserPath";
+
+export { LOCATION_USER_PATH } from "./locationUserPath";
+
+/** Native — react-native-svg (peer dependency). */
+export function LocationUserIcon({ size = 16, color = colors.grey0 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path d={LOCATION_USER_PATH} fill={color} />
+    </Svg>
+  );
+}

package/src/icons/LocationUser/LocationUserIcon.web.tsx

@@ -0,0 +1,14 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { LOCATION_USER_PATH } from "./locationUserPath";
+
+export { LOCATION_USER_PATH } from "./locationUserPath";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function LocationUserIcon({ size = 16, color = colors.grey0 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d={LOCATION_USER_PATH} fill={color} />
+    </svg>
+  );
+}

package/src/icons/LocationUser/index.ts

@@ -0,0 +1 @@
+export { LocationUserIcon, LOCATION_USER_PATH } from "./LocationUserIcon";

package/src/icons/LocationUser/locationUserPath.ts

@@ -0,0 +1,2 @@
+export const LOCATION_USER_PATH =
+  "M10.9127 8.5267C10.8313 8.4943 10.7443 8.47826 10.6566 8.47949C10.569 8.48073 10.4825 8.4992 10.402 8.53387C10.3216 8.56854 10.2487 8.61872 10.1876 8.68154C10.1265 8.74437 10.0784 8.81861 10.046 8.90003C10.0136 8.98145 9.99758 9.06845 9.99882 9.15607C10 9.24369 10.0185 9.3302 10.0532 9.41068C10.0879 9.49116 10.138 9.56402 10.2009 9.62511C10.2637 9.68619 10.3379 9.7343 10.4193 9.7667C11.3927 10.1534 11.9993 10.7534 11.9993 11.3334C11.9993 12.28 10.3593 13.3334 7.99935 13.3334C5.63935 13.3334 3.99935 12.28 3.99935 11.3334C3.99935 10.7534 4.60602 10.1534 5.57935 9.7667C5.74378 9.70128 5.87549 9.57321 5.94551 9.41068C6.01552 9.24815 6.0181 9.06446 5.95268 8.90003C5.88726 8.73559 5.7592 8.60388 5.59667 8.53387C5.43414 8.46386 5.25045 8.46128 5.08602 8.5267C3.57268 9.1267 2.66602 10.1734 2.66602 11.3334C2.66602 13.2 5.00602 14.6667 7.99935 14.6667C10.9927 14.6667 13.3327 13.2 13.3327 11.3334C13.3327 10.1734 12.426 9.1267 10.9127 8.5267ZM7.33268 6.57336V11.3334C7.33268 11.5102 7.40292 11.6797 7.52794 11.8048C7.65297 11.9298 7.82254 12 7.99935 12C8.17616 12 8.34573 11.9298 8.47075 11.8048C8.59578 11.6797 8.66602 11.5102 8.66602 11.3334V6.57336C9.29445 6.4111 9.84214 6.02521 10.2064 5.48802C10.5707 4.95084 10.7265 4.29924 10.6448 3.65536C10.563 3.01149 10.2492 2.41954 9.76217 1.99048C9.27517 1.56142 8.6484 1.32471 7.99935 1.32471C7.3503 1.32471 6.72353 1.56142 6.23653 1.99048C5.74952 2.41954 5.43572 3.01149 5.35394 3.65536C5.27215 4.29924 5.42801 4.95084 5.79228 5.48802C6.15656 6.02521 6.70424 6.4111 7.33268 6.57336V6.57336ZM7.99935 2.6667C8.26306 2.6667 8.52084 2.74489 8.74011 2.8914C8.95937 3.03791 9.13027 3.24615 9.23119 3.48978C9.33211 3.73342 9.35851 4.00151 9.30706 4.26015C9.25562 4.51879 9.12863 4.75637 8.94216 4.94284C8.75569 5.12931 8.51811 5.2563 8.25947 5.30774C8.00083 5.35919 7.73274 5.33279 7.4891 5.23187C7.24547 5.13095 7.03723 4.96005 6.89072 4.74079C6.74421 4.52152 6.66602 4.26374 6.66602 4.00003C6.66602 3.64641 6.80649 3.30727 7.05654 3.05722C7.30659 2.80717 7.64573 2.6667 7.99935 2.6667Z";

package/src/icons/Lock/LockIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { LOCK_PATH } from "./lockPath";
+
+export { LOCK_PATH } from "./lockPath";
+
+/** Native — react-native-svg (peer dependency). */
+export function LockIcon({ size = 32, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <Path
+        d={LOCK_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Lock/LockIcon.web.tsx

@@ -0,0 +1,26 @@
+import { LOCK_PATH } from "./lockPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function LockIcon({ size = 32, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={LOCK_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { LOCK_PATH } from "./lockPath";

package/src/icons/Lock/index.ts

@@ -0,0 +1 @@
+export { LockIcon, LOCK_PATH } from "./LockIcon";

package/src/icons/Lock/lockPath.ts

@@ -0,0 +1,3 @@
+/** Padlock — stroke path, 32×32 viewBox. */
+export const LOCK_PATH =
+  "M22.6673 13.3333V10.6667C22.6673 6.98477 19.6825 4 16.0007 4C12.3188 4 9.33398 6.98477 9.33398 10.6667V13.3333M16.0007 19.3333V22M11.734 28H20.2673C22.5075 28 23.6276 28 24.4833 27.564C25.2359 27.1805 25.8479 26.5686 26.2313 25.816C26.6673 24.9603 26.6673 23.8402 26.6673 21.6V19.7333C26.6673 17.4931 26.6673 16.373 26.2313 15.5174C25.8479 14.7647 25.2359 14.1528 24.4833 13.7693C23.6276 13.3333 22.5075 13.3333 20.2673 13.3333H11.734C9.49377 13.3333 8.37367 13.3333 7.51802 13.7693C6.76537 14.1528 6.15345 14.7647 5.76996 15.5174C5.33398 16.373 5.33398 17.4931 5.33398 19.7333V21.6C5.33398 23.8402 5.33398 24.9603 5.76996 25.816C6.15345 26.5686 6.76537 27.1805 7.51802 27.564C8.37367 28 9.49377 28 11.734 28Z";

package/src/icons/Refresh/RefreshIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { REFRESH_PATH } from "./refreshPath";
+
+export function RefreshIcon({ size = 20, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={REFRESH_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export { REFRESH_PATH } from "./refreshPath";

package/src/icons/Refresh/RefreshIcon.web.tsx

@@ -0,0 +1,19 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { REFRESH_PATH } from "./refreshPath";
+
+export function RefreshIcon({ size = 20, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path
+        d={REFRESH_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { REFRESH_PATH } from "./refreshPath";

package/src/icons/Refresh/index.ts

@@ -0,0 +1 @@
+export { RefreshIcon, REFRESH_PATH } from "./RefreshIcon";

package/src/icons/Refresh/refreshPath.ts

@@ -0,0 +1,3 @@
+/** Reset / refresh — viewBox 0 0 20 20. */
+export const REFRESH_PATH =
+  "M17.4993 8.33333C17.4993 8.33333 15.8285 6.05685 14.4712 4.69854C13.1138 3.34022 11.238 2.5 9.16602 2.5C5.02388 2.5 1.66602 5.85786 1.66602 10C1.66602 14.1421 5.02388 17.5 9.16602 17.5C12.5853 17.5 15.4701 15.2119 16.3729 12.0833M12.4993 8.33333H17.4993V3.33333";

package/src/icons/RefundStatus/RefundStatusIcon.tsx

@@ -0,0 +1,24 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { REFUND_STATUS_PATH } from "./refundStatusPath";
+
+export function RefundStatusIcon({
+  size = 16,
+  color = colors.primary,
+  strokeWidth = 2,
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d={REFUND_STATUS_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export { REFUND_STATUS_PATH } from "./refundStatusPath";

package/src/icons/RefundStatus/RefundStatusIcon.web.tsx

@@ -0,0 +1,23 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { REFUND_STATUS_PATH } from "./refundStatusPath";
+
+export function RefundStatusIcon({
+  size = 16,
+  color = colors.primary,
+  strokeWidth = 2,
+}: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d={REFUND_STATUS_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { REFUND_STATUS_PATH } from "./refundStatusPath";

package/src/icons/RefundStatus/index.ts

@@ -0,0 +1 @@
+export { RefundStatusIcon, REFUND_STATUS_PATH } from "./RefundStatusIcon";

package/src/icons/RefundStatus/refundStatusPath.ts

@@ -0,0 +1,3 @@
+/** Refund-in-progress clock — viewBox 0 0 16 16. */
+export const REFUND_STATUS_PATH =
+  "M15.1333 7.66667L13.8004 9L12.4666 7.66667M13.9634 8.66667C13.9876 8.44778 14 8.22534 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C9.88484 14 11.5667 13.1309 12.6667 11.7716M8 4.66667V8L10 9.33333";

package/src/icons/Sort/SortIcon.tsx

@@ -5,10 +5,10 @@ import type { IconProps } from "../types";
 
 export { SORT_PATH } from "./sortPath";
 
-/** Native — react-native-svg (peer dependency). */
-export function SortIcon({ size = 12, color = colors.grey150, strokeWidth = 1.5 }: IconProps) {
+/** Bidirectional sort (20×20 viewBox). */
+export function SortIcon({ size = 20, color = colors.grey300, strokeWidth = 2 }: IconProps) {
   return (
-    <Svg width={size} height={size} viewBox="0 0 12 12" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
       <Path
         d={SORT_PATH}
         stroke={color}

package/src/icons/Sort/SortIcon.web.tsx

@@ -3,12 +3,12 @@ import { colors } from "../../theme";
 import type { IconProps } from "../types";
 
 /** Web / Storybook — plain SVG (no react-native-svg). */
-export function SortIcon({ size = 12, color = colors.grey150, strokeWidth = 1.5 }: IconProps) {
+export function SortIcon({ size = 20, color = colors.grey300, strokeWidth = 2 }: IconProps) {
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 12 12"
+      viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden

package/src/icons/Sort/sortPath.ts

@@ -1,2 +1,3 @@
-/** Bidirectional sort icon path — 12×12 viewBox. */
-export const SORT_PATH = "M3.5 2V10M5.5 8L3.5 10L1.5 8M8.5 10V2M10.5 4L8.5 2L6.5 4";
+/** Bidirectional sort icon path — 20×20 viewBox. */
+export const SORT_PATH =
+  "M5.83333 3.33301V16.6663M9.16667 13.333L5.83333 16.6663L2.5 13.333M14.1667 16.6663V3.33301M17.5 6.66634L14.1667 3.33301L10.8333 6.66634";

package/src/icons/VideoOff/VideoOffIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { VIDEO_OFF_PATH } from "./videoOffPath";
+
+export { VIDEO_OFF_PATH } from "./videoOffPath";
+
+/** Video / camera off (24×24 viewBox). */
+export function VideoOffIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={VIDEO_OFF_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/VideoOff/VideoOffIcon.web.tsx

@@ -0,0 +1,27 @@
+import { VIDEO_OFF_PATH } from "./videoOffPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function VideoOffIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={VIDEO_OFF_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { VIDEO_OFF_PATH } from "./videoOffPath";

package/src/icons/VideoOff/index.ts

@@ -0,0 +1 @@
+export { VideoOffIcon, VIDEO_OFF_PATH } from "./VideoOffIcon";

package/src/icons/VideoOff/videoOffPath.ts

@@ -0,0 +1,2 @@
+export const VIDEO_OFF_PATH =
+  "M5 5C3.34315 5 2 6.34315 2 8V16C2 17.6569 3.34315 19 5 19H14C15.3527 19 16.4962 18.1048 16.8705 16.8745M17 12L20.6343 8.36569C21.0627 7.93731 21.2769 7.72312 21.4608 7.70865C21.6203 7.69609 21.7763 7.76068 21.8802 7.88238C22 8.02265 22 8.32556 22 8.93137V15.0686C22 15.6744 22 15.9774 21.8802 16.1176C21.7763 16.2393 21.6203 16.3039 21.4608 16.2914C21.2769 16.2769 21.0627 16.0627 20.6343 15.6343L17 12ZM17 12V9.8C17 8.11984 17 7.27976 16.673 6.63803C16.3854 6.07354 15.9265 5.6146 15.362 5.32698C14.7202 5 13.8802 5 12.2 5H9.5M2 2L22 22";

package/src/icons/ZoomOut/ZoomOutIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { ZOOM_OUT_PATH } from "./zoomOutPath";
+
+export { ZOOM_OUT_PATH } from "./zoomOutPath";
+
+/** Exit-fullscreen / zoom-out corners control (24×24 viewBox). */
+export function ZoomOutIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={ZOOM_OUT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/ZoomOut/index.ts

@@ -0,0 +1 @@
+export { ZoomOutIcon, ZOOM_OUT_PATH } from "./ZoomOutIcon";

package/src/icons/ZoomOut/zoomOutPath.ts

@@ -0,0 +1,2 @@
+export const ZOOM_OUT_PATH =
+  "M3 8H3.2C4.88016 8 5.72024 8 6.36197 7.67302C6.92646 7.3854 7.3854 6.92646 7.67302 6.36197C8 5.72024 8 4.88016 8 3.2V3M3 16H3.2C4.88016 16 5.72024 16 6.36197 16.327C6.92646 16.6146 7.3854 17.0735 7.67302 17.638C8 18.2798 8 19.1198 8 20.8V21M16 3V3.2C16 4.88016 16 5.72024 16.327 6.36197C16.6146 6.92646 17.0735 7.3854 17.638 7.67302C18.2798 8 19.1198 8 20.8 8H21M16 21V20.8C16 19.1198 16 18.2798 16.327 17.638C16.6146 17.0735 17.0735 16.6146 17.638 16.327C18.2798 16 19.1198 16 20.8 16H21";