@postal-music/icons 0.1.7 → 0.1.8

package/dist/types/icons/arrows/ArrowUpIcon.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-export declare function ArrowUpIcon({ className, size, stroke, color, fill, ...props }: React.SVGProps<SVGSVGElement> & {
-    stroke?: string;
+export declare function ArrowUpIcon({ className, size, color, fill, ...props }: React.SVGProps<SVGSVGElement> & {
     size?: number;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/icons/arrows/ChevronUpIcon.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export declare function ChevronUpIcon({ className, size, stroke, color, fill, ...props }: React.SVGProps<SVGSVGElement> & {
+    stroke?: string;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/icons/arrows/index.d.ts

@@ -5,6 +5,7 @@ export { ArrowUpIcon01 } from './ArrowUp01Icon';
 export { ArrowUpIcon } from './ArrowUpIcon';
 export { default as ChevronLeftIcon } from './ChevronLeftIcon';
 export { default as ChevronSelectorIcon } from './ChevronSelectorIcon';
+export { ChevronUpIcon } from './ChevronUpIcon';
 export { NarrowUpRightIcon } from './NarrowUpRightIcon';
 export { default as SwitchHorizontal02Icon } from './SwitchHorizontal02Icon';
 export { UTurnIcon } from './UTurnIcon';

package/dist/types/icons/navigation/AlignLeft01Icon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type AlignLeft01IconProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+export default function AlignLeft01Icon({ size, className, ...props }: AlignLeft01IconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/icons/navigation/FlexAlignBottomIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type FlexAlignBottomIconProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+export default function FlexAlignBottomIcon({ size, className, ...props }: FlexAlignBottomIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/icons/navigation/FlexAlignLeftIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type FlexAlignLeftIconProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+export default function FlexAlignLeftIcon({ size, className, ...props }: FlexAlignLeftIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/icons/navigation/FlexAlignRightIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type FlexAlignRightIconProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+export default function FlexAlignRightIcon({ size, className, ...props }: FlexAlignRightIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/icons/navigation/FlexAlignTopIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type FlexAlignTopIconProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+export default function FlexAlignTopIcon({ size, className, ...props }: FlexAlignTopIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/icons/navigation/index.d.ts

@@ -1,6 +1,11 @@
+export { default as AlignLeft01Icon } from './AlignLeft01Icon';
 export { default as AlignLeftIcon } from './AlignLeftIcon';
 export { default as DotgridIcon } from './DotgridIcon';
 export { default as FilterIcon } from './FilterIcon';
+export { default as FlexAlignBottomIcon } from './FlexAlignBottomIcon';
+export { default as FlexAlignLeftIcon } from './FlexAlignLeftIcon';
+export { default as FlexAlignRightIcon } from './FlexAlignRightIcon';
+export { default as FlexAlignTopIcon } from './FlexAlignTopIcon';
 export { default as Grid01Icon } from './Grid01Icon';
 export { GridIcon } from './GridIcon';
 export { HomeIcon } from './HomeIcon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postal-music/icons",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Shared design system for Postal — icons and tokens for React and React Native",
   "publishConfig": {
     "access": "public"

package/src/icons/arrows/ArrowUpIcon.native.tsx

@@ -16,13 +16,14 @@ export function ArrowUpIcon({
     <Svg
       width={size}
       height={size}
-      viewBox="0 0 16 16"
+      viewBox="0 0 24 24"
       fill={fill}
     >
       <Path
-        d="M12 10L8 6L4 10"
+        d="M12 19V5M19 12L12 5L5 12"
         stroke={color}
-        strokeWidth={1.5}
+        strokeWidth="2"
+        strokeLinecap="round"
         strokeLinejoin="round"
       />
     </Svg>

package/src/icons/arrows/ArrowUpIcon.web.tsx

@@ -3,25 +3,25 @@ import * as React from "react";
 export function ArrowUpIcon({
   className,
   size = 16,
-  stroke = "#8F8F8F",
   color = "currentColor",
   fill = "none",
   ...props
-}: React.SVGProps<SVGSVGElement> & { stroke?: string; size?: number }) {
+}: React.SVGProps<SVGSVGElement> & { size?: number }) {
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 16 16"
+      viewBox="0 0 24 24"
       fill={fill}
       xmlns="http://www.w3.org/2000/svg"
       className={className}
       {...props}
     >
       <path
-        d="M12 10L8 6L4 10"
+        d="M12 19V5M19 12L12 5L5 12"
         stroke={color}
-        strokeWidth={1.5}
+        strokeWidth="2"
+        strokeLinecap="round"
         strokeLinejoin="round"
       />
     </svg>

package/src/icons/arrows/ChevronUpIcon.native.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type ChevronUpIconProps = {
+  size?: number;
+  color?: string;
+  fill?: string;
+};
+
+export function ChevronUpIcon({
+  size = 16,
+  color = '#000000',
+  fill = "none",
+}: ChevronUpIconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill={fill}
+    >
+      <Path
+        d="M12 10L8 6L4 10"
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export default ChevronUpIcon;

package/src/icons/arrows/ChevronUpIcon.web.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+export function ChevronUpIcon({
+  className,
+  size = 16,
+  stroke = "#8F8F8F",
+  color = "currentColor",
+  fill = "none",
+  ...props
+}: React.SVGProps<SVGSVGElement> & { stroke?: string; size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill={fill}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M12 10L8 6L4 10"
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/arrows/index.ts

@@ -5,6 +5,7 @@ export { ArrowUpIcon01 } from './ArrowUp01Icon';
 export { ArrowUpIcon } from './ArrowUpIcon';
 export { default as ChevronLeftIcon } from './ChevronLeftIcon';
 export { default as ChevronSelectorIcon } from './ChevronSelectorIcon';
+export { ChevronUpIcon } from './ChevronUpIcon';
 export { NarrowUpRightIcon } from './NarrowUpRightIcon';
 export { default as SwitchHorizontal02Icon } from './SwitchHorizontal02Icon';
 export { UTurnIcon } from './UTurnIcon';

package/src/icons/navigation/AlignLeft01Icon.native.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type AlignLeft01IconProps = {
+  size?: number | string;
+};
+
+const AlignLeft01Icon = ({ size = 16 }: AlignLeft01IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M3 3V21M21 12H7M14 5L7 12L14 19"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { AlignLeft01Icon };
+export default AlignLeft01Icon;

package/src/icons/navigation/AlignLeft01Icon.web.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type AlignLeft01IconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function AlignLeft01Icon({
+  size = 16,
+  className,
+  ...props
+}: AlignLeft01IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M3 3V21M21 12H7M14 5L7 12L14 19"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/navigation/FlexAlignBottomIcon.native.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type FlexAlignBottomIconProps = {
+  size?: number | string;
+};
+
+const FlexAlignBottomIcon = ({ size = 16 }: FlexAlignBottomIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M17.5 17.6L6.5 17.6M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { FlexAlignBottomIcon };
+export default FlexAlignBottomIcon;

package/src/icons/navigation/FlexAlignBottomIcon.web.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type FlexAlignBottomIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function FlexAlignBottomIcon({
+  size = 16,
+  className,
+  ...props
+}: FlexAlignBottomIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M17.5 17.6L6.5 17.6M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/navigation/FlexAlignLeftIcon.native.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type FlexAlignLeftIconProps = {
+  size?: number | string;
+};
+
+const FlexAlignLeftIcon = ({ size = 16 }: FlexAlignLeftIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M6.5 17.5L6.5 6.5M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { FlexAlignLeftIcon };
+export default FlexAlignLeftIcon;

package/src/icons/navigation/FlexAlignLeftIcon.web.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type FlexAlignLeftIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function FlexAlignLeftIcon({
+  size = 16,
+  className,
+  ...props
+}: FlexAlignLeftIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M6.5 17.5L6.5 6.5M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/navigation/FlexAlignRightIcon.native.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type FlexAlignRightIconProps = {
+  size?: number | string;
+};
+
+const FlexAlignRightIcon = ({ size = 16 }: FlexAlignRightIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M17.5 17.5L17.5 6.5M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { FlexAlignRightIcon };
+export default FlexAlignRightIcon;

package/src/icons/navigation/FlexAlignRightIcon.web.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type FlexAlignRightIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function FlexAlignRightIcon({
+  size = 16,
+  className,
+  ...props
+}: FlexAlignRightIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M17.5 17.5L17.5 6.5M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/navigation/FlexAlignTopIcon.native.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type FlexAlignTopIconProps = {
+  size?: number | string;
+};
+
+const FlexAlignTopIcon = ({ size = 16 }: FlexAlignTopIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M17.5 6.5L6.5 6.5M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { FlexAlignTopIcon };
+export default FlexAlignTopIcon;

package/src/icons/navigation/FlexAlignTopIcon.web.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type FlexAlignTopIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function FlexAlignTopIcon({
+  size = 16,
+  className,
+  ...props
+}: FlexAlignTopIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M17.5 6.5L6.5 6.5M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/navigation/index.ts

@@ -1,6 +1,11 @@
+export { default as AlignLeft01Icon } from './AlignLeft01Icon';
 export { default as AlignLeftIcon } from './AlignLeftIcon';
 export { default as DotgridIcon } from './DotgridIcon';
 export { default as FilterIcon } from './FilterIcon';
+export { default as FlexAlignBottomIcon } from './FlexAlignBottomIcon';
+export { default as FlexAlignLeftIcon } from './FlexAlignLeftIcon';
+export { default as FlexAlignRightIcon } from './FlexAlignRightIcon';
+export { default as FlexAlignTopIcon } from './FlexAlignTopIcon';
 export { default as Grid01Icon } from './Grid01Icon';
 export { GridIcon } from './GridIcon';
 export { HomeIcon } from './HomeIcon';