@granto-umbrella/umbrella-components 1.0.0 → 1.0.2

package/.github/workflows/azure-static-web-apps-white-beach-08c746f0f.yml

@@ -31,6 +31,10 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
+      # Build Storybook
+      - name: Build Storybook
+        run: yarn build-storybook
+
       # Deploy to Azure Static Web Apps
       - name: Deploy to Azure Static Web Apps
         id: builddeploy
@@ -39,11 +43,9 @@ jobs:
           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WHITE_BEACH_08C746F0F }}
           repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e., PR comments)
           action: "upload"
-          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
-          app_location: "/" # App source code path
+          app_location: "" # Root of the built Storybook
           api_location: "" # API source code path - optional
           output_location: "storybook-static" # Built Storybook directory
-          ###### End of Repository/Build Configurations ######
 
   close_pull_request_job:
     if: github.event_name == 'pull_request' && github.event.action == 'closed'

package/package.json

@@ -1,12 +1,10 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Umbrella Components for React",
   "type": "module",
-  "main": "cli/index.js",
-  "bin": {
-    "meu-cli": "cli/index.js"
-  },
+  "main": "src/index.js",
+  "module": "src/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/grantoseguros/granto-umbrella-components.git"

package/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/components/atoms/Button/Button.stories.tsx

@@ -0,0 +1,94 @@
+import { Meta, StoryFn } from "@storybook/react";
+import Button from "./Button";
+import * as Icons from "@phosphor-icons/react";
+
+export default {
+  title: "Atoms/Button",
+  component: Button,
+  parameters: {
+    docs: {
+      source: {
+        type: "code",
+      },
+    },
+  },
+  argTypes: {
+    size: { control: "select", options: ["xs", "sm", "md", "lg"] },
+    variant: {
+      control: "select",
+      options: ["primary", "outline", "danger", "ghost"],
+    },
+    radius: {
+      control: "select",
+      options: [
+        "--border-0",
+        "--border-1",
+        "--border-2",
+        "--border-3",
+        "--border-4",
+        "--border-5",
+      ],
+    },
+    isLoading: { control: "boolean" },
+    leftIcon: {
+      control: "select",
+      options: Object.keys(Icons),
+    },
+    rightIcon: {
+      control: "select",
+      options: Object.keys(Icons),
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = { children: "Primary" };
+Primary.parameters = {
+  docs: {
+    source: {
+      code: `<Button size="md" variant="primary" radius="--border-1">Primary</Button>`,
+    },
+  },
+};
+
+export const WithLeftIcon = Template.bind({});
+WithLeftIcon.args = {
+  children: "Left Icon",
+  leftIcon: "ArrowLeft",
+};
+WithLeftIcon.parameters = {
+  docs: {
+    source: {
+      code: `<Button size="md" variant="primary" radius="--border-1" leftIcon={<ArrowLeft size={16} />}>Left Icon</Button>`,
+    },
+  },
+};
+
+export const WithRightIcon = Template.bind({});
+WithRightIcon.args = {
+  children: "Right Icon",
+  rightIcon: "ArrowRight",
+};
+WithRightIcon.parameters = {
+  docs: {
+    source: {
+      code: `<Button size="md" variant="primary" radius="--border-1" rightIcon={<ArrowRight size={16} />}>Right Icon</Button>`,
+    },
+  },
+};
+
+export const WithBothIcons = Template.bind({});
+WithBothIcons.args = {
+  children: "Both Icons",
+  leftIcon: "ArrowLeft",
+  rightIcon: "ArrowRight",
+};
+WithBothIcons.parameters = {
+  docs: {
+    source: {
+      code: `<Button size="md" variant="primary" radius="--border-1" leftIcon={<ArrowLeft size={16} />} rightIcon={<ArrowRight size={16} />}>Both Icons</Button>`,
+    },
+  },
+};

package/src/components/atoms/Button/Button.styles.ts

@@ -0,0 +1,122 @@
+import styled, { css } from "styled-components";
+import {
+  primitiveSizes,
+  semanticColors,
+  semanticRadiusBorders,
+  semanticSizes,
+} from "../../../styles/tokens";
+
+const buttonSizes = {
+  xs: css`
+    padding: ${primitiveSizes["size-1.5"]} ${semanticSizes["xl"]};
+    font-size: ${primitiveSizes["size-3.5"]};
+    icon-size: ${primitiveSizes["size-4"]};
+  `,
+  sm: css`
+    padding: ${primitiveSizes["size-2.5"]} ${primitiveSizes["size-5"]};
+    font-size: ${primitiveSizes["size-3.5"]};
+    icon-size: ${primitiveSizes["size-5"]};
+  `,
+  md: css`
+    padding: ${semanticSizes.lg} ${semanticSizes["2xl"]};
+    font-size: ${primitiveSizes["size-4"]};
+    icon-size: ${primitiveSizes["size-5"]};
+  `,
+  lg: css`
+    padding: ${semanticSizes.xl} ${semanticSizes["2xl"]};
+    font-size: ${primitiveSizes["size-5"]};
+    icon-size: ${primitiveSizes["size-6"]};
+  `,
+};
+
+const buttonVariants = {
+  primary: css`
+    background: ${semanticColors.branding["--branding-400"]};
+    color: ${semanticColors.base["--background"]};
+    border: none;
+    &:hover {
+      background: ${semanticColors.branding["--branding-300"]};
+    }
+    &:active {
+      background: ${semanticColors.branding["--branding-500"]};
+    }
+    &:disabled {
+      background: ${semanticColors.branding["--branding-100"]};
+    }
+  `,
+  outline: css`
+    border: 1px solid ${semanticColors.branding["--branding-400"]};
+    color: ${semanticColors.branding["--branding-400"]};
+    background: transparent;
+    &:hover {
+      border: 1px solid ${semanticColors.branding["--branding-300"]};
+      color: ${semanticColors.branding["--branding-300"]};
+    }
+    &:active {
+      border: 1px solid ${semanticColors.branding["--branding-500"]};
+      color: ${semanticColors.branding["--branding-500"]};
+    }
+    &:disabled {
+      color: ${semanticColors.branding["--branding-100"]};
+      border: 1px solid ${semanticColors.branding["--branding-100"]};
+    }
+  `,
+  ghost: css`
+    background: transparent;
+    color: ${semanticColors.branding["--branding-400"]};
+    border: none;
+    &:hover {
+      color: ${semanticColors.branding["--branding-300"]};
+    }
+    &:active {
+      color: ${semanticColors.branding["--branding-500"]};
+    }
+    &:disabled {
+      color: ${semanticColors.branding["--branding-100"]};
+    }
+  `,
+  danger: css`
+    background: ${semanticColors.danger["--danger-400"]};
+    color: ${semanticColors.base["--background"]};
+    border: none;
+    &:hover {
+      background: ${semanticColors.danger["--danger-300"]};
+    }
+    &:active {
+      background: ${semanticColors.danger["--danger-500"]};
+    }
+    &:disabled {
+      background: ${semanticColors.danger["--danger-200"]};
+    }
+  `,
+};
+
+export const StyledButton = styled.button<{
+  size: keyof typeof buttonSizes;
+  variant: keyof typeof buttonVariants;
+  radius: keyof typeof semanticRadiusBorders;
+}>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  border-radius: ${({ radius }) => semanticRadiusBorders[radius]};
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  ${({ size }) => buttonSizes[size]}
+  ${({ variant }) => buttonVariants[variant]}
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .icon-left {
+    margin-right: ${semanticSizes.sm};
+  }
+
+  .icon-right {
+    margin-left: ${semanticSizes.sm};
+  }
+`;

package/src/components/atoms/Button/Button.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { StyledButton } from "./Button.styles";
+import { ButtonProps } from "./Button.types";
+import * as Icons from "@phosphor-icons/react";
+
+const Button: React.FC<ButtonProps> = ({
+  children,
+  size = "md",
+  variant = "primary",
+  radius = "--border-2",
+  isLoading = false,
+  leftIcon,
+  rightIcon,
+  ...props
+}) => {
+  const IconComponentLeft =
+    leftIcon && (Icons[leftIcon as keyof typeof Icons] as React.ElementType);
+  const IconComponentRight =
+    rightIcon && (Icons[rightIcon as keyof typeof Icons] as React.ElementType);
+
+  return (
+    <StyledButton size={size} variant={variant} radius={radius} {...props}>
+      {isLoading ? (
+        <Icons.Spinner size={16} />
+      ) : (
+        <>
+          {IconComponentLeft && (
+            <span className="icon-left">
+              <IconComponentLeft size={16} />
+            </span>
+          )}
+          {children}
+          {IconComponentRight && (
+            <span className="icon-right">
+              <IconComponentRight size={16} />
+            </span>
+          )}
+        </>
+      )}
+    </StyledButton>
+  );
+};
+
+export default Button;

package/src/components/atoms/Button/Button.types.ts

@@ -0,0 +1,11 @@
+import { Radius } from "../../../types/radius.types";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: "xs" | "sm" | "md" | "lg";
+  variant?: "primary" | "outline" | "danger" | "ghost";
+  radius?: Radius;
+  isLoading?: boolean;
+  leftIcon?: string;
+  rightIcon?: string;
+}

package/src/components/atoms/Button/index.ts

@@ -0,0 +1 @@
+export { default } from "./Button";

package/src/components/atoms/Icon/Icon.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta, StoryFn } from "@storybook/react";
+import Icon from "./Icon";
+import { IconProps } from "./Icon.types";
+
+export default {
+  title: "Atoms/Icon",
+  component: Icon,
+  argTypes: {
+    name: {
+      control: "select",
+      options: [
+        "House",
+        "MagnifyingGlass",
+        "Gear",
+        "Plus",
+        "Trash",
+        "Check",
+        "Warning",
+        "Info",
+        "User",
+        "ArrowRight",
+      ],
+    },
+    size: { control: "select", options: ["xs", "sm", "md", "lg"] },
+    weight: {
+      control: "select",
+      options: ["thin", "light", "regular", "bold", "fill"],
+    },
+  },
+} as Meta;
+
+const Template: StoryFn<IconProps> = (args) => <Icon {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  name: "House",
+  size: "md",
+  weight: "regular",
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  name: "Gear",
+  size: "lg",
+  weight: "bold",
+};

package/src/components/atoms/Icon/Icon.styles.ts

@@ -0,0 +1,10 @@
+import { semanticSizes } from "../../../styles/tokens";
+
+const iconSizes = {
+  xs: semanticSizes.xs,
+  sm: semanticSizes.sm,
+  md: semanticSizes.md,
+  lg: semanticSizes.lg,
+};
+
+export default iconSizes;

package/src/components/atoms/Icon/Icon.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import * as Icons from "@phosphor-icons/react";
+import { IconProps } from "./Icon.types";
+import iconSizes from "./Icon.styles";
+
+const Icon: React.FC<IconProps> = ({
+  name,
+  size = "md",
+  weight = "regular",
+  ...props
+}) => {
+  const IconComponent = Icons[name as keyof typeof Icons] as React.ElementType;
+
+  if (!IconComponent) {
+    console.warn(`Ícone "${name}" não encontrado.`);
+    return null;
+  }
+
+  return <IconComponent size={iconSizes[size]} weight={weight} {...props} />;
+};
+
+export default Icon;

package/src/components/atoms/Icon/Icon.types.ts

@@ -0,0 +1,6 @@
+import { IconProps as PhosphorIconProps } from "@phosphor-icons/react";
+
+export interface IconProps extends PhosphorIconProps {
+  name: string;
+  size?: "xs" | "sm" | "md" | "lg";
+}

package/src/components/atoms/Icon/index.ts

@@ -0,0 +1 @@
+export { default } from "./Icon";

package/src/components/atoms/Input/Input.stories.tsx

@@ -0,0 +1,135 @@
+import { Meta, StoryFn } from "@storybook/react";
+import Input from "./";
+import { InputProps } from "./Input.types";
+import { FiSearch } from "react-icons/fi";
+import { semanticColors, semanticBorders } from "../../../styles/tokens";
+
+export default {
+  title: "Atoms/Input",
+  component: Input,
+  argTypes: {
+    type: { control: "select", options: ["text", "password", "email"] },
+    error: { control: "boolean" },
+    disabled: { control: "boolean" },
+    placeholder: { control: "text" },
+  },
+} as Meta;
+
+const Template: StoryFn<InputProps> = (args) => <Input {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: "Placeholder",
+  type: "text",
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  placeholder: "Search...",
+  icon: <FiSearch />,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  placeholder: "Error",
+  error: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  placeholder: "Disabled",
+  disabled: true,
+};
+
+export const WithSuccess = Template.bind({});
+WithSuccess.args = {
+  placeholder: "Success",
+  style: { border: `1px solid ${semanticColors.success["--success-400"]}` },
+};
+
+export const DefaultBorder = Template.bind({});
+DefaultBorder.args = {
+  placeholder: "Default Border",
+};
+
+export const StrongBorder = Template.bind({});
+StrongBorder.args = {
+  placeholder: "Strong Border",
+  style: {
+    border: `${semanticBorders["border-1"]} solid ${semanticColors.branding["--branding-400"]}`,
+  },
+};
+
+export const ErrorBorder = Template.bind({});
+ErrorBorder.args = {
+  placeholder: "Error Border",
+  error: true,
+};
+
+export const HeavyBorder = Template.bind({});
+HeavyBorder.args = {
+  placeholder: "Heavy Border",
+  style: {
+    border: `${semanticBorders["border-4"]} solid ${semanticColors.neutral["--neutral-400"]}`,
+  },
+};
+
+export const RoundedSmall = Template.bind({});
+RoundedSmall.args = {
+  placeholder: "Small Radius",
+  radius: "--border-1",
+};
+
+export const RoundedLarge = Template.bind({});
+RoundedLarge.args = {
+  placeholder: "Large Radius",
+  radius: "--border-2",
+};
+
+export const RoundedFull = Template.bind({});
+RoundedFull.args = {
+  placeholder: "Full Radius",
+  radius: "--border-4",
+};
+
+export const DefaultShadow = Template.bind({});
+DefaultShadow.args = {
+  placeholder: "Default Shadow",
+  shadow: "shadow",
+};
+
+export const MediumShadow = Template.bind({});
+MediumShadow.args = {
+  placeholder: "Medium Shadow",
+  shadow: "shadow-md",
+};
+
+export const LargeShadow = Template.bind({});
+LargeShadow.args = {
+  placeholder: "Large Shadow",
+  shadow: "shadow-lg",
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  placeholder: "Small Size",
+  size: "sm",
+};
+
+export const Medium = Template.bind({});
+Medium.args = {
+  placeholder: "Medium Size",
+  size: "md",
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  placeholder: "Large Size",
+  size: "lg",
+};
+
+export const Full = Template.bind({});
+Full.args = {
+  placeholder: "Full Width",
+  size: "full",
+};

package/src/components/atoms/Input/Input.styles.ts

@@ -0,0 +1,87 @@
+import styled from "styled-components";
+import {
+  semanticColors,
+  semanticShadows,
+  semanticSizes,
+  semanticRadiusBorders,
+  primitiveSizes,
+} from "../../../styles/tokens";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${primitiveSizes["size-2"]};
+`;
+
+export const Label = styled.label`
+  font-size: ${primitiveSizes["size-3.5"]};
+  color: ${semanticColors.neutral["--neutral-500"]};
+  font-weight: 500;
+`;
+
+export const SupportText = styled.span<{ $error?: boolean }>`
+  font-size: ${primitiveSizes["size-3"]};
+  color: ${({ $error }) =>
+    $error
+      ? semanticColors.danger["--danger-400"]
+      : semanticColors.neutral["--neutral-400"]};
+`;
+
+export const InputWrapper = styled.div<{
+  $error?: boolean;
+  $disabled?: boolean;
+  $size?: keyof typeof semanticSizes;
+  $radius?: keyof typeof semanticRadiusBorders;
+  $shadow?: keyof typeof semanticShadows;
+}>`
+  display: flex;
+  align-items: center;
+  padding: ${primitiveSizes["size-4"]};
+  gap: ${primitiveSizes["size-2"]};
+  height: ${({ $size }) => semanticSizes[$size || "md"]};
+  border-radius: ${({ $radius }) =>
+    semanticRadiusBorders[$radius || "--border-1"]};
+  box-shadow: ${({ $shadow }) => semanticShadows[$shadow || "shadow"]};
+  border: 1px solid
+    ${({ $error }) =>
+      $error
+        ? semanticColors.danger["--danger-100"]
+        : semanticColors.neutral["--neutral-300"]};
+  background-color: ${({ $disabled }) =>
+    $disabled
+      ? semanticColors.neutral["--neutral-100"]
+      : semanticColors.base["--background"]};
+  transition: border-color 0.2s, box-shadow 0.2s;
+
+  &:focus-within {
+    box-shadow: ${({ $shadow }) => semanticShadows[$shadow || "shadow-md"]};
+    border-color: ${({ $error }) =>
+      $error
+        ? semanticColors.danger["--danger-500"]
+        : semanticColors.branding["--branding-300"]};
+  }
+`;
+
+export const StyledInput = styled.input`
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: ${primitiveSizes["size-3.5"]};
+  color: ${semanticColors.neutral["--neutral-600"]};
+
+  &::placeholder {
+    color: ${semanticColors.neutral["--neutral-300"]};
+  }
+
+  &:disabled {
+    background-color: transparent;
+    cursor: not-allowed;
+  }
+`;
+
+export const Icon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${semanticColors.neutral["--neutral-400"]};
+`;