authscape 1.0.700 → 1.0.704

package/index.js

@@ -64,6 +64,22 @@ function AuthScapeApp(_ref) {
   var queryRef = searchParams.get('ref');
   var queryCode = searchParams.get('code');
   var pathname = (0, _navigation.usePathname)();
+  (0, _react.useEffect)(function () {
+    var stored = localStorage.getItem("gdpr-consent");
+    if (stored) {
+      var prefs = JSON.parse(stored);
+      console.log("User previously consented:", prefs);
+      // optional: send to your backend
+    }
+  }, []);
+  var handleConsentAccepted = function handleConsentAccepted(prefs) {
+    console.log("Consent accepted:", prefs);
+    // optional: send to backend
+  };
+  var handleConsentRejected = function handleConsentRejected() {
+    console.log("Consent rejected");
+    // disable analytics scripts, etc.
+  };
   var signInValidator = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(queryCode) {
       var codeVerifier, headers, queryString, response, domainHost, redirectUri;
@@ -447,7 +463,23 @@ function AuthScapeApp(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_head["default"], null, /*#__PURE__*/_react["default"].createElement("meta", {
     name: "viewport",
     content: "width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86"
-  })), /*#__PURE__*/_react["default"].createElement(_styles.ThemeProvider, {
+  })), /*#__PURE__*/_react["default"].createElement(GDPRConsentDialog, {
+    onAccept: handleConsentAccepted,
+    onReject: handleConsentRejected,
+    enableAnalytics: true,
+    enableMarketing: true,
+    additionalPrivacyFeatures: [{
+      id: "danceParty",
+      title: "Dance Party",
+      description: "Hello world this is about the feature",
+      checked: true
+    }, {
+      id: "frog",
+      title: "Able to see Frogs",
+      description: "Frogs will appear on your screen",
+      checked: true
+    }]
+  }), /*#__PURE__*/_react["default"].createElement(_styles.ThemeProvider, {
     theme: muiTheme
   }, frontEndLoadedState != null && frontEndLoadedState && pathname != "/signin-oidc" && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, layout != null && layout({
     children: /*#__PURE__*/_react["default"].createElement(Component, _extends({}, pageProps, {
@@ -2331,6 +2363,214 @@ var FileUploader = exports.FileUploader = function FileUploader(_ref) {
 };
 "use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GDPRConsentDialog = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var GDPRConsentDialog = exports.GDPRConsentDialog = function GDPRConsentDialog(_ref) {
+  var onAccept = _ref.onAccept,
+    onReject = _ref.onReject,
+    _ref$enableAnalytics = _ref.enableAnalytics,
+    enableAnalytics = _ref$enableAnalytics === void 0 ? true : _ref$enableAnalytics,
+    _ref$enableMarketing = _ref.enableMarketing,
+    enableMarketing = _ref$enableMarketing === void 0 ? true : _ref$enableMarketing,
+    _ref$additionalPrivac = _ref.additionalPrivacyFeatures,
+    additionalPrivacyFeatures = _ref$additionalPrivac === void 0 ? [] : _ref$additionalPrivac;
+  var initialPreferences = _objectSpread({
+    necessary: true,
+    analytics: enableAnalytics,
+    marketing: enableMarketing
+  }, Object.fromEntries(additionalPrivacyFeatures.map(function (item) {
+    var _item$checked;
+    return [item.id, (_item$checked = item.checked) !== null && _item$checked !== void 0 ? _item$checked : false];
+  })));
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    customize = _useState4[0],
+    setCustomize = _useState4[1];
+  var _useState5 = (0, _react.useState)(initialPreferences),
+    _useState6 = _slicedToArray(_useState5, 2),
+    preferences = _useState6[0],
+    setPreferences = _useState6[1];
+  (0, _react.useEffect)(function () {
+    var savedConsent = localStorage.getItem("gdpr-consent");
+    if (!savedConsent) {
+      setOpen(true);
+    }
+  }, []);
+  var saveConsentAndClose = function saveConsentAndClose(prefs) {
+    localStorage.setItem("gdpr-consent", JSON.stringify(prefs));
+    if (onAccept) onAccept(prefs);
+    setOpen(false);
+  };
+  var handleAcceptAll = function handleAcceptAll() {
+    var allPrefs = _objectSpread({
+      necessary: true,
+      analytics: enableAnalytics,
+      marketing: enableMarketing
+    }, Object.fromEntries(additionalPrivacyFeatures.map(function (item) {
+      return [item.id, true];
+    })));
+    saveConsentAndClose(allPrefs);
+  };
+  var handleRejectAll = function handleRejectAll() {
+    var rejectedPrefs = _objectSpread({
+      necessary: true,
+      analytics: false,
+      marketing: false
+    }, Object.fromEntries(additionalPrivacyFeatures.map(function (item) {
+      return [item.id, false];
+    })));
+    localStorage.setItem("gdpr-consent", JSON.stringify(rejectedPrefs));
+    if (onReject) onReject();
+    setOpen(false);
+  };
+  var handleAcceptSelected = function handleAcceptSelected() {
+    saveConsentAndClose(preferences);
+  };
+  var handleCheckboxChange = function handleCheckboxChange(key) {
+    return function (event) {
+      setPreferences(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, event.target.checked));
+      });
+    };
+  };
+  if (!open) return null;
+  return /*#__PURE__*/_react["default"].createElement(_material.Paper, {
+    elevation: 4,
+    sx: {
+      position: "fixed",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      p: 2,
+      zIndex: 1300,
+      backgroundColor: "#fff",
+      borderTop: "1px solid #ccc"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_material.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: 2
+  }, /*#__PURE__*/_react["default"].createElement(_material.Box, null, /*#__PURE__*/_react["default"].createElement(_material.Typography, {
+    variant: "subtitle1",
+    fontWeight: "bold"
+  }, "We value your privacy"), /*#__PURE__*/_react["default"].createElement(_material.Typography, {
+    variant: "body2"
+  }, "We use cookies to enhance your experience, for analytics and marketing. You can accept all, reject all, or customize your preferences.")), /*#__PURE__*/_react["default"].createElement(_material.Collapse, {
+    "in": customize
+  }, /*#__PURE__*/_react["default"].createElement(_material.Box, {
+    mb: 2
+  }, /*#__PURE__*/_react["default"].createElement(_material.Box, {
+    mb: 1
+  }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
+    control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
+      checked: true,
+      disabled: true
+    }),
+    label: "Necessary (always required)"
+  }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_material.Typography, {
+    variant: "caption",
+    color: "textSecondary",
+    sx: {
+      ml: 4
+    }
+  }, "Required to enable core site functionality such as security, authentication, and accessibility.")), enableAnalytics && /*#__PURE__*/_react["default"].createElement(_material.Box, {
+    mb: 1
+  }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
+    control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
+      checked: preferences.analytics,
+      onChange: handleCheckboxChange("analytics")
+    }),
+    label: "Analytics"
+  }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_material.Typography, {
+    variant: "caption",
+    color: "textSecondary",
+    sx: {
+      ml: 4
+    }
+  }, "Helps us understand how you use our site so we can improve it. For example, tracking page visits or feature usage.")), enableMarketing && /*#__PURE__*/_react["default"].createElement(_material.Box, {
+    mb: 1
+  }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
+    control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
+      checked: preferences.marketing,
+      onChange: handleCheckboxChange("marketing")
+    }),
+    label: "Marketing"
+  }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_material.Typography, {
+    variant: "caption",
+    color: "textSecondary",
+    sx: {
+      ml: 4
+    }
+  }, "Allows us to show personalized ads and promotions based on your behavior and interactions.")), additionalPrivacyFeatures.map(function (feature) {
+    return /*#__PURE__*/_react["default"].createElement(_material.Box, {
+      key: feature.id,
+      mb: 1
+    }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
+      control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
+        checked: preferences[feature.id] || false,
+        onChange: handleCheckboxChange(feature.id)
+      }),
+      label: feature.title
+    }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_material.Typography, {
+      variant: "caption",
+      color: "textSecondary",
+      sx: {
+        ml: 4
+      }
+    }, feature.description));
+  }))), /*#__PURE__*/_react["default"].createElement(_material.Box, {
+    display: "flex",
+    gap: 1,
+    flexWrap: "wrap"
+  }, !customize ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_material.Button, {
+    variant: "contained",
+    color: "primary",
+    onClick: handleAcceptAll
+  }, "Accept All"), /*#__PURE__*/_react["default"].createElement(_material.Button, {
+    variant: "outlined",
+    color: "error",
+    onClick: handleRejectAll
+  }, "Reject All"), /*#__PURE__*/_react["default"].createElement(_material.Button, {
+    variant: "text",
+    onClick: function onClick() {
+      return setCustomize(true);
+    }
+  }, "Customize Preferences")) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_material.Button, {
+    variant: "contained",
+    color: "primary",
+    onClick: handleAcceptSelected
+  }, "Save Preferences"), /*#__PURE__*/_react["default"].createElement(_material.Button, {
+    variant: "text",
+    onClick: function onClick() {
+      return setCustomize(false);
+    }
+  }, "Cancel")))));
+};
+"use strict";
+
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.700",
+  "version": "1.0.704",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/components/AuthScapeApp.js

@@ -32,6 +32,26 @@ export function AuthScapeApp ({Component, layout, loadingLayout, pageProps, muiT
 
     const pathname = usePathname();
 
+
+    useEffect(() => {
+        const stored = localStorage.getItem("gdpr-consent");
+        if (stored) {
+        const prefs = JSON.parse(stored);
+        console.log("User previously consented:", prefs);
+        // optional: send to your backend
+        }
+    }, []);
+
+    const handleConsentAccepted = (prefs) => {
+        console.log("Consent accepted:", prefs);
+        // optional: send to backend
+    };
+
+    const handleConsentRejected = () => {
+        console.log("Consent rejected");
+        // disable analytics scripts, etc.
+    };
+
     const signInValidator = async (queryCode) => {
  
         if (queryCodeUsed.current != queryCode)
@@ -472,6 +492,17 @@ export function AuthScapeApp ({Component, layout, loadingLayout, pageProps, muiT
 
             </Head>
 
+            <GDPRConsentDialog
+                onAccept={handleConsentAccepted}
+                onReject={handleConsentRejected}
+                enableAnalytics={true}
+                enableMarketing={true}
+                additionalPrivacyFeatures={[
+                    {id: "danceParty", title: "Dance Party", description: "Hello world this is about the feature", checked: true },
+                    {id: "frog", title: "Able to see Frogs", description: "Frogs will appear on your screen", checked: true }
+                ]}
+            />
+
             <ThemeProvider theme={muiTheme}>
                 {frontEndLoadedState != null && frontEndLoadedState && pathname != "/signin-oidc" &&
                 <>

package/src/components/GDPRConsentDialog.js

@@ -0,0 +1,238 @@
+import React, { useState, useEffect } from "react";
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  Typography,
+  Paper,
+  Collapse,
+} from "@mui/material";
+
+export const GDPRConsentDialog = ({
+  onAccept,
+  onReject,
+  enableAnalytics = true,
+  enableMarketing = true,
+  additionalPrivacyFeatures = []
+}) => {
+  const initialPreferences = {
+    necessary: true,
+    analytics: enableAnalytics,
+    marketing: enableMarketing,
+    ...Object.fromEntries(
+      additionalPrivacyFeatures.map((item) => [item.id, item.checked ?? false])
+    ),
+  };
+
+  const [open, setOpen] = useState(false);
+  const [customize, setCustomize] = useState(false);
+  const [preferences, setPreferences] = useState(initialPreferences);
+
+  useEffect(() => {
+    const savedConsent = localStorage.getItem("gdpr-consent");
+    if (!savedConsent) {
+      setOpen(true);
+    }
+  }, []);
+
+  const saveConsentAndClose = (prefs) => {
+    localStorage.setItem("gdpr-consent", JSON.stringify(prefs));
+    if (onAccept) onAccept(prefs);
+    setOpen(false);
+  };
+
+  const handleAcceptAll = () => {
+    const allPrefs = {
+      necessary: true,
+      analytics: enableAnalytics,
+      marketing: enableMarketing,
+      ...Object.fromEntries(
+        additionalPrivacyFeatures.map((item) => [item.id, true])
+      ),
+    };
+    saveConsentAndClose(allPrefs);
+  };
+
+  const handleRejectAll = () => {
+    const rejectedPrefs = {
+      necessary: true,
+      analytics: false,
+      marketing: false,
+      ...Object.fromEntries(
+        additionalPrivacyFeatures.map((item) => [item.id, false])
+      ),
+    };
+    localStorage.setItem("gdpr-consent", JSON.stringify(rejectedPrefs));
+    if (onReject) onReject();
+    setOpen(false);
+  };
+
+  const handleAcceptSelected = () => {
+    saveConsentAndClose(preferences);
+  };
+
+  const handleCheckboxChange = (key) => (event) => {
+    setPreferences((prev) => ({
+      ...prev,
+      [key]: event.target.checked,
+    }));
+  };
+
+  if (!open) return null;
+
+  return (
+    <Paper
+      elevation={4}
+      sx={{
+        position: "fixed",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        p: 2,
+        zIndex: 1300,
+        backgroundColor: "#fff",
+        borderTop: "1px solid #ccc",
+      }}
+    >
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="flex-start"
+        gap={2}
+      >
+        <Box>
+          <Typography variant="subtitle1" fontWeight="bold">
+            We value your privacy
+          </Typography>
+          <Typography variant="body2">
+            We use cookies to enhance your experience, for analytics and
+            marketing. You can accept all, reject all, or customize your
+            preferences.
+          </Typography>
+        </Box>
+
+        <Collapse in={customize}>
+          <Box mb={2}>
+            <Box mb={1}>
+              <FormControlLabel
+                control={<Checkbox checked disabled />}
+                label="Necessary (always required)"
+              />
+              <br/>
+              <Typography variant="caption" color="textSecondary" sx={{ ml: 4 }}>
+                Required to enable core site functionality such as security,
+                authentication, and accessibility.
+              </Typography>
+            </Box>
+
+            {enableAnalytics && (
+              <Box mb={1}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={preferences.analytics}
+                      onChange={handleCheckboxChange("analytics")}
+                    />
+                  }
+                  label="Analytics"
+                />
+                <br/>
+                <Typography
+                  variant="caption"
+                  color="textSecondary"
+                  sx={{ ml: 4 }}
+                >
+                  Helps us understand how you use our site so we can improve it.
+                  For example, tracking page visits or feature usage.
+                </Typography>
+              </Box>
+            )}
+
+            {enableMarketing && (
+              <Box mb={1}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={preferences.marketing}
+                      onChange={handleCheckboxChange("marketing")}
+                    />
+                  }
+                  label="Marketing"
+                />
+                <br/>
+                <Typography
+                  variant="caption"
+                  color="textSecondary"
+                  sx={{ ml: 4 }}
+                >
+                  Allows us to show personalized ads and promotions based on your
+                  behavior and interactions.
+                </Typography>
+              </Box>
+            )}
+
+            {additionalPrivacyFeatures.map((feature) => (
+              <Box key={feature.id} mb={1}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={preferences[feature.id] || false}
+                      onChange={handleCheckboxChange(feature.id)}
+                    />
+                  }
+                  label={feature.title}
+                />
+                <br/>
+                <Typography
+                  variant="caption"
+                  color="textSecondary"
+                  sx={{ ml: 4 }}
+                >
+                  {feature.description}
+                </Typography>
+              </Box>
+            ))}
+          </Box>
+        </Collapse>
+
+        <Box display="flex" gap={1} flexWrap="wrap">
+          {!customize ? (
+            <>
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={handleAcceptAll}
+              >
+                Accept All
+              </Button>
+              <Button
+                variant="outlined"
+                color="error"
+                onClick={handleRejectAll}
+              >
+                Reject All
+              </Button>
+              <Button variant="text" onClick={() => setCustomize(true)}>
+                Customize Preferences
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={handleAcceptSelected}
+              >
+                Save Preferences
+              </Button>
+              <Button variant="text" onClick={() => setCustomize(false)}>
+                Cancel
+              </Button>
+            </>
+          )}
+        </Box>
+      </Box>
+    </Paper>
+  );
+}

package/dist/Container.module.css

@@ -1,103 +0,0 @@
-.Container {
-    display: flex;
-    flex-direction: column;
-    grid-auto-rows: max-content;
-    overflow: hidden;
-    box-sizing: border-box;
-    appearance: none;
-    outline: none;
-    min-width: 350px;
-    margin: 10px;
-    border-radius: 5px;
-    min-height: 200px;
-    transition: background-color 350ms ease;
-    background-color: rgba(246, 246, 246, 1);
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    font-size: 1em;
-  
-    .ul {
-      display: grid;
-      grid-gap: 10px;
-      grid-template-columns: repeat(var(--columns, 1), 1fr);
-      list-style: none;
-      padding: 20px;
-      margin: 0;
-    }
-  
-    &.scrollable {
-      .ul {
-        overflow-y: auto;
-      }
-    }
-  
-    &.placeholder {
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      color: rgba(0, 0, 0, 0.5);
-      background-color: transparent;
-      border-style: dashed;
-      border-color: rgba(0, 0, 0, 0.08);
-  
-      /* &:hover {
-        border-color: rgba(0, 0, 0, 0.15);
-      } */
-    }
-  
-    &.hover {
-      background-color: rgb(235, 235, 235, 1);
-    }
-  
-    &.unstyled {
-      overflow: visible;
-      background-color: transparent !important;
-      border: none !important;
-    }
-  
-    &.horizontal {
-      width: 100%;
-  
-      .ul {
-        grid-auto-flow: column;
-      }
-    }
-  
-    &.shadow {
-      box-shadow: 0 1px 10px 0 rgba(34, 33, 81, 0.1);
-    }
-  
-    /* &:focus-visible {
-      border-color: transparent;
-      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0px 0px 2px #4c9ffe;
-    } */
-  }
-  
-  .Header {
-    display: flex;
-    padding: 5px 20px;
-    padding-right: 8px;
-    align-items: center;
-    justify-content: space-between;
-    background-color: #fff;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  
-    /* &:hover {
-      .Actions > * {
-        opacity: 1 !important;
-      }
-    } */
-  }
-  
-  /* .Actions {
-    display: flex;
-  
-    > *:first-child:not(:last-child) {
-      opacity: 0;
-  
-      &:focus-visible {
-        opacity: 1;
-      }
-    }
-  } */

package/dist/Item.module.css

@@ -1,135 +0,0 @@
-@keyframes pop {
-    0% {
-      transform: scale(1);
-      box-shadow: var(--box-shadow);
-    }
-    100% {
-      transform: scale(var(--scale));
-      box-shadow: var(--box-shadow-picked-up);
-    }
-  }
-  
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-  
-  .Wrapper {
-    display: flex;
-    box-sizing: border-box;
-    transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0)
-      scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-    transform-origin: 0 0;
-    touch-action: manipulation;
-  
-    &.fadeIn {
-      animation: fadeIn 500ms ease;
-    }
-  
-    &.dragOverlay {
-      --scale: 1.05;
-      --box-shadow: $box-shadow;
-      --box-shadow-picked-up: $box-shadow-border,
-        -1px 0 15px 0 rgba(34, 33, 81, 0.01),
-        0px 15px 15px 0 rgba(34, 33, 81, 0.25);
-      z-index: 999;
-    }
-  }
-  
-  .Item {
-    position: relative;
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-    padding: 18px 20px;
-    background-color: #fff;
-    box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
-    outline: none;
-    border-radius: calc(4px / var(--scale-x, 1));
-    box-sizing: border-box;
-    list-style: none;
-    transform-origin: 50% 50%;
-  
-    -webkit-tap-highlight-color: transparent;
-  
-    color: #333;
-    font-weight: 400;
-    font-size: 1rem;
-    white-space: nowrap;
-  
-    transform: scale(var(--scale, 1));
-    transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-  
-    /* &:focus-visible {
-      box-shadow: 0 0px 4px 1px #4c9ffe, 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
-    } */
-  
-    &:not(.withHandle) {
-      touch-action: manipulation;
-      cursor: pointer;
-    }
-  
-    &.dragging:not(.dragOverlay) {
-      opacity: var(--dragging-opacity, 0.5);
-      z-index: 0;
-  
-      /* &:focus {
-        box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
-      } */
-    }
-  
-    &.disabled {
-      color: #999;
-      background-color: #f1f1f1;
-      /* &:focus {
-        box-shadow: 0 0px 4px 1px rgba(0, 0, 0, 0.1), 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
-      } */
-      cursor: not-allowed;
-    }
-  
-    &.dragOverlay {
-      cursor: inherit;
-      /* box-shadow: 0 0px 6px 2px $focused-outline-color; */
-      animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-      transform: scale(var(--scale));
-      box-shadow: var(--box-shadow-picked-up);
-      opacity: 1;
-    }
-  
-    &.color:before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      left: 0;
-      height: 100%;
-      width: 3px;
-      display: block;
-      border-top-left-radius: 3px;
-      border-bottom-left-radius: 3px;
-      background-color: var(--color);
-    }
-  
-    /* &:hover {
-      .Remove {
-        visibility: visible;
-      }
-    } */
-  }
-  
-  .Remove {
-    visibility: hidden;
-  }
-  
-  .Actions {
-    display: flex;
-    align-self: flex-start;
-    margin-top: -12px;
-    margin-left: auto;
-    margin-bottom: -15px;
-    margin-right: -10px;
-  }