) => {
+ return (
+
+ );
+};
+TripleSnakes.backgroundColor = "#F8B03D";
diff --git a/styleguide/src/illustrations/types.ts b/styleguide/src/illustrations/types.ts
new file mode 100644
index 0000000000..b2c0ecc2f0
--- /dev/null
+++ b/styleguide/src/illustrations/types.ts
@@ -0,0 +1,29 @@
+export type Illustration =
+ | "cathedral"
+ | "florence"
+ | "florence2"
+ | "handWithSnakeInside"
+ | "snake1"
+ | "snake2"
+ | "snake4"
+ | "snake5"
+ | "snakeBody"
+ | "snakeCouple"
+ | "snakeDNA"
+ | "snakeHead"
+ | "snakeInDragon"
+ | "snakeInDragonInverted"
+ | "snakeLetter"
+ | "snakeLongNeck"
+ | "snakeTail"
+ | "snakePencil"
+ | "snakeWithBalloon"
+ | "snakeWithContacts"
+ | "snakesWithBanner"
+ | "snakesWithCocktail"
+ | "snakesWithDirections"
+ | "snakesWithOutlines"
+ | "tripleSnakes"
+ | "snakeTailUp"
+ | "snakeWithPopcorn"
+ | "snakesFacingLeft";
diff --git a/styleguide/src/index.ts b/styleguide/src/index.ts
new file mode 100644
index 0000000000..89835cb6df
--- /dev/null
+++ b/styleguide/src/index.ts
@@ -0,0 +1,71 @@
+// styles
+import "./base.css";
+import "./custom.css";
+
+// components
+export { NavBar } from "./navbar/navbar";
+export { Heading } from "./heading/heading";
+export { SpeakerCard } from "./speaker-card";
+export { Marquee } from "./marquee/marquee";
+export { Carousel } from "./carousel/carousel";
+export { SplitSection } from "./split-section/split-section";
+export { Schedule } from "./schedule/schedule";
+export { ScheduleProgram } from "./schedule/types";
+export { Colors } from "./colors/colors";
+export { Wrapper } from "./wrapper/wrapper";
+export { Paragraph } from "./paragraph/paragraph";
+export { LocalTime } from "./local-time/local-time";
+export { Ticket, TicketHolder, Lanyard, TicketWithHolder } from "./ticket";
+export { FullscreenOverlay } from "./fullscreen-overlay";
+export { Button, BasicButton } from "./button";
+export { VerticalStack } from "./vertical-stack";
+export { HorizontalStack } from "./horizontal-stack";
+export { Spacer } from "./spacer/spacer";
+export { IntermissionText } from "./livestream-itermission-text";
+export { EmbeddedTwitch } from "./embedded-video";
+export { Text } from "./text";
+export { Link } from "./link";
+export { Countdown } from "./countdown";
+export { Section } from "./section";
+export { Page } from "./page";
+export { getMessagesForLocale } from "./lang";
+export {
+ MultiplePartsCard,
+ CardPart,
+ CardPartIncrements,
+ CardPartOptions,
+ CardPartAddRemove,
+ CardPartTwoSides,
+} from "./multiple-parts-card";
+export { MultiplePartsCardCollection } from "./multiple-parts-card-collection";
+export { SliderGrid } from "./slider-grid";
+export { Separator } from "./separator";
+export { Footer } from "./footer";
+export { Container } from "./container";
+export { BottomBar } from "./bottom-bar";
+export { Grid, GridColumn } from "./grid";
+export { Tag } from "./tag";
+export { TagsCollection } from "./tags-collection";
+export { Input } from "./input";
+export { InputWrapper } from "./input-wrapper";
+export { InputNumber } from "./input-number";
+export { Select } from "./select";
+export { Textarea } from "./textarea";
+export { LayoutContent } from "./layout-content";
+export { SocialLinks } from "./social-links";
+export { ScrollDownArrowBar } from "./scrolldown-arrow-bar";
+export { SponsorsGrid } from "./sponsors-grid";
+export { ScheduleItemCard } from "./schedule/schedule-item-card";
+export { DaysSelector } from "./days-selector";
+export { Avatar } from "./avatar";
+export { AvatarGroup } from "./avatar-group";
+export { Checkbox } from "./checkbox";
+export { StyledHTMLText, StyledText } from "./styled-text";
+export { FilterBar } from "./filter-bar";
+export { HeroIllustration, HeroIllustrationBologna } from "./hero-illustration";
+export { FileInput } from "./file-input";
+
+// tailwind config
+export { default as tailwindConfig } from "../tailwind.config";
+export { colors } from "./config-parts";
+export { getIcon } from "./icons";
diff --git a/styleguide/src/input-number/index.tsx b/styleguide/src/input-number/index.tsx
new file mode 100644
index 0000000000..3b21f8d6b8
--- /dev/null
+++ b/styleguide/src/input-number/index.tsx
@@ -0,0 +1 @@
+export { InputNumber } from "./input-number";
diff --git a/styleguide/src/input-number/input-number.stories.tsx b/styleguide/src/input-number/input-number.stories.tsx
new file mode 100644
index 0000000000..c336d4b77b
--- /dev/null
+++ b/styleguide/src/input-number/input-number.stories.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { InputNumber } from "./input-number";
+
+export default {
+ title: "Input Number",
+};
+
+const VALUES = [
+ { value: "1", label: "Didn't like it" },
+ { value: "2", label: "Ok" },
+ { value: "3", label: "I like it" },
+ { value: "4", label: "Was amazing!" },
+];
+
+export const Primary = () => {
+ const [value, setValue] = useState("");
+ const [selected, setSelected] = useState("4");
+
+ return (
+
+ );
+};
diff --git a/styleguide/src/input-number/input-number.tsx b/styleguide/src/input-number/input-number.tsx
new file mode 100644
index 0000000000..ef1fd37999
--- /dev/null
+++ b/styleguide/src/input-number/input-number.tsx
@@ -0,0 +1,54 @@
+import clsx from "clsx";
+import { Heading } from "../heading";
+import { Text } from "../text";
+import React from "react";
+
+type Props = {
+ values: { value: number | string; label: string | React.ReactNode }[];
+ value?: number | string | undefined;
+ onClick?: (value: number | string) => void;
+};
+
+export const InputNumber = ({ values, value, onClick }: Props) => {
+ const valuesById = Object.fromEntries(
+ values.map((value) => [value.value, value.label])
+ );
+
+ return (
+
+
+ {values.map((element) => (
+
onClick?.(element.value)}
+ >
+
{element.value}
+
+
+ {valuesById[element.value]}
+
+
+ ))}
+
+
+ Value
+
+
+
+ setValue(e.target.value)}
+ value={value}
+ />
+
+
+ );
+};
+
+export const FormExample = ({ title, description, required }) => {
+ const [value, setValue] = useState("");
+ const [selectValue, setSelectValue] = useState("");
+ const [textareaValue, setTextareaValue] = useState("");
+
+ return (
+
+
+ setValue(e.target.value)}
+ value={value}
+ />
+
+
+
+
+
+
+
+