@otto-de/b2b-core-components 1.0.0

package/dist/collection/components/icon/types.js

@@ -0,0 +1,314 @@
+/* eslint-disable prettier/prettier */
+export const iconTypes = [
+  "b2b_icon-360-degree",
+  "b2b_icon-advice",
+  "b2b_icon-allergen-sulfur-dioxide-sulfite",
+  "b2b_icon-almond",
+  "b2b_icon-archive",
+  "b2b_icon-armchair",
+  "b2b_icon-arrow-down",
+  "b2b_icon-arrow-graph",
+  "b2b_icon-arrow-left",
+  "b2b_icon-arrow-right",
+  "b2b_icon-arrow-up",
+  "b2b_icon-assembly",
+  "b2b_icon-assortment",
+  "b2b_icon-attachment",
+  "b2b_icon-augmented-reality",
+  "b2b_icon-autonomous-team",
+  "b2b_icon-bank-details",
+  "b2b_icon-bar-graph-ascending",
+  "b2b_icon-bar-graph-axis",
+  "b2b_icon-barley",
+  "b2b_icon-basket-sale",
+  "b2b_icon-basket",
+  "b2b_icon-basketball",
+  "b2b_icon-bikini",
+  "b2b_icon-blogs",
+  "b2b_icon-brandshop",
+  "b2b_icon-brazil-nut",
+  "b2b_icon-browser-click",
+  "b2b_icon-browser-content",
+  "b2b_icon-browser-psm",
+  "b2b_icon-burger",
+  "b2b_icon-bus",
+  "b2b_icon-callback",
+  "b2b_icon-camera",
+  "b2b_icon-cashback",
+  "b2b_icon-cashew-nut",
+  "b2b_icon-catalogue",
+  "b2b_icon-categories",
+  "b2b_icon-celery",
+  "b2b_icon-certificate",
+  "b2b_icon-chair",
+  "b2b_icon-chat",
+  "b2b_icon-check-bold",
+  "b2b_icon-check",
+  "b2b_icon-chicken",
+  "b2b_icon-city",
+  "b2b_icon-clear",
+  "b2b_icon-close-bold",
+  "b2b_icon-close",
+  "b2b_icon-code-management",
+  "b2b_icon-contact-mail",
+  "b2b_icon-copy",
+  "b2b_icon-cow",
+  "b2b_icon-crab",
+  "b2b_icon-critique",
+  "b2b_icon-curtain",
+  "b2b_icon-cut-out",
+  "b2b_icon-dashboard",
+  "b2b_icon-deer",
+  "b2b_icon-delete",
+  "b2b_icon-delivery-24h",
+  "b2b_icon-delivery-desired-date-selection",
+  "b2b_icon-delivery-desired-date",
+  "b2b_icon-delivery-express",
+  "b2b_icon-delivery-flat",
+  "b2b_icon-delivery-on-hangers",
+  "b2b_icon-delivery-preferred-place",
+  "b2b_icon-desktop-phone-ads-click",
+  "b2b_icon-desktop-phone-ads",
+  "b2b_icon-desktop-phone",
+  "b2b_icon-desktop",
+  "b2b_icon-devices-monitor-laptop-tablet",
+  "b2b_icon-dish-feature-lactose-free",
+  "b2b_icon-dislike",
+  "b2b_icon-disposal",
+  "b2b_icon-document-sign",
+  "b2b_icon-downloads",
+  "b2b_icon-dress",
+  "b2b_icon-dungarees",
+  "b2b_icon-duration",
+  "b2b_icon-e-invoice",
+  "b2b_icon-edit-pad",
+  "b2b_icon-edit",
+  "b2b_icon-egg",
+  "b2b_icon-ellipsis",
+  "b2b_icon-email-verification-confirmed-safe",
+  "b2b_icon-email-verification-confirmed",
+  "b2b_icon-email-verification-sent-safe",
+  "b2b_icon-email-verification-sent",
+  "b2b_icon-empty-hint",
+  "b2b_icon-end-to-end",
+  "b2b_icon-error-article-image",
+  "b2b_icon-error",
+  "b2b_icon-euro",
+  "b2b_icon-event",
+  "b2b_icon-events",
+  "b2b_icon-expand",
+  "b2b_icon-faq",
+  "b2b_icon-feedback",
+  "b2b_icon-filter",
+  "b2b_icon-fish",
+  "b2b_icon-fitness",
+  "b2b_icon-flag-chequered",
+  "b2b_icon-flexible-work",
+  "b2b_icon-flip",
+  "b2b_icon-food-processor",
+  "b2b_icon-fullscreen",
+  "b2b_icon-gallery-view",
+  "b2b_icon-gamepad",
+  "b2b_icon-garlic",
+  "b2b_icon-gender-intersex",
+  "b2b_icon-globe",
+  "b2b_icon-gluten",
+  "b2b_icon-glutenfree",
+  "b2b_icon-handshake",
+  "b2b_icon-hashtag",
+  "b2b_icon-hazelnut",
+  "b2b_icon-hide",
+  "b2b_icon-high-heels",
+  "b2b_icon-home",
+  "b2b_icon-info-small",
+  "b2b_icon-info",
+  "b2b_icon-inplace-zoom-reverse",
+  "b2b_icon-inplace-zoom",
+  "b2b_icon-insurance",
+  "b2b_icon-kamut",
+  "b2b_icon-laptop-os",
+  "b2b_icon-laptop",
+  "b2b_icon-leaving-page",
+  "b2b_icon-light-bulb",
+  "b2b_icon-like-fingers",
+  "b2b_icon-like-product",
+  "b2b_icon-like",
+  "b2b_icon-line-graph",
+  "b2b_icon-list-view",
+  "b2b_icon-location",
+  "b2b_icon-lupine",
+  "b2b_icon-macadamia",
+  "b2b_icon-material-samples",
+  "b2b_icon-measurement",
+  "b2b_icon-megaphone",
+  "b2b_icon-menu",
+  "b2b_icon-mic",
+  "b2b_icon-milk",
+  "b2b_icon-minus",
+  "b2b_icon-module-operations",
+  "b2b_icon-money-coins",
+  "b2b_icon-money-document",
+  "b2b_icon-money-plus",
+  "b2b_icon-money-stack",
+  "b2b_icon-money",
+  "b2b_icon-move",
+  "b2b_icon-mustard",
+  "b2b_icon-nav",
+  "b2b_icon-new",
+  "b2b_icon-newsletter-sign-up",
+  "b2b_icon-notification",
+  "b2b_icon-nuts",
+  "b2b_icon-oat",
+  "b2b_icon-order-cancelled",
+  "b2b_icon-order-delivered",
+  "b2b_icon-order-form",
+  "b2b_icon-order-management",
+  "b2b_icon-order-misdirected",
+  "b2b_icon-order-on-road",
+  "b2b_icon-order-packed",
+  "b2b_icon-order-payment",
+  "b2b_icon-order-received",
+  "b2b_icon-order-return",
+  "b2b_icon-order-shipped",
+  "b2b_icon-order-state-unknown",
+  "b2b_icon-order-stored",
+  "b2b_icon-order",
+  "b2b_icon-otto-app",
+  "b2b_icon-otto-campus",
+  "b2b_icon-otto-company",
+  "b2b_icon-otto-laptop",
+  "b2b_icon-otto-logo",
+  "b2b_icon-otto-up-points",
+  "b2b_icon-otto-up",
+  "b2b_icon-paper-plane",
+  "b2b_icon-pause",
+  "b2b_icon-payment-credit-card",
+  "b2b_icon-payment-invoice",
+  "b2b_icon-payment-pause",
+  "b2b_icon-payment-plan-protection",
+  "b2b_icon-payment-plan",
+  "b2b_icon-pdf",
+  "b2b_icon-peanut",
+  "b2b_icon-pecan-nut",
+  "b2b_icon-pending",
+  "b2b_icon-person-access",
+  "b2b_icon-person-callcenter",
+  "b2b_icon-person-check",
+  "b2b_icon-person-colleagues",
+  "b2b_icon-person-community",
+  "b2b_icon-person-development",
+  "b2b_icon-person-female",
+  "b2b_icon-person-info",
+  "b2b_icon-person-male",
+  "b2b_icon-person-rating",
+  "b2b_icon-person-support",
+  "b2b_icon-person-switch",
+  "b2b_icon-person-workshop",
+  "b2b_icon-person",
+  "b2b_icon-phone-permission",
+  "b2b_icon-phone",
+  "b2b_icon-pig",
+  "b2b_icon-pin",
+  "b2b_icon-pinch-gesture",
+  "b2b_icon-pinch",
+  "b2b_icon-pistachio",
+  "b2b_icon-plant",
+  "b2b_icon-play-1",
+  "b2b_icon-play",
+  "b2b_icon-plus",
+  "b2b_icon-price-alert",
+  "b2b_icon-price-tag",
+  "b2b_icon-print",
+  "b2b_icon-puzzle",
+  "b2b_icon-qr-code",
+  "b2b_icon-question-hint",
+  "b2b_icon-question",
+  "b2b_icon-rating-empty",
+  "b2b_icon-rating-filled",
+  "b2b_icon-rating-half",
+  "b2b_icon-rating-order",
+  "b2b_icon-rating-payment",
+  "b2b_icon-remote-work",
+  "b2b_icon-repair",
+  "b2b_icon-reply",
+  "b2b_icon-retirement-provision",
+  "b2b_icon-rocket",
+  "b2b_icon-rye",
+  "b2b_icon-sabbatical",
+  "b2b_icon-sale",
+  "b2b_icon-save",
+  "b2b_icon-sea",
+  "b2b_icon-search-enter",
+  "b2b_icon-search",
+  "b2b_icon-seo",
+  "b2b_icon-service-info",
+  "b2b_icon-sesame",
+  "b2b_icon-settings",
+  "b2b_icon-share-ios",
+  "b2b_icon-share",
+  "b2b_icon-sheep",
+  "b2b_icon-shell",
+  "b2b_icon-shirt",
+  "b2b_icon-shopping-cart-euro",
+  "b2b_icon-shopping-cart",
+  "b2b_icon-show",
+  "b2b_icon-smiley-angry",
+  "b2b_icon-smiley-happy",
+  "b2b_icon-smiley-negative",
+  "b2b_icon-smiley-neutral",
+  "b2b_icon-smiley-positive",
+  "b2b_icon-sms-info",
+  "b2b_icon-sneaker",
+  "b2b_icon-sort-ascending",
+  "b2b_icon-sort-descending",
+  "b2b_icon-sort",
+  "b2b_icon-soy",
+  "b2b_icon-spelt",
+  "b2b_icon-stationary",
+  "b2b_icon-studies",
+  "b2b_icon-success",
+  "b2b_icon-sustainable-delivery",
+  "b2b_icon-sustainable-energy-efficient",
+  "b2b_icon-sustainable-production",
+  "b2b_icon-sustainable-recycling",
+  "b2b_icon-sustainable-resource",
+  "b2b_icon-swipe-gesture",
+  "b2b_icon-sync-device",
+  "b2b_icon-t-shirt",
+  "b2b_icon-tablet",
+  "b2b_icon-tableware",
+  "b2b_icon-target-group",
+  "b2b_icon-teddy",
+  "b2b_icon-test-result",
+  "b2b_icon-town",
+  "b2b_icon-trash",
+  "b2b_icon-trend-down",
+  "b2b_icon-trend-up",
+  "b2b_icon-trousers",
+  "b2b_icon-trusted",
+  "b2b_icon-unpin",
+  "b2b_icon-upload",
+  "b2b_icon-user-management",
+  "b2b_icon-vacation",
+  "b2b_icon-variant-content",
+  "b2b_icon-vegan",
+  "b2b_icon-vegetarian",
+  "b2b_icon-viewtoggle-tiles",
+  "b2b_icon-village",
+  "b2b_icon-volume-off",
+  "b2b_icon-volume-on",
+  "b2b_icon-voucher",
+  "b2b_icon-walnut",
+  "b2b_icon-warning",
+  "b2b_icon-warranty",
+  "b2b_icon-washing-machine",
+  "b2b_icon-whatsapp",
+  "b2b_icon-wheat",
+  "b2b_icon-wifi",
+  "b2b_icon-wishlist-active",
+  "b2b_icon-wishlist",
+  "b2b_icon-work-life",
+  "b2b_icon-workshop",
+  "b2b_icon-zoom-in",
+  "b2b_icon-zoom-out"
+];

package/dist/collection/components/input/input.css

@@ -0,0 +1,308 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 26 Apr 2023 14:13:51 GMT
+ */
+:root, :host {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-table-expand-hover: #e6f4ff;
+  --b2b-color-table-selected-hover: #e6f4ff;
+  --b2b-color-table-selected-default: #cce9ff;
+  --b2b-color-table-hover: #e6f4ff;
+  --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
+  --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-45);
+  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /* Will use 21px until design facelift */
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /* Will use 18px until design facelift */
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --b2b-size-copy-200: var(--b2b-size-45);
+  --b2b-size-copy-125: var(--b2b-size-40);
+  --b2b-size-copy-100: var(--b2b-size-35);
+  --b2b-size-copy-75: var(--b2b-size-30);
+  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+  --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
+  --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+/**
+ * Do not edit directly
+ * Generated on Wed, 26 Apr 2023 14:13:51 GMT
+ */
+:root [data-theme="dark"] {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: ObcIcons;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
+}
+:host(.b2b-input) {
+  --b2b-border-radius: var(--b2b-size-border-radius-100);
+  --b2b-border-right: 1px solid var(--b2b-color-grey-200);
+  display: block;
+  width: 100%;
+  min-width: var(--b2b-size-200);
+  font-family: var(--b2b-font-family-default);
+}
+:host(.b2b-input) .input-wrapper {
+  display: flex;
+  align-items: center;
+  height: var(--b2b-size-60);
+  border: 1px solid var(--b2b-color-grey-200);
+  border-right: var(--b2b-border-right);
+  border-radius: var(--b2b-border-radius);
+  padding: 5px var(--b2b-size-30) 5px;
+  background-color: var(--b2b-color-white-100);
+  color: var(--b2b-color-black-100);
+  position: relative;
+}
+:host(.b2b-input) .input-wrapper--focused {
+  outline: 2px solid Highlight;
+  outline: 2px solid -webkit-focus-ring-color;
+  outline-offset: -1px;
+  border-radius: var(--b2b-border-radius);
+  z-index: 9999;
+}
+:host(.b2b-input) .input-wrapper--disabled {
+  color: var(--b2b-color-grey-250);
+  background-color: var(--b2b-color-grey-25);
+}
+:host(.b2b-input) .input-wrapper--disabled .native-input {
+  background-color: var(--b2b-color-grey-25);
+}
+:host(.b2b-input) .input-wrapper .border {
+  border-left: 1px solid var(--b2b-color-grey-300);
+  height: 100%;
+  margin: 0 12px;
+}
+:host(.b2b-input) .input-wrapper .native-input {
+  font-family: var(--b2b-font-family-default);
+  font-size: var(--b2b-size-copy-100);
+  line-height: var(--b2b-size-copy-line-height-100);
+  box-sizing: border-box;
+  outline: none;
+  border: none;
+  appearance: none;
+  height: auto;
+  flex: 1 1 auto;
+  width: 0;
+}
+:host(.b2b-input) .input-wrapper .native-input::placeholder {
+  color: var(--b2b-color-grey-300);
+}
+:host(.b2b-input) b2b-input-label {
+  display: block;
+  margin-bottom: var(--b2b-size-10);
+}
+:host(.b2b-input) span {
+  font-size: var(--b2b-size-copy-75);
+  line-height: var(--b2b-size-copy-line-height-75);
+  display: block;
+  margin-top: var(--b2b-size-10);
+  color: var(--b2b-color-grey-300);
+}
+:host(.b2b-input--error) .input-wrapper,
+:host(.b2b-input--error) .native-input {
+  background-color: var(--b2b-color-error-50);
+  border: 1px solid var(--b2b-color-error-100);
+  border-right: var(--b2b-border-right);
+  border-color: var(--b2b-color-error-100);
+  color: var(--b2b-color-copy-default);
+}
+:host(.b2b-input--error) .input-wrapper::placeholder,
+:host(.b2b-input--error) .native-input::placeholder {
+  color: var(--b2b-color-copy-default);
+}
+:host(.b2b-input--error) .input-wrapper--focused {
+  outline: 2px solid var(--b2b-color-error-100);
+  outline-offset: -1px;
+}
+:host(.b2b-input--error) span {
+  color: var(--b2b-color-error-100);
+}
+::slotted(span) {
+  font-size: var(--b2b-size-copy-100);
+  cursor: default;
+  user-select: none;
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+}