@reykjavik/hanna-react 0.10.53

package/types/HeroBlock.d.ts

@@ -0,0 +1,19 @@
+import { Illustration } from '@reykjavik/hanna-utils/assets';
+import { ButtonProps } from './_abstract/Button';
+import { ImageProps } from './_abstract/Image';
+import { SeenProp } from './utils/seenEffect';
+declare type HeroBlockImageProps = {
+    illustration: Illustration;
+    image?: undefined;
+} | {
+    image: ImageProps;
+    illustration?: undefined;
+};
+export declare type HeroBlockProps = {
+    title: string;
+    summary: string | JSX.Element;
+    primaryButton?: ButtonProps;
+    secondaryButton?: ButtonProps;
+} & HeroBlockImageProps & SeenProp;
+declare const HeroBlock: (props: HeroBlockProps) => JSX.Element;
+export default HeroBlock;

package/types/IframeBlock.d.ts

@@ -0,0 +1,23 @@
+export declare type IframeBlockProps = {
+    src: string;
+    framed?: boolean;
+    compact?: boolean;
+    align?: 'right';
+} & ({
+    /** Default: 'auto' ... which initializes "iframe-resizer" script */
+    height?: 'auto';
+    scrolling?: never;
+} | {
+    height: number;
+    scrolling?: boolean | 'no' | 'yes';
+});
+/**
+ * When `height` is undefined or "auto", then Add the following code-snipped to the iframed page:
+ *
+ * ```js
+ * <script> window.iFrameResizer = { targetOrigin: '*' }; </script>
+ * <script src="https://styles.reykjavik.is/assets/scripts/iframeResizer.contentWindow@4.js"></script>
+ * ```
+ */
+declare const IframeBlock: (props: IframeBlockProps) => JSX.Element;
+export default IframeBlock;

package/types/Illustration.d.ts

@@ -0,0 +1,13 @@
+import { Illustration as IllustrationName } from '@reykjavik/hanna-utils/assets';
+import { ImageProps } from './_abstract/Image';
+declare type IllustrationProps = {
+    children?: undefined;
+} & ({
+    type: IllustrationName;
+    image?: undefined;
+} | {
+    image: ImageProps;
+    type?: undefined;
+});
+declare const Illustration: (props: IllustrationProps) => JSX.Element;
+export default Illustration;

package/types/ImageCards.d.ts

@@ -0,0 +1,8 @@
+import { ImageCardListProps, ImageCardProps as ICP } from './_abstract/CardList';
+import { SeenProp } from './utils/seenEffect';
+export declare type ImageCardProps = ICP;
+declare type _ImageCardProps = ImageCardListProps & {
+    background?: boolean;
+} & SeenProp;
+declare const ImageCards: (props: _ImageCardProps) => JSX.Element;
+export default ImageCards;

package/types/InfoBlock.d.ts

@@ -0,0 +1,17 @@
+import { SeenProp } from './utils/seenEffect';
+export declare type InfoBlockProps = {
+    title: string;
+    subtitle: string | JSX.Element;
+    items: Array<string | JSX.Element>;
+} & ({
+    attention?: undefined;
+    extraInfo?: undefined;
+} | {
+    attention: string | JSX.Element;
+    extraInfo?: undefined;
+} | {
+    extraInfo: string | JSX.Element;
+    attention?: undefined;
+}) & SeenProp;
+declare const InfoBlock: (props: InfoBlockProps) => JSX.Element;
+export default InfoBlock;

package/types/InfoHero.d.ts

@@ -0,0 +1,17 @@
+import { ButtonProps } from './_abstract/Button';
+import { ImageProps } from './_abstract/Image';
+import { Alignment } from './constants';
+declare type BlingOptions = 'waves' | 'sunny-waves' | 'triangles' | 'circles';
+export declare type InfoHeroProps = {
+    title: string;
+    titleBlurb?: string | JSX.Element;
+    /** Inserts `<br/>`s on `\n`. Collapses multiple `\n`s. */
+    subTitle?: string;
+    blurb?: string | JSX.Element;
+    buttons?: Array<ButtonProps>;
+    align?: Alignment;
+    image?: ImageProps;
+    blingType?: BlingOptions;
+};
+declare const InfoHero: (props: InfoHeroProps) => JSX.Element;
+export default InfoHero;

package/types/IslandBlock.d.ts

@@ -0,0 +1,25 @@
+import { Formheimur } from '@reykjavik/hanna-utils/assets';
+import { BlockItem } from './_abstract/_Block';
+import { ImageProps } from './_abstract/Image';
+import { SeenProp } from './utils/seenEffect';
+import { Alignment } from './constants';
+declare type IslandBaseBlockProps = {
+    align?: Alignment;
+};
+declare type IslandImageBlock = {
+    content: BlockItem;
+} & ({
+    shapes: Formheimur;
+    image?: undefined;
+} | {
+    image: ImageProps;
+    shapes?: undefined;
+});
+declare type IslandContentBlocks = {
+    content: Array<BlockItem>;
+    shapes?: undefined;
+    image?: undefined;
+};
+export declare type IslandBlockProps = IslandBaseBlockProps & (IslandContentBlocks | IslandImageBlock) & SeenProp;
+declare const IslandBlock: (props: IslandBlockProps) => JSX.Element;
+export default IslandBlock;

package/types/IslandPageBlock.d.ts

@@ -0,0 +1,24 @@
+import { Illustration } from '@reykjavik/hanna-utils/assets';
+import { BlockItem } from './_abstract/_Block';
+import { ImageProps } from './_abstract/Image';
+import { SeenProp } from './utils/seenEffect';
+import { Alignment } from './constants';
+declare const backgrounds: {
+    none: undefined;
+    gray: string;
+    secondary: string;
+};
+declare type Background = keyof typeof backgrounds;
+declare type IslandPageImageProps = {
+    illustration: Illustration;
+    image?: undefined;
+} | {
+    illustration?: undefined;
+    image: ImageProps;
+};
+export declare type IslandPageBlockProps = BlockItem & IslandPageImageProps & {
+    align?: Alignment;
+    background?: Background;
+} & SeenProp;
+declare const IslandPageBlock: (props: IslandPageBlockProps) => JSX.Element;
+export default IslandPageBlock;

package/types/LabeledTextBlock.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { ButtonProps } from './_abstract/Button';
+import { SeenProp } from './utils/seenEffect';
+export declare type LabeledTextBlockProps = {
+    label: string;
+    summary: string | ReactElement;
+    wide?: boolean;
+    buttons?: Array<ButtonProps>;
+} & SeenProp;
+declare const LabeledTextBlock: (props: LabeledTextBlockProps) => JSX.Element;
+export default LabeledTextBlock;

package/types/Layout.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { BemPropsModifier } from '@hugsmidjan/react/types';
+import { HannaColorTheme } from '@reykjavik/hanna-css';
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+export declare type LayoutI18n = {
+    lang?: string;
+    skipLinkLabel: string;
+    closeMenuLabel: string;
+    closeMenuLabelLong?: string;
+};
+export declare const defaultLayoutTexts: DefaultTexts<LayoutI18n>;
+declare type LayoutProps = {
+    globalAlerts?: ReactNode;
+    mainChildren?: ReactNode;
+    navChildren?: ReactNode;
+    footerChildren?: ReactNode;
+    colorTheme?: HannaColorTheme;
+    logoLink?: string;
+    siteName?: string;
+    modifier?: BemPropsModifier['modifier'];
+    ssr?: SSRSupport;
+    texts?: LayoutI18n;
+    lang?: string;
+} & ({
+    mainChildren: ReactNode;
+    children?: never;
+} | {
+    mainChildren?: never;
+    children: ReactNode;
+});
+declare const Layout: (props: LayoutProps) => JSX.Element;
+export default Layout;

package/types/MainMenu/_Auxiliary.d.ts

@@ -0,0 +1,6 @@
+import type { MegaMenuPanel } from '../MainMenu';
+export declare type AuxilaryPanelIllustration = 'hanna-veitiggi' | 'hanna-vandro' | 'hanna-hugsi' | 'hanna-hissa' | 'hanna-hahaha' | 'hanna-hae' | 'hanna-god_spurning' | 'hanna-gjuggiborg' | 'hanna-benda';
+export declare type AuxiliaryPanelProps = MegaMenuPanel & {
+    image?: AuxilaryPanelIllustration;
+};
+export declare const AuxiliaryPanel: (props: AuxiliaryPanelProps) => JSX.Element;

package/types/MainMenu/_PrimaryPanel.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import { MainMenuI18n, MegaMenuPanel } from '../MainMenu';
+declare type PrimaryPanelProps = {
+    setActivePanel: (panel: MegaMenuPanel | undefined, setFocus?: boolean) => void;
+    isParent?: boolean;
+    isActive?: boolean;
+    panel: MegaMenuPanel;
+    texts: MainMenuI18n;
+    activeRef: RefObject<HTMLLIElement>;
+    isBrowser: true | undefined;
+};
+export declare const PrimaryPanel: (props: PrimaryPanelProps) => JSX.Element;
+export {};

package/types/MainMenu.d.ts

@@ -0,0 +1,48 @@
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { AuxilaryPanelIllustration, AuxiliaryPanelProps } from './MainMenu/_Auxiliary';
+export declare type MainMenuI18n = {
+    lang?: string;
+    backToMenu: string;
+    backToMenuLong?: string;
+};
+export declare const defaultMainMenuTexts: DefaultTexts<MainMenuI18n>;
+export type { AuxilaryPanelIllustration, AuxiliaryPanelProps };
+export declare type MainMenuItem = {
+    label: string;
+    labelLong?: string;
+    lang?: string;
+    modifier?: string;
+    current?: boolean;
+    href?: string;
+    onClick?: (index: number, item: MainMenuItem) => void;
+    controlsId?: string;
+};
+export declare type MainMenuSeparator = '---';
+export declare type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator>;
+export declare type MegaMenuItem = {
+    label: string;
+    summary?: string;
+    href: string;
+    lang?: string;
+    current?: boolean;
+    target?: string;
+};
+export declare type MegaMenuPanel = {
+    title: string;
+    items: Array<MegaMenuItem>;
+    id: string;
+};
+export declare type MainMenuProps = {
+    title: string;
+    items: MainMenuItemList;
+    megaPanels?: Array<MegaMenuPanel>;
+    auxiliaryPanel?: AuxiliaryPanelProps;
+    onItemClick?: (index: number, item: MainMenuItem) => void;
+    activePanelId?: string;
+    texts?: MainMenuI18n;
+    lang?: string;
+    ssr?: SSRSupport;
+};
+declare const MainMenu: (props: MainMenuProps) => JSX.Element;
+export default MainMenu;

package/types/MiniMetrics.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from './_abstract/Button';
+import { SeenProp } from './utils/seenEffect';
+export declare type MiniMetricsProps = {
+    text: string;
+    moreButton: ButtonProps;
+} & SeenProp;
+declare const MiniMetrics: (props: MiniMetricsProps) => JSX.Element;
+export default MiniMetrics;

package/types/Modal.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { ModalProps as _ModalProps } from '@hugsmidjan/react/Modal';
+export declare type ModalProps = _ModalProps & {
+    bem?: never;
+    bodyWrap?: never;
+    modifier?: 'w6' | 'w8' | 'w10';
+    bling?: ReactElement;
+};
+declare const Modal: (props: ModalProps) => JSX.Element;
+export default Modal;

package/types/NameCard.d.ts

@@ -0,0 +1,64 @@
+export declare type NameCardI18n = {
+    updatedLabel: string;
+    availableLabel: string;
+    unavailableLabel: string;
+    /** @deprecated Use availableLabel instead  (will be removed in v0.11) */
+    vacancyLabel?: string;
+    /** @deprecated Use unavailableLabel instead  (will be removed in v0.11) */
+    noVacancyLabel?: string;
+    /** @deprecated Not used anymore  (will be rmoved in v0.11) */
+    telLabel?: string;
+};
+declare type ContactInfo = {
+    href: string;
+    label: string;
+    longLabel?: string;
+};
+/** @deprecated use label and longLabel props instead  (Will be removed in v0.11) */
+declare type DeprecatedContactInfo = {
+    href: string;
+    value: string;
+    label?: string;
+};
+export declare type NameCardProps = {
+    name: string;
+    /** Phone numbers, e-mail addresses, etc. */
+    contactInfo?: Array<string | ContactInfo | DeprecatedContactInfo>;
+    /** Address/location info
+     *
+     * Special handling of string:
+     * Inserts `<br/>`s on `\n`. Collapses multiple `\n`s.
+     *
+     * Only simple, inline element HTML allowed
+     */
+    location?: string | JSX.Element;
+    /** Misc info such as opening-hours, etc.
+     *
+     * Special handling of string:
+     * Inserts `<br/>`s on `\n`. Collapses multiple `\n`s.
+     *
+     * Only simple, inline element HTML allowed
+     */
+    aboutText?: string | JSX.Element;
+    /**
+     * Designated for info about working/opening hours
+     *
+     * Special handling of string:
+     * Inserts `<br/>`s on `\n`. Collapses multiple `\n`s.
+     *
+     * Only simple, inline element HTML allowed
+     */
+    hours?: string | JSX.Element;
+    /** Displays "active" indicator. Use for vacancies, inline-status, etc. */
+    available?: boolean;
+    /** Meta data about freshness status, etc. */
+    updated?: string | Date;
+    lang?: string;
+    texts?: NameCardI18n;
+    /** @deprecated Use `available` instead  (will be removed in v0.11) */
+    vacancy?: boolean;
+    /** @deprecated Use `contactInfo` instead  (will be removed in v0.11) */
+    tel?: string | Array<string>;
+};
+declare const NameCard: (props: NameCardProps) => JSX.Element;
+export default NameCard;

package/types/NameCards.d.ts

@@ -0,0 +1,6 @@
+import { NameCardProps } from './NameCard';
+declare type NameCardsProps = {
+    items: Array<NameCardProps>;
+};
+declare const NameCards: (props: NameCardsProps) => JSX.Element;
+export default NameCards;

package/types/NewsHero.d.ts

@@ -0,0 +1,14 @@
+import { ImageProps } from './_abstract/Image';
+import { SeenProp } from './utils/seenEffect';
+declare type BlingOptions = 'interesting' | 'snake' | 'pentagon' | 'dome' | 'balls-small' | 'balls-large';
+export declare type NewsHeroProps = {
+    title: string;
+    meta?: string;
+    summary?: string | JSX.Element;
+    /** For custom sharing component  */
+    sharing?: boolean | (() => JSX.Element);
+    image?: ImageProps;
+    blingType?: BlingOptions;
+} & SeenProp;
+declare const NewsHero: (props: NewsHeroProps) => JSX.Element;
+export default NewsHero;

package/types/PageFilter.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SeenProp } from './utils/seenEffect';
+export declare type PageFilterProps = {
+    title: string;
+    summary?: React.ReactNode;
+    footnote?: React.ReactNode;
+    buttonRow?: React.ReactNode;
+    underlap?: boolean;
+} & ({
+    filters: React.ReactNode;
+    children?: never;
+} | {
+    filters?: never;
+    children: React.ReactNode;
+}) & SeenProp;
+declare const PageFilter: (props: PageFilterProps) => JSX.Element;
+export default PageFilter;

package/types/PageHeading.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { SeenProp } from './utils/seenEffect';
+export declare type PageHeadingProps = {
+    Tag?: 'h1' | 'h2';
+    align?: 'right';
+    small?: boolean;
+    children: ReactNode;
+} & SeenProp;
+declare const PageHeading: (props: PageHeadingProps) => JSX.Element;
+export default PageHeading;

package/types/ProcessOverview.d.ts

@@ -0,0 +1,13 @@
+export declare type ProcessOverviewItemProps = {
+    title: string;
+    content: string | JSX.Element;
+};
+export declare type ProcessOverviewProps = {
+    title: string;
+    items: Array<ProcessOverviewItemProps>;
+    attention?: string | JSX.Element;
+    transparent?: boolean;
+    narrow?: boolean;
+};
+declare const ProcessOverview: (props: ProcessOverviewProps) => JSX.Element;
+export default ProcessOverview;

package/types/PullQuote.d.ts

@@ -0,0 +1,4 @@
+import { QuoteProps } from './_abstract/_Quote';
+export declare type PullQuoteProps = QuoteProps;
+declare const PullQuote: (props: PullQuoteProps) => JSX.Element;
+export default PullQuote;

package/types/RadioButtonsGroup.d.ts

@@ -0,0 +1,11 @@
+import { TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/TogglerGroupField';
+export declare type RadioButtonsGroupProps = TogglerGroupFieldProps & {
+    value?: string;
+    /** @deprecated (Will be removed in v0.9) */
+    columns?: '2col' | '3col';
+    /** @deprecated (Will be removed in v0.9) */
+    layout?: 'slim';
+};
+export declare type RadioButtonsGroupOptions = TogglerGroupFieldOptions;
+declare const RadioButtonsGroup: (props: RadioButtonsGroupProps) => JSX.Element;
+export default RadioButtonsGroup;

package/types/RadioGroup.d.ts

@@ -0,0 +1,13 @@
+import { TogglerGroupFieldOption, TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/TogglerGroupField';
+import { TogglerInputProps } from './_abstract/TogglerInput';
+export declare type RadioGroupProps = TogglerGroupFieldProps & {
+    layout?: 'inline';
+    value?: string;
+};
+export declare type RadioGroupOption = TogglerGroupFieldOption;
+export declare type RadioGroupOptions = TogglerGroupFieldOptions;
+declare const RadioGroup: {
+    (props: RadioGroupProps): JSX.Element;
+    __Radio: (props: TogglerInputProps) => JSX.Element;
+};
+export default RadioGroup;

package/types/RelatedLinks.d.ts

@@ -0,0 +1,20 @@
+declare const types: {
+    readonly external: 1;
+    readonly document: 1;
+    readonly pdf: 1;
+    readonly link: 0;
+};
+export declare type RelatedLinkType = keyof typeof types;
+export declare type RelatedLinkItem = {
+    href: string;
+    label: string;
+    target?: string;
+    type?: RelatedLinkType;
+};
+export declare type RelatedLinksProps = {
+    title?: string;
+    titleTag?: 'h2' | 'h3' | 'h4' | 'h5';
+    links: Array<RelatedLinkItem>;
+};
+declare const RelatedLinks: (props: RelatedLinksProps) => JSX.Element | null;
+export default RelatedLinks;

package/types/RowBlock.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { BemPropsModifier } from '@hugsmidjan/react/types';
+import { SeenProp } from './utils/seenEffect';
+export declare type RowBlockProps = {
+    /** Float the first RowBlockColumn to the right on larger screens. */
+    right?: boolean;
+    /** Custom **additional** class-name */
+    className?: string;
+    children: ReactNode;
+} & BemPropsModifier & SeenProp;
+declare const RowBlock: (props: RowBlockProps) => JSX.Element;
+export default RowBlock;

package/types/RowBlockColumn.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare type RowBlockColumnProps = {
+    background?: boolean | 'primary';
+    narrow?: boolean;
+    children: ReactNode;
+};
+declare const RowBlockColumn: (props: RowBlockColumnProps) => JSX.Element;
+export default RowBlockColumn;

package/types/SearchInput.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+import { FormFieldWrappingProps } from './FormField';
+declare type InputElmProps = JSX.IntrinsicElements['input'];
+declare type BaseProps<Type extends {
+    type?: string;
+}, InputProps extends object> = {
+    small?: boolean;
+    children?: undefined;
+    onButtonClick?: () => void;
+    buttonText?: string;
+    inputRef?: RefObject<HTMLInputElement>;
+    buttonRef?: RefObject<HTMLButtonElement>;
+} & Type & FormFieldWrappingProps & InputProps;
+export declare type SearchInputProps = BaseProps<{
+    type?: 'text';
+}, InputElmProps>;
+declare const SearchInput: (props: SearchInputProps) => JSX.Element;
+export default SearchInput;

package/types/SearchResults/_SearchResultsItem.d.ts

@@ -0,0 +1,18 @@
+declare type MetaValue = string | (() => JSX.Element | string | number);
+export declare type SearchResultsItemProps = {
+    /** Plain text title */
+    title: string;
+    /** Simple HTML-encoded summary (excluding any layout)  */
+    summary: string;
+    href: string;
+    meta?: MetaValue | ReadonlyArray<MetaValue>;
+    /**
+     * URL to the image to display with the result item.
+     * Should ideally be approximately 600-700px wide
+     */
+    image?: string;
+    /** Should this search-result item be displayed as a "major"/"main" result at the top */
+    highlight?: boolean;
+};
+declare const SearchResultsItem: (props: SearchResultsItemProps) => JSX.Element;
+export default SearchResultsItem;

package/types/SearchResults.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { SearchResultsItemProps } from './SearchResults/_SearchResultsItem';
+export declare type SearchReesultI18n = {
+    lang: string;
+    loadQueryTitle: string;
+    resultsTitle: string;
+    noResultsTitle: string;
+    loadMore: string;
+};
+export declare type SearchStatus = 'loadingquery' | 'loadingfilter' | 'error' | 'results' | 'loadingmore';
+export declare type SearchResultsFilter = {
+    label: string;
+    count?: number;
+};
+export type { SearchResultsItemProps } from './SearchResults/_SearchResultsItem';
+export declare type SearchResultsProps = {
+    totalHits?: number;
+    hits?: number;
+    query?: string;
+    items?: Array<SearchResultsItemProps>;
+    filters?: Array<SearchResultsFilter>;
+    activeFilterIdx?: number;
+    setFilter?: (activeTab: number) => void;
+    status: SearchStatus;
+    errorText?: string | ReactNode;
+    pageSize: number;
+    pages?: number;
+    loadMore?: () => void;
+    texts?: SearchReesultI18n;
+    lang?: string;
+};
+declare const SearchResults: (props: SearchResultsProps) => JSX.Element;
+export default SearchResults;

package/types/SeenEffect.d.ts

@@ -0,0 +1,4 @@
+import { EffectProp, SeenProp } from './utils/seenEffect';
+export declare type SeenEffectProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & SeenProp & EffectProp;
+declare const SeenEffect: (props: SeenEffectProps) => JSX.Element;
+export default SeenEffect;

package/types/Selectbox.d.ts

@@ -0,0 +1,8 @@
+import { SelectboxProps as _SelectboxProps } from '@hugsmidjan/react/Selectbox';
+import { FormFieldWrappingProps } from './FormField';
+export declare type SelectboxProps = FormFieldWrappingProps & Omit<_SelectboxProps, 'bem'> & {
+    small?: boolean;
+};
+export type { SelectboxOptions } from '@hugsmidjan/react/Selectbox';
+declare const Selectbox: (props: SelectboxProps) => JSX.Element;
+export default Selectbox;

package/types/ShareButtons.d.ts

@@ -0,0 +1,9 @@
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { ShareButtonI18n, ShareButtonPlatforms } from '@reykjavik/hanna-utils/shareButtonsUtils';
+export declare type ShareButtonsProps = {
+    ssr?: SSRSupport;
+    children?: undefined;
+    texts?: Readonly<ShareButtonI18n>;
+} & Partial<Record<ShareButtonPlatforms, boolean>>;
+declare const ShareButtons: (props: ShareButtonsProps) => JSX.Element | null;
+export default ShareButtons;

package/types/Sharpie.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+declare const colors: {
+    green: number;
+    red: number;
+};
+declare type SharpieColor = keyof typeof colors;
+declare const tags: {
+    span: number;
+    strong: number;
+    em: number;
+    b: number;
+    i: number;
+    u: number;
+    s: number;
+};
+declare type SharpieTag = keyof typeof tags;
+export declare type SharpieProps = {
+    color: SharpieColor;
+    tag?: SharpieTag;
+    children: ReactNode;
+};
+declare const Sharpie: (props: SharpieProps) => JSX.Element;
+export default Sharpie;