@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

package/dist/uiComponents/colorPicker/components/common/Interactive.js

@@ -1,142 +0,0 @@
-import React, { useRef, useMemo, useEffect } from 'react';
-import { useEventCallback } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/hooks/useEventCallback';
-import { clamp } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/clamp';
-import styled from 'styled-components';
-import { useEditing } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/components/EditingProvider';
-// Check if an event was triggered by touch
-const isTouch = (event) => 'touches' in event;
-// Finds a proper touch point by its identifier
-const getTouchPoint = (touches, touchId) => {
-    for (let i = 0; i < touches.length; i++) {
-        if (touches[i].identifier === touchId)
-            return touches[i];
-    }
-    return touches[0];
-};
-// Finds the proper window object to fix iframe embedding issues
-const getParentWindow = (node) => {
-    return (node && node.ownerDocument.defaultView) || self;
-};
-// Returns a relative position of the pointer inside the node's bounding box
-const getRelativePosition = (node, event, touchId) => {
-    const rect = node.getBoundingClientRect();
-    // Get user's pointer position from `touches` array if it's a `TouchEvent`
-    const pointer = isTouch(event)
-        ? getTouchPoint(event.touches, touchId)
-        : event;
-    return {
-        left: clamp((pointer.pageX - (rect.left + getParentWindow(node).pageXOffset)) /
-            rect.width),
-        top: clamp((pointer.pageY - (rect.top + getParentWindow(node).pageYOffset)) /
-            rect.height),
-    };
-};
-// Browsers introduced an intervention, making touch events passive by default.
-// This workaround removes `preventDefault` call from the touch handlers.
-// https://github.com/facebook/react/issues/19651
-const preventDefaultMove = (event) => {
-    !isTouch(event) && event.preventDefault();
-};
-// Prevent mobile browsers from handling mouse events (conflicting with touch ones).
-// If we detected a touch interaction before, we prefer reacting to touch events only.
-const isInvalid = (event, hasTouch) => {
-    return hasTouch && !isTouch(event);
-};
-const Container = styled.div `
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: inherit;
-  outline: none;
-  /* Don't trigger the default scrolling behavior when the event is originating from this element */
-  touch-action: none;
-`;
-const InteractiveBase = ({ onMove, onKey, ...rest }) => {
-    const container = useRef(null);
-    const onMoveCallback = useEventCallback(onMove);
-    const onKeyCallback = useEventCallback(onKey);
-    const touchId = useRef(null);
-    const hasTouch = useRef(false);
-    const { setEditing } = useEditing();
-    const [handleMoveStart, handleKeyDown, toggleDocumentEvents] = useMemo(() => {
-        const handleMoveStart = ({ nativeEvent, }) => {
-            const el = container.current;
-            if (!el)
-                return;
-            // Prevent text selection
-            preventDefaultMove(nativeEvent);
-            if (isInvalid(nativeEvent, hasTouch.current) || !el)
-                return;
-            if (isTouch(nativeEvent)) {
-                hasTouch.current = true;
-                const changedTouches = nativeEvent.changedTouches || [];
-                if (changedTouches.length)
-                    touchId.current = changedTouches[0].identifier;
-            }
-            el.focus();
-            setEditing(true);
-            onMoveCallback(getRelativePosition(el, nativeEvent, touchId.current));
-            toggleDocumentEvents(true);
-        };
-        const handleMove = (event) => {
-            // Prevent text selection
-            preventDefaultMove(event);
-            // If user moves the pointer outside the window or iframe bounds and release it there,
-            // `mouseup`/`touchend` won't be fired. In order to stop the picker from following the cursor
-            // after the user has moved the mouse/finger back to the document, we check `event.buttons`
-            // and `event.touches`. It allows us to detect that the user is just moving his pointer
-            // without pressing it down
-            // Note: we should use pointer events to fix this, since we don't have strict compatibility
-            // requirements.
-            const isDown = isTouch(event)
-                ? event.touches.length > 0
-                : event.buttons > 0;
-            if (isDown && container.current) {
-                onMoveCallback(getRelativePosition(container.current, event, touchId.current));
-            }
-            else {
-                setEditing(false);
-                toggleDocumentEvents(false);
-            }
-        };
-        // Use move-end anyway (see above) so we can terminate early if we receive one
-        // instead of having to wait for the user to move the mouse, which they might not do.
-        const handleMoveEnd = (event) => {
-            setEditing(false);
-            toggleDocumentEvents(false);
-        };
-        const handleKeyDown = (event) => {
-            const keyCode = event.which || event.keyCode;
-            // Ignore all keys except arrow ones
-            if (keyCode < 37 || keyCode > 40)
-                return;
-            // Do not scroll page by arrow keys when document is focused on the element
-            event.preventDefault();
-            // Send relative offset to the parent component.
-            // We use codes (37←, 38↑, 39→, 40↓) instead of keys ('ArrowRight', 'ArrowDown', etc)
-            // to reduce the size of the library
-            onKeyCallback({
-                left: keyCode === 39 ? 0.05 : keyCode === 37 ? -0.05 : 0,
-                top: keyCode === 40 ? 0.05 : keyCode === 38 ? -0.05 : 0,
-            });
-        };
-        function toggleDocumentEvents(state) {
-            const touch = hasTouch.current;
-            const el = container.current;
-            const parentWindow = getParentWindow(el);
-            // Add or remove additional pointer event listeners
-            const toggleEvent = state
-                ? parentWindow.addEventListener
-                : parentWindow.removeEventListener;
-            toggleEvent(touch ? 'touchmove' : 'mousemove', handleMove);
-            toggleEvent(touch ? 'touchend' : 'mouseup', handleMoveEnd);
-        }
-        return [handleMoveStart, handleKeyDown, toggleDocumentEvents];
-    }, [onKeyCallback, onMoveCallback]);
-    // Remove window event listeners before unmounting
-    useEffect(() => toggleDocumentEvents, [toggleDocumentEvents]);
-    return (React.createElement(Container, { ...rest, onTouchStart: handleMoveStart, onMouseDown: handleMoveStart, ref: container, onKeyDown: handleKeyDown, tabIndex: 0, role: "slider" }));
-};
-export const Interactive = React.memo(InteractiveBase);

package/dist/uiComponents/colorPicker/components/common/Pointer.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Interactive } from './Interactive';
-// Create an "empty" styled version, so we can reference it for contextual styling
-const StyledInteractive = styled(Interactive) ``;
-const Container = styled.div `
-  position: absolute;
-  z-index: 1;
-  box-sizing: border-box;
-  width: 16px;
-  height: 16px;
-  transform: translate(-50%, -50%);
-  background-color: #fff;
-  border: 1px solid #ffffff00;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-
-  ${StyledInteractive}:focus & {
-    transform: translate(-50%, -50%) scale(1.1);
-  }
-`;
-const Fill = styled.div `
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  border-radius: inherit;
-`;
-export const Pointer = ({ className, color, left, top = 0.5, }) => {
-    const style = {
-        top: `${top * 100}%`,
-        left: `${left * 100}%`,
-    };
-    return (React.createElement(Container, { style: style, className: className },
-        React.createElement(Fill, { style: { backgroundColor: color } })));
-};

package/dist/uiComponents/colorPicker/components/common/Saturation.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import { Interactive } from './Interactive';
-import { Pointer } from './Pointer';
-import { hsvaToHslString } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/convert';
-import { clamp } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/clamp';
-import { round } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/round';
-import styled from 'styled-components';
-const Container = styled.div `
-  position: relative;
-  flex-grow: 1;
-  border-color: transparent; /* Fixes https://github.com/omgovich/react-colorful/issues/139 */
-  border-bottom: 12px solid #000;
-  border-radius: 2px;
-  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
-    linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-
-  // Improve elements rendering on light backgrounds
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
-`;
-const StyledPointer = styled(Pointer) `
-  z-index: 3;
-`;
-const SaturationBase = ({ hsva, onChange }) => {
-    const handleMove = (interaction) => {
-        onChange({
-            s: interaction.left * 100,
-            v: 100 - interaction.top * 100,
-        });
-    };
-    const handleKey = (offset) => {
-        // Saturation and brightness always fit into [0, 100] range
-        onChange({
-            s: clamp(hsva.s + offset.left * 100, 0, 100),
-            v: clamp(hsva.v - offset.top * 100, 0, 100),
-        });
-    };
-    const containerStyle = {
-        backgroundColor: hsvaToHslString({ h: hsva.h, s: 100, v: 100, a: 1 }),
-    };
-    return (React.createElement(Container, { style: containerStyle },
-        React.createElement(Interactive, { onMove: handleMove, onKey: handleKey, "aria-label": "Color", "aria-valuetext": `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%` },
-            React.createElement(StyledPointer, { top: 1 - hsva.v / 100, left: hsva.s / 100, color: hsvaToHslString(hsva) }))));
-};
-export const Saturation = React.memo(SaturationBase);

package/dist/uiComponents/colorPicker/hooks/useColorManipulation.js

@@ -1,77 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { equalColorObjects } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/compare';
-import { useEventCallback } from './useEventCallback';
-import { useEditing } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/components/EditingProvider';
-export function useColorManipulation(colorModel, color, onTemporarilyChange, onPermanentlyChange) {
-    const { editing } = useEditing();
-    const [editingValue, setEditingValue] = useState(color);
-    // Save onChange callbacks in refs for to avoid unnecessarily updating when parent doesn't use useCallback
-    const onTemporarilyChangeCallback = useEventCallback(onTemporarilyChange);
-    const onPermanentlyChangeCallback = useEventCallback(onPermanentlyChange);
-    // If editing, be uncontrolled, if not editing, be controlled
-    let value = editing ? editingValue : color;
-    // No matter which color model is used (HEX, RGB(A) or HSL(A)),
-    // all internal calculations are in HSVA
-    const [hsva, updateHsva] = useState(() => colorModel.toHsva(value));
-    // Use refs to prevent infinite update loops. They basically serve as a more
-    // explicit hack around the rigidity of React hooks' dep lists, since we want
-    // to do all color equality checks in HSVA, without breaking the roles of hooks.
-    // We use separate refs for temporary updates and permanent updates,
-    // since they are two independent update models.
-    const tempCache = useRef({ color: value, hsva });
-    const permCache = useRef({ color: value, hsva });
-    // When entering editing mode, set the internal state of the uncontrolled mode
-    // to the last value of the controlled mode.
-    useEffect(() => {
-        if (editing) {
-            setEditingValue(tempCache.current.color);
-        }
-    }, [editing]);
-    // Trigger `on*Change` callbacks only if an updated color is different from
-    // the  cached one; save the new color to the ref to prevent unnecessary updates.
-    useEffect(() => {
-        let newColor = colorModel.fromHsva(hsva);
-        if (editing) {
-            if (!equalColorObjects(hsva, tempCache.current.hsva) &&
-                !colorModel.equal(newColor, tempCache.current.color)) {
-                tempCache.current = { hsva, color: newColor };
-                setEditingValue(newColor);
-                onTemporarilyChangeCallback(newColor);
-            }
-        }
-        else {
-            if (!equalColorObjects(hsva, permCache.current.hsva) &&
-                !colorModel.equal(newColor, permCache.current.color)) {
-                permCache.current = { hsva, color: newColor };
-                tempCache.current = { hsva, color: newColor };
-                onPermanentlyChangeCallback(newColor);
-            }
-        }
-    }, [
-        editing,
-        hsva,
-        colorModel,
-        onTemporarilyChangeCallback,
-        onPermanentlyChangeCallback,
-    ]);
-    // This has to come after the callback calling effect, so that the cache isn't
-    // updated before the above effect checks for equality, otherwise no updates would
-    // be issued.
-    // Note: it doesn't make sense to have an editing version of this effect because
-    // the callback calling effect already updates the caches.
-    useEffect(() => {
-        if (!editing) {
-            if (!colorModel.equal(value, permCache.current.color)) {
-                const newHsva = colorModel.toHsva(value);
-                permCache.current = { hsva: newHsva, color: value };
-                updateHsva(newHsva);
-            }
-        }
-    }, [editing, value, colorModel]);
-    // Merge the current HSVA color object with updated params.
-    // For example, when a child component sends `h` or `s` only
-    const handleChange = useCallback((params) => {
-        updateHsva((current) => Object.assign({}, current, params));
-    }, []);
-    return [hsva, handleChange];
-}

package/dist/uiComponents/colorPicker/hooks/useEventCallback.js

@@ -1,10 +0,0 @@
-import { useRef } from 'react';
-// Saves incoming handler to the ref in order to avoid "useCallback hell"
-export function useEventCallback(handler) {
-    const callbackRef = useRef(handler);
-    const fn = useRef((value) => {
-        callbackRef.current && callbackRef.current(value);
-    });
-    callbackRef.current = handler;
-    return fn.current;
-}

package/dist/uiComponents/colorPicker/hooks/useIsomorphicLayoutEffect.js

@@ -1,5 +0,0 @@
-import { useLayoutEffect, useEffect } from 'react';
-// React currently throws a warning when using useLayoutEffect on the server.
-// To get around it, we can conditionally useEffect on the server (no-op) and
-// useLayoutEffect in the browser.
-export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/dist/uiComponents/colorPicker/index.js

@@ -1 +0,0 @@
-export { RgbaColorPicker } from './components/RgbaColorPicker';

package/dist/uiComponents/colorPicker/types.js

@@ -1 +0,0 @@
-export {};

package/dist/uiComponents/colorPicker/utils/clamp.js

@@ -1,6 +0,0 @@
-// Clamps a value between an upper and lower bound.
-// We use ternary operators because it makes the minified code
-// 2 times shorter then `Math.min(Math.max(a,b),c)`
-export const clamp = (number, min = 0, max = 1) => {
-    return number > max ? max : number < min ? min : number;
-};

package/dist/uiComponents/colorPicker/utils/compare.js

@@ -1,25 +0,0 @@
-import { hexToRgba } from './convert';
-export const equalColorObjects = (first, second) => {
-    if (first === second)
-        return true;
-    for (const prop in first) {
-        // The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB)
-        // with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`)
-        // on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types,
-        // we must cast our object to unknown (as RGB demands `r` be a key, while `Record<string, x>` does not care if
-        // there is or not), and then as a type TS can iterate over.
-        if (first[prop] !==
-            second[prop])
-            return false;
-    }
-    return true;
-};
-export const equalColorString = (first, second) => {
-    return first.replace(/\s/g, '') === second.replace(/\s/g, '');
-};
-export const equalHex = (first, second) => {
-    if (first.toLowerCase() === second.toLowerCase())
-        return true;
-    // To compare colors like `#FFF` and `ffffff` we convert them into RGB objects
-    return equalColorObjects(hexToRgba(first), hexToRgba(second));
-};

package/dist/uiComponents/colorPicker/utils/convert.js

@@ -1,165 +0,0 @@
-import { round } from './round';
-/**
- * Valid CSS <angle> units.
- * https://developer.mozilla.org/en-US/docs/Web/CSS/angle
- */
-const angleUnits = {
-    grad: 360 / 400,
-    turn: 360,
-    rad: 360 / (Math.PI * 2),
-};
-export const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));
-export const hexToRgba = (hex) => {
-    if (hex[0] === '#')
-        hex = hex.substr(1);
-    if (hex.length < 6) {
-        return {
-            r: parseInt(hex[0] + hex[0], 16),
-            g: parseInt(hex[1] + hex[1], 16),
-            b: parseInt(hex[2] + hex[2], 16),
-            a: 1,
-        };
-    }
-    return {
-        r: parseInt(hex.substr(0, 2), 16),
-        g: parseInt(hex.substr(2, 2), 16),
-        b: parseInt(hex.substr(4, 2), 16),
-        a: 1,
-    };
-};
-export const parseHue = (value, unit = 'deg') => {
-    return Number(value) * (angleUnits[unit] || 1);
-};
-export const hslaStringToHsva = (hslString) => {
-    const matcher = /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
-    const match = matcher.exec(hslString);
-    if (!match)
-        return { h: 0, s: 0, v: 0, a: 1 };
-    return hslaToHsva({
-        h: parseHue(match[1], match[2]),
-        s: Number(match[3]),
-        l: Number(match[4]),
-        a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),
-    });
-};
-export const hslStringToHsva = hslaStringToHsva;
-export const hslaToHsva = ({ h, s, l, a }) => {
-    s *= (l < 50 ? l : 100 - l) / 100;
-    return {
-        h: h,
-        s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0,
-        v: l + s,
-        a,
-    };
-};
-export const hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));
-export const hsvaToHsla = ({ h, s, v, a }) => {
-    const hh = ((200 - s) * v) / 100;
-    return {
-        h: round(h),
-        s: round(hh > 0 && hh < 200
-            ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100
-            : 0),
-        l: round(hh / 2),
-        a: round(a, 2),
-    };
-};
-export const hsvaToHslString = (hsva) => {
-    const { h, s, l } = hsvaToHsla(hsva);
-    return `hsl(${h}, ${s}%, ${l}%)`;
-};
-export const hsvaToHsvString = (hsva) => {
-    const { h, s, v } = roundHsva(hsva);
-    return `hsv(${h}, ${s}%, ${v}%)`;
-};
-export const hsvaToHsvaString = (hsva) => {
-    const { h, s, v, a } = roundHsva(hsva);
-    return `hsva(${h}, ${s}%, ${v}%, ${a})`;
-};
-export const hsvaToHslaString = (hsva) => {
-    const { h, s, l, a } = hsvaToHsla(hsva);
-    return `hsla(${h}, ${s}%, ${l}%, ${a})`;
-};
-export const hsvaToRgba = ({ h, s, v, a }) => {
-    h = (h / 360) * 6;
-    s = s / 100;
-    v = v / 100;
-    const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;
-    return {
-        r: round([v, c, b, b, d, v][module] * 255),
-        g: round([d, v, v, c, b, b][module] * 255),
-        b: round([b, b, d, v, v, c][module] * 255),
-        a: round(a, 2),
-    };
-};
-export const hsvaToRgbString = (hsva) => {
-    const { r, g, b } = hsvaToRgba(hsva);
-    return `rgb(${r}, ${g}, ${b})`;
-};
-export const hsvaToRgbaString = (hsva) => {
-    const { r, g, b, a } = hsvaToRgba(hsva);
-    return `rgba(${r}, ${g}, ${b}, ${a})`;
-};
-export const hsvaStringToHsva = (hsvString) => {
-    const matcher = /hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
-    const match = matcher.exec(hsvString);
-    if (!match)
-        return { h: 0, s: 0, v: 0, a: 1 };
-    return roundHsva({
-        h: parseHue(match[1], match[2]),
-        s: Number(match[3]),
-        v: Number(match[4]),
-        a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),
-    });
-};
-export const hsvStringToHsva = hsvaStringToHsva;
-export const rgbaStringToHsva = (rgbaString) => {
-    const matcher = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
-    const match = matcher.exec(rgbaString);
-    if (!match)
-        return { h: 0, s: 0, v: 0, a: 1 };
-    return rgbaToHsva({
-        r: Number(match[1]) / (match[2] ? 100 / 255 : 1),
-        g: Number(match[3]) / (match[4] ? 100 / 255 : 1),
-        b: Number(match[5]) / (match[6] ? 100 / 255 : 1),
-        a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1),
-    });
-};
-export const rgbStringToHsva = rgbaStringToHsva;
-const format = (number) => {
-    const hex = number.toString(16);
-    return hex.length < 2 ? '0' + hex : hex;
-};
-export const rgbaToHex = ({ r, g, b }) => {
-    return '#' + format(r) + format(g) + format(b);
-};
-export const rgbaToHsva = ({ r, g, b, a }) => {
-    const max = Math.max(r, g, b);
-    const delta = max - Math.min(r, g, b);
-    // prettier-ignore
-    const hh = delta
-        ? max === r
-            ? (g - b) / delta
-            : max === g
-                ? 2 + (b - r) / delta
-                : 4 + (r - g) / delta
-        : 0;
-    return {
-        h: round(60 * (hh < 0 ? hh + 6 : hh)),
-        s: round(max ? (delta / max) * 100 : 0),
-        v: round((max / 255) * 100),
-        a,
-    };
-};
-export const roundHsva = (hsva) => ({
-    h: round(hsva.h),
-    s: round(hsva.s),
-    v: round(hsva.v),
-    a: round(hsva.a, 2),
-});
-export const rgbaToRgb = ({ r, g, b }) => ({ r, g, b });
-export const hslaToHsl = ({ h, s, l }) => ({ h, s, l });
-export const hsvaToHsv = (hsva) => {
-    const { h, s, v } = roundHsva(hsva);
-    return { h, s, v };
-};

package/dist/uiComponents/colorPicker/utils/round.js

@@ -1,3 +0,0 @@
-export const round = (number, digits = 0, base = Math.pow(10, digits)) => {
-    return Math.round(base * number) / base;
-};

package/dist/uiComponents/colorPicker/utils/validate.js

@@ -1,10 +0,0 @@
-const matcher = /^#?([0-9A-F]{3,8})$/i;
-export const validHex = (value, alpha) => {
-    const match = matcher.exec(value);
-    const length = match ? match[1].length : 0;
-    return (length === 3 || // '#rgb' format
-        length === 6 || // '#rrggbb' format
-        (!!alpha && length === 4) || // '#rgba' format
-        (!!alpha && length === 8) // '#rrggbbaa' format
-    );
-};

package/dist/uiComponents/createCursorLock.js

@@ -1,2 +0,0 @@
-// import getStudio from '@tomorrowevening/theatre-studio/getStudio'
-export {};

package/dist/uiComponents/form/BasicCheckbox.js

@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-const BasicCheckbox = styled.input.attrs({ type: 'checkbox' }) `
-  outline: none;
-`;
-export default BasicCheckbox;