@veracity/vui 0.6.2 → 0.7.0-beta.0

package/cjs/core/media.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUp = exports.useMedia = exports.useDown = exports.useBetween = exports.RenderOnScreen = exports.RenderOnMobile = exports.RenderOnDesktop = exports.mediaUp = exports.mediaDown = exports.mediaBetween = void 0;
+const styled_components_1 = require("@xstyled/styled-components");
+const react_1 = __importDefault(require("react"));
+const theme_1 = require("./theme");
+/** Returns CSS media string with appropriate min-width and max-width values. */
+const mediaBetween = (minWidth, maxWidth) => (props) => `@media (min-width: ${theme_1.th.screen(minWidth)(props)}) and (max-width: ${theme_1.th.screen(maxWidth)(props)})`;
+exports.mediaBetween = mediaBetween;
+/** Returns CSS media string with appropriate max-width value */
+const mediaDown = (width) => (props) => {
+    return `@media (max-width: ${theme_1.th.screen(width)(props)})`;
+};
+exports.mediaDown = mediaDown;
+/** Returns CSS media string with appropriate min-width value. */
+const mediaUp = (width) => (props) => `@media (min-width: ${theme_1.th.screen(width)(props)})`;
+exports.mediaUp = mediaUp;
+/** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
+const RenderOnDesktop = props => react_1.default.createElement(exports.RenderOnScreen, Object.assign({}, props));
+exports.RenderOnDesktop = RenderOnDesktop;
+/** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
+const RenderOnMobile = props => react_1.default.createElement(exports.RenderOnScreen, Object.assign({ isDown: true }, props));
+exports.RenderOnMobile = RenderOnMobile;
+/**
+ * Renders its content when viewport width is at or above a provided breakpoint.
+ * Optionally, direction can be set to down, or below, the breakpoint.
+ */
+const RenderOnScreen = ({ children, isDown, screen = 'md' }) => {
+    const mediaFn = isDown ? useDown : useUp;
+    return mediaFn(screen) ? react_1.default.createElement(react_1.default.Fragment, null, children) : null;
+};
+exports.RenderOnScreen = RenderOnScreen;
+/** Returns true if current viewport width is between provided min and max widths. */
+function useBetween(minWidth, maxWidth) {
+    const isDown = useDown(maxWidth);
+    const isUp = useUp(minWidth);
+    return isDown && isUp;
+}
+exports.useBetween = useBetween;
+/** Returns true if current viewport width is smaller than provided width. */
+function useDown(width) {
+    const { value, viewportWidth } = useMedia(width);
+    return viewportWidth !== null && value !== null && viewportWidth < value;
+}
+exports.useDown = useDown;
+/** Returns viewport width and provided screen width as a number. */
+function useMedia(width) {
+    const theme = (0, theme_1.useTheme)();
+    const viewportWidth = (0, styled_components_1.useViewportWidth)();
+    const valueString = theme_1.th.screen(width)({ theme });
+    const value = Number(valueString.replace('px', ''));
+    return { value, viewportWidth };
+}
+exports.useMedia = useMedia;
+/** Returns true if current viewport width is larger than or equal to provided width. */
+function useUp(width) {
+    const { value, viewportWidth } = useMedia(width);
+    return viewportWidth !== null && value !== null && viewportWidth >= value;
+}
+exports.useUp = useUp;

package/cjs/core/styled.js

@@ -0,0 +1,94 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styled = exports.v = exports.css = exports.createGlobalStyle = void 0;
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const core_1 = require("@xstyled/core");
+const styled_components_1 = require("@xstyled/styled-components");
+const util_1 = require("@xstyled/util");
+const styled_components_2 = __importStar(require("styled-components"));
+const system_1 = require("../system");
+/** Creates enhanced 'styled' function with optional style generators and prop-forwarding safeguard. */
+function createBaseStyled(css, generator) {
+    const config = generator ? forwardPropConfig(generator) : {};
+    return ((component) => {
+        const baseStyled = config ? (0, styled_components_2.default)(component).withConfig(config) : (0, styled_components_2.default)(component);
+        return getCreateStyle(baseStyled, css, generator);
+    });
+}
+/** Enhances createGlobalStyle function with custom 'css' helper. */
+function createCreateGlobalStyle() {
+    const css = createCssFunction();
+    return ((...args) => (0, styled_components_2.createGlobalStyle)([
+        // @ts-ignore
+        css(...args)
+    ]));
+}
+/** Enhances styled-components' 'css' function with automatic theming. */
+function createCssFunction() {
+    return ((...args) => {
+        const scCssArgs = (0, styled_components_2.css)(...args);
+        const flattenedArgs = (0, util_1.flattenStrings)(scCssArgs);
+        return flattenedArgs.map(core_1.transform);
+    });
+}
+/**
+ * Creates full 'styled' function with properties for components.
+ * Includes base version and system version using 'Box' postfix.
+ */
+function createStyled(generator) {
+    const css = createCssFunction();
+    const styled = createBaseStyled(css);
+    const vstyled = createBaseStyled(css, generator);
+    Object.keys(styled_components_2.default).forEach(key => {
+        // @ts-ignore
+        styled[key] = styled(key);
+        // @ts-ignore
+        styled[`${key}Box`] = vstyled(key);
+    });
+    return styled;
+}
+/** Provides configuration to the 'styled' function, which filters out xstyled system props. */
+function forwardPropConfig(generator) {
+    return {
+        shouldForwardProp: (prop, defaultValidatorFn) => {
+            if (typeof prop === 'string' && generator.meta.props.includes(prop))
+                return false;
+            return defaultValidatorFn(prop);
+        }
+    };
+}
+/** Extends styled component with a given styles generator (system). */
+function getCreateStyle(baseCreateStyle, css, generator) {
+    const createStyle = (...args) => baseCreateStyle `${css(...args)}${generator}`;
+    createStyle.attrs = (attrs) => getCreateStyle(baseCreateStyle.attrs(attrs), css, generator);
+    createStyle.withConfig = (config) => getCreateStyle(baseCreateStyle.withConfig(config), css, generator);
+    return createStyle;
+}
+exports.createGlobalStyle = createCreateGlobalStyle();
+exports.css = createCssFunction();
+exports.v = (0, styled_components_1.createX)(system_1.system);
+exports.styled = createStyled(system_1.system);
+exports.default = exports.styled;

package/cjs/core/theme.js

@@ -0,0 +1,82 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = exports.useTh = exports.useStyleConfig = exports.th = exports.omitThemingProps = exports.extendTheme = void 0;
+const styled_components_1 = require("@xstyled/styled-components");
+const react_1 = require("react");
+const styled_components_2 = require("styled-components");
+const theme_1 = __importDefault(require("../theme"));
+const utils_1 = require("../utils");
+/** Merges provided theme extensions and overrides with default VUI theme. */
+function extendTheme(extensions) {
+    return (0, utils_1.merge)(theme_1.default, extensions);
+}
+exports.extendTheme = extendTheme;
+/** Removes specific theming keys from the given props. */
+function omitThemingProps(props) {
+    const { size, variant } = props, rest = __rest(props, ["size", "variant"]); // eslint-disable-line @typescript-eslint/no-unused-vars
+    return rest;
+}
+exports.omitThemingProps = omitThemingProps;
+/** Re-export of xstyled 'th' with custom typing and screen getter. */
+const th = styled_components_1.th;
+exports.th = th;
+th.screen = (0, styled_components_1.themeGetter)({
+    name: 'screen',
+    key: 'screens',
+    compose: styled_components_1.getPx
+});
+/**
+ * Combines baseStyle, size and variant styling from a component's theme configuration.
+ * @param component - name of any component configured in the theme
+ * @param props - props object of the given component
+ */
+function useStyleConfig(component, props = {}) {
+    var _a;
+    const theme = useTheme();
+    const { baseStyle, defaultProps, parts = [], sizes, variants } = (_a = theme === null || theme === void 0 ? void 0 : theme.components[component]) !== null && _a !== void 0 ? _a : {};
+    const mergedProps = Object.assign(Object.assign({}, defaultProps), props);
+    const { colorScheme, size, variant } = mergedProps;
+    return (0, react_1.useMemo)(() => {
+        var _a, _b, _c;
+        const baseStyles = (_a = (0, utils_1.runIfFn)(baseStyle, mergedProps)) !== null && _a !== void 0 ? _a : {};
+        const sizeStyles = (_b = (0, utils_1.runIfFn)(sizes === null || sizes === void 0 ? void 0 : sizes[size], mergedProps)) !== null && _b !== void 0 ? _b : {};
+        const variantStyles = (_c = (0, utils_1.runIfFn)(variants === null || variants === void 0 ? void 0 : variants[variant], mergedProps)) !== null && _c !== void 0 ? _c : {};
+        let styles = {};
+        if (parts.length > 0) {
+            parts.forEach((part) => {
+                var _a, _b, _c;
+                styles[part] = (0, utils_1.merge)((_a = baseStyles[part]) !== null && _a !== void 0 ? _a : {}, (_b = sizeStyles[part]) !== null && _b !== void 0 ? _b : {}, (_c = variantStyles[part]) !== null && _c !== void 0 ? _c : {});
+            });
+        }
+        else {
+            styles = (0, utils_1.merge)(baseStyles, sizeStyles, variantStyles);
+        }
+        return styles;
+    }, [colorScheme, size, variant]);
+}
+exports.useStyleConfig = useStyleConfig;
+/** Returns theme value at the given path. */
+function useTh(path, defaultValue) {
+    const theme = useTheme();
+    return th(path, defaultValue)({ theme });
+}
+exports.useTh = useTh;
+/** Returns the theme object with extensions. */
+function useTheme() {
+    return (0, styled_components_2.useTheme)();
+}
+exports.useTheme = useTheme;

package/cjs/core/vui.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.vui = void 0;
+const react_1 = __importDefault(require("react"));
+/**
+ * Component creation utility, which combines forwardRef, memo and ensures correct typing with all props included.
+ * Config object allows toggling memoization and providing custom 'areEqual' function.
+ */
+function vui(component, config) {
+    const { memoCompare, isMemo = true } = config !== null && config !== void 0 ? config : {};
+    if (isMemo) {
+        return react_1.default.memo(react_1.default.forwardRef(component), memoCompare);
+    }
+    return react_1.default.forwardRef(component);
+}
+exports.vui = vui;
+exports.default = vui;

package/cjs/core/vuiProvider/animations.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spin = exports.pulse = exports.fadeUp = exports.fadeRight = exports.fadeOut = exports.fadeLeft = exports.fadeIn = exports.fadeDown = exports.bounce = void 0;
+exports.bounce = `
+	0%, 100% {
+		animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);
+		transform: translateY(-25%);
+	}
+	50% {
+		animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);
+		transform: translateY(0);
+	}
+`;
+exports.fadeDown = `
+	from {
+		opacity: 0;
+		transform: translateY(-20px)
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0)
+	}
+`;
+exports.fadeIn = `
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+`;
+exports.fadeLeft = `
+	from {
+		opacity: 0;
+		transform: translateX(20px)
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0)
+	}
+`;
+exports.fadeOut = `
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+`;
+exports.fadeRight = `
+	from {
+		opacity: 0;
+		transform: translateX(-20px)
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0)
+	}
+`;
+exports.fadeUp = `
+	from {
+		opacity: 0;
+		transform: translateY(20px)
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0)
+	}
+`;
+exports.pulse = `
+	0%, 100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: .5;
+	}
+`;
+exports.spin = `
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+`;

package/cjs/core/vuiProvider/fontFaces.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const __1 = require("../");
+exports.default = `
+	@font-face {
+		font-family: 'Avenir Next';
+		src: url('${__1.cdnUrl}/common/fonts/avenir-regular-lat-ext.woff');
+		font-weight: 400;
+	}
+
+	@font-face {
+		font-family: 'Avenir Next';
+		src: url('${__1.cdnUrl}/common/fonts/avenir-medium-lat-ext.woff');
+		font-weight: 500;
+	}
+
+	@font-face {
+		font-family: 'Avenir Next';
+		src: url('${__1.cdnUrl}/common/fonts/avenir-demi-lat-ext.woff');
+		font-weight: 600;
+	}
+
+	@font-face {
+		font-family: 'Avenir Next';
+		src: url('${__1.cdnUrl}/common/fonts/avenir-bold-lat-ext.woff');
+		font-weight: 700;
+	}
+`;

package/cjs/core/vuiProvider/globalStyle.js

@@ -0,0 +1,98 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const foundations_1 = __importDefault(require("../../theme/foundations"));
+const utils_1 = require("../../utils");
+const styled_1 = require("../styled");
+const animations_1 = require("./animations");
+const fontFaces_1 = __importDefault(require("./fontFaces"));
+/**
+ * Provides global styles, such as:
+ * - font face definitions
+ * - font base styles (color, size, family)
+ * - animation keyframes
+ * - CSS variables for each theme value
+ */
+exports.default = (0, styled_1.createGlobalStyle) `
+	${fontFaces_1.default}
+
+	:root {
+		${generateCSSVariables}
+	}
+
+	* {
+		--x-ring-color: var(--vui-colors-blue-50);
+		// Fixes a box-shadow issue between some parent and child components
+		--x-shadow: 0 0 0 0 transparent;
+	}
+
+	${p => p.globalStyle &&
+    (0, styled_1.css) `
+			body {
+				color: prussian.80;
+				font-family: avenir;
+				font-size: md;
+			}
+		`}
+
+	@keyframes vui-bounce {
+		${animations_1.bounce}
+	}
+
+	@keyframes vui-fadeDown {
+		${animations_1.fadeDown}
+	}
+
+	@keyframes vui-fadeIn {
+		${animations_1.fadeIn}
+	}
+
+	@keyframes vui-fadeLeft {
+		${animations_1.fadeLeft}
+	}
+
+	@keyframes vui-fadeOut {
+		${animations_1.fadeOut}
+	}
+
+	@keyframes vui-fadeRight {
+		${animations_1.fadeRight}
+	}
+
+	@keyframes vui-fadeUp {
+		${animations_1.fadeUp}
+	}
+
+	@keyframes vui-pulse {
+		${animations_1.pulse}
+	}
+
+	@keyframes vui-spin {
+		${animations_1.spin}
+	}
+`;
+/** Recursively maps through all theme styles and generates a set of CSS properties. */
+function generateCSSVariables() {
+    function computeStyle(name, value) {
+        if (!(0, utils_1.isObject)(value))
+            return `${name}: ${typeof value === 'string' ? value : `${value}px`};\n`;
+        return Object.entries(value).reduce((str, [key, value]) => {
+            return (str += computeStyle(`${name}-${key}`, value));
+        }, '');
+    }
+    const { animations, transformers } = foundations_1.default, styles = __rest(foundations_1.default, ["animations", "transformers"]);
+    return computeStyle('--vui', styles);
+}

package/cjs/core/vuiProvider/index.js

@@ -0,0 +1,30 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VuiProvider = exports.default = exports.ResetCSS = exports.GlobalStyle = exports.fontFaces = void 0;
+__exportStar(require("./animations"), exports);
+var fontFaces_1 = require("./fontFaces");
+Object.defineProperty(exports, "fontFaces", { enumerable: true, get: function () { return __importDefault(fontFaces_1).default; } });
+var globalStyle_1 = require("./globalStyle");
+Object.defineProperty(exports, "GlobalStyle", { enumerable: true, get: function () { return __importDefault(globalStyle_1).default; } });
+var resetCSS_1 = require("./resetCSS");
+Object.defineProperty(exports, "ResetCSS", { enumerable: true, get: function () { return __importDefault(resetCSS_1).default; } });
+var vuiProvider_1 = require("./vuiProvider");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(vuiProvider_1).default; } });
+Object.defineProperty(exports, "VuiProvider", { enumerable: true, get: function () { return __importDefault(vuiProvider_1).default; } });

package/cjs/core/vuiProvider/resetCSS.js

@@ -0,0 +1,176 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_1 = require("../styled");
+/** Set of CSS resets to unify styles across browsers and provide good style defaults. */
+exports.default = (0, styled_1.createGlobalStyle) `
+	html {
+		box-sizing: border-box;
+		line-height: 1.4;
+		-webkit-text-size-adjust: 100%;
+	}
+
+	*, *::before, *::after {
+		border-style: solid;
+		border-width: 0;
+		box-sizing: inherit;
+	}
+
+	body {
+		margin: 0;
+	}
+
+	a {
+		background-color: transparent;
+		color: inherit;
+		text-decoration: none;
+	}
+
+	abbr[title] {
+		border-bottom: none;
+		text-decoration: underline dotted;
+	}
+
+	b, strong {
+		font-weight: bolder;
+	}
+
+	button {
+		cursor: pointer;
+		-webkit-appearance: button;
+	}
+
+	button, input, optgroup, select, textarea {
+		font-family: inherit;
+		font-size: 100%;
+		margin: 0;
+	}
+
+	button, select {
+		text-transform: none;
+	}
+
+	code, kbd, pre, samp {
+		font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+		font-size: 1em;
+	}
+
+	details {
+		display: block;
+	}
+
+	fieldset {
+		padding: 0.35em 0.75em 0.625em;
+	}
+
+	h1, h2, h3, h4, h5, h6, p, hr, dl, dd, blockquote, figure, pre {
+		margin: 0;
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		font-size: inherit;
+		font-weight: inherit;
+	}
+
+	hr {
+		color: inherit;
+		height: 0;
+	}
+
+	img {
+		border-style: none;
+	}
+
+	img, svg, video, canvas, audio, iframe, embed, object {
+		display: block;
+	}
+
+	legend {
+		color: inherit;
+		display: table;
+		max-width: 100%;
+		padding: 0;
+		white-space: normal;
+	}
+
+	main {
+		display: block;
+	}
+
+	ol, ul  {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	progress {
+		vertical-align: baseline;
+	}
+
+	summary {
+		display: list-item;
+	}
+
+	small {
+		font-size: 80%;
+	}
+
+	sub, sup {
+		font-size: 75%;
+		line-height: 0;
+		position: relative;
+		vertical-align: baseline;
+	}
+
+	sub {
+		bottom: -0.25em;
+	}
+
+	sup {
+		top: -0.5em;
+	}
+
+	table {
+		text-indent: 0;
+		border-color: inherit;
+	}
+
+	template {
+		display: none;
+	}
+
+	textarea {
+		overflow: auto;
+	}
+
+	::-moz-focus-inner {
+		border-style: none;
+		padding: 0;
+	}
+
+	::-webkit-file-upload-button {
+		font: inherit;
+		-webkit-appearance: button;
+	}
+
+	[type=checkbox], [type=radio] {
+		padding: 0;
+	}
+
+	[type=number]::-webkit-inner-spin-button,
+	[type=number]::-webkit-outer-spin-button {
+		height: auto;
+	}
+
+	[type=search] {
+		outline-offset: -2px;
+		-webkit-appearance: textfield;
+	}
+
+	[type=search]::-webkit-search-decoration {
+		-webkit-appearance: none;
+	}
+
+	[hidden] {
+		display: none;
+	}
+`;