@hkdigital/lib-sveltekit 0.1.62 → 0.1.65

package/dist/constants/mime/audio.js

@@ -1,13 +1,13 @@
-export const AUDIO_BASIC = 'audio/basic';
-export const AUDIO_MIDI = 'audio/mid';
-export const AUDIO_WAV = 'audio/vnd.wav';
-
-export const AUDIO_MP3 = 'audio/mpeg';
-export const AUDIO_MP4 = 'audio/mp4';
-
-export const AUDIO_AIF = 'audio/x-aiff';
-export const AUDIO_AIFC = 'audio/x-aiff';
-export const AUDIO_AIFF = 'audio/x-aiff';
-
-export const AUDIO_M3U = 'audio/x-mpegurl';
-export const AUDIO_OGG = 'audio/ogg';
+export const AUDIO_BASIC = 'audio/basic';
+export const AUDIO_MIDI = 'audio/mid';
+export const AUDIO_WAV = 'audio/vnd.wav';
+
+export const AUDIO_MP3 = 'audio/mpeg';
+export const AUDIO_MP4 = 'audio/mp4';
+
+export const AUDIO_AIF = 'audio/x-aiff';
+export const AUDIO_AIFC = 'audio/x-aiff';
+export const AUDIO_AIFF = 'audio/x-aiff';
+
+export const AUDIO_M3U = 'audio/x-mpegurl';
+export const AUDIO_OGG = 'audio/ogg';

package/dist/constants/mime/image.js

@@ -1,3 +1,3 @@
-export const IMAGE_PNG = 'image/png';
-export const IMAGE_JPEG = 'image/jpeg';
-export const IMAGE_WEBP = 'image/webp';
+export const IMAGE_PNG = 'image/png';
+export const IMAGE_JPEG = 'image/jpeg';
+export const IMAGE_WEBP = 'image/webp';

package/dist/constants/mime/index.js

@@ -1,4 +1,4 @@
-export * from './application.js';
-export * from './audio.js';
-export * from './text.js';
-export * from './image.js';
+export * from './application.js';
+export * from './audio.js';
+export * from './text.js';
+export * from './image.js';

package/dist/constants/mime/text.js

@@ -1,2 +1,2 @@
-export const TEXT_PLAIN = 'text/plain';
-export const TEXT_HTML = 'text/html';
+export const TEXT_PLAIN = 'text/plain';
+export const TEXT_HTML = 'text/html';

package/dist/constants/regexp/index.js

@@ -1,31 +1,31 @@
-/**
- * Index file for various regexp categories
- *
- * @note
- * To enable unicode search, use the unicode flag 'u'.
- *
- * \p and \P are only supported in Unicode-aware mode. In Unicode-unaware mode,
- * they are identity escapes for the p or P character.
- *
- * @note
- * To enable unicode symbols that consist of multiple 'code points'(characters),
- * such a some emoji, you must use the flag 'v'.
- *
- * @eg
- * const re = new RegExp('^[${Latin_Number}]', 'u');
- *
- * @eg
- * const re = new RegExp('^[${Symbols_Emoji}]', 'v');
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/
- *      Reference/Regular_expressions/Unicode_character_class_escape
- *
- * @see https://javascript.info/regexp-unicode
- *
- * @see https://v8.dev/features/regexp-v-flag
- *
- * @see https://www.regular-expressions.info/unicode.html
- */
-export * from './text.js';
-export * from './user.js';
-export * from './web.js';
+/**
+ * Index file for various regexp categories
+ *
+ * @note
+ * To enable unicode search, use the unicode flag 'u'.
+ *
+ * \p and \P are only supported in Unicode-aware mode. In Unicode-unaware mode,
+ * they are identity escapes for the p or P character.
+ *
+ * @note
+ * To enable unicode symbols that consist of multiple 'code points'(characters),
+ * such a some emoji, you must use the flag 'v'.
+ *
+ * @eg
+ * const re = new RegExp('^[${Latin_Number}]', 'u');
+ *
+ * @eg
+ * const re = new RegExp('^[${Symbols_Emoji}]', 'v');
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/
+ *      Reference/Regular_expressions/Unicode_character_class_escape
+ *
+ * @see https://javascript.info/regexp-unicode
+ *
+ * @see https://v8.dev/features/regexp-v-flag
+ *
+ * @see https://www.regular-expressions.info/unicode.html
+ */
+export * from './text.js';
+export * from './user.js';
+export * from './web.js';

package/dist/constants/regexp/inspiratie.js__

@@ -1,95 +1,95 @@
-//
-// EXT_LATIN_TOKENS_LC
-// - Extended list of latin tokens, works for most latin languages
-//
-// @note
-//   Both upper- and lower case extended latin tokens are:
-//   "ŠŒŽšœžŸñÑÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðòóôõöøùúûüýþÿ"
-//
-// TODO:
-//   Replace with unicode property escapes when supported ES2018
-//   (not yet supported by MS Edge 12)
-//   https://github.com/tc39/proposal-regexp-unicode-property-escapes
-//   http://unicode.org/Public/UNIDATA/PropertyValueAliases.txt
-//   https://www.fileformat.info/info/unicode/category/index.htm
-//   https://github.com/danielberndt/babel-plugin-utf-8-regex/
-//     blob/master/src/transformer.js
-//
-export const EXT_LATIN_TOKENS_LC = 'šœžÿñàáâãäåæçèéêëìíîïðòóôõöøùúûüýþß';
-
-// RegExp and RegExp part constants
-
-// TODO:
-//   regexAstralSymbols = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
-//   "-~.,`'\"‘’“”„±€$@%&¡¿©®"
-//   REP_PUNCTUATION = ",.¡!¿?;:-";
-
-export const C = {
-  EXT_LATIN_TOKENS_LC,
-  REP_NUMBER: '0-9',
-  REP_LETTER_LC: `a-z${EXT_LATIN_TOKENS_LC}`,
-  REP_LETTER_NUMBER_LC: `0-9a-z${EXT_LATIN_TOKENS_LC}`
-};
-
-export const RE_EMAIL = new RegExp(
-  '^(([^<>()[\\]\\.,;:\\s@"]+(.[^<>()[\\]\\.,;:\\s@"]+)*)|(".+"))@((([' +
-    '\\-' +
-    C.REP_LETTER_NUMBER_LC +
-    ']+\\.)+[' +
-    C.REP_LETTER_LC +
-    ']{2,}))$',
-  'i'
-);
-
-// export const RE_URL = << TODO
-
-export const RE_PHONE =
-  /(^\+[0-9]{2}|^\+[0-9]{2}\(0\)|^\(\+[0-9]{2}\)\(0\)|^00[0-9]{2}|^0)([0-9]{9}$|[0-9\-\s]{10}$)/;
-
-export const RE_POSTCODE_DUTCH = /^[1-9]{1}[0-9]{3} ?[A-Za-z]{2}$/;
-
-export const RE_PLACE_DUTCH = new RegExp(
-  "^['`]{0,1}" +
-    `[${C.REP_LETTER_LC}]{0,}` +
-    '[-\\s]{0,1}' +
-    `[${C.REP_LETTER_LC}]{2,}$`,
-  'i'
-);
-
-// export const RE_NAME =
-//   new RegExp( `^[${C.REP_LETTER_LC}\\s-\`']{2,}$`, "i" );
-
-export const RE_NAME = new RegExp(
-  `^[${C.REP_LETTER_LC}]{1}` + `[${C.REP_LETTER_LC}\\s-\`'\\.]{0,}$`,
-  'i'
-);
-
-export const RE_FANTASY_NAME = new RegExp(
-  '^[' +
-    C.REP_LETTER_NUMBER_LC +
-    "\\x20!@#\\$%\\^&\\*\\(\\)-_+=\\|:;'\"'`~<,>.?/\\\\]{2,}$",
-  'i'
-);
-
-export const RE_ADDRESS = new RegExp(
-  '^[' + C.REP_LETTER_NUMBER_LC + '.,°\\s-]{2,}$',
-  'i'
-);
-
-export const RE_HAS_A_LETTER_OR_NUMBER = new RegExp('[a-z0-9]+', 'i');
-
-export const RE_MULTIPLE_SPACES = new RegExp('[\\s]{2,}', 'g');
-// export const RE_MULTIPLE_SPACES = /  +/g
-
-export const RE_LABEL = new RegExp('^[a-z0-9_-]{2,}$');
-
-export const RE_COLLECTION_NAME = new RegExp('^[a-z0-9\\s-_]{1,}$', 'i');
-
-export const RE_URI_COMPONENT = new RegExp(
-  '^[' + C.REP_LETTER_LC + '\\s-_]{1,}$',
-  'i'
-);
-
-//
-// @see https://usefulshortcuts.com/alt-codes/accents-alt-codes.php
-//
+//
+// EXT_LATIN_TOKENS_LC
+// - Extended list of latin tokens, works for most latin languages
+//
+// @note
+//   Both upper- and lower case extended latin tokens are:
+//   "ŠŒŽšœžŸñÑÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðòóôõöøùúûüýþÿ"
+//
+// TODO:
+//   Replace with unicode property escapes when supported ES2018
+//   (not yet supported by MS Edge 12)
+//   https://github.com/tc39/proposal-regexp-unicode-property-escapes
+//   http://unicode.org/Public/UNIDATA/PropertyValueAliases.txt
+//   https://www.fileformat.info/info/unicode/category/index.htm
+//   https://github.com/danielberndt/babel-plugin-utf-8-regex/
+//     blob/master/src/transformer.js
+//
+export const EXT_LATIN_TOKENS_LC = 'šœžÿñàáâãäåæçèéêëìíîïðòóôõöøùúûüýþß';
+
+// RegExp and RegExp part constants
+
+// TODO:
+//   regexAstralSymbols = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+//   "-~.,`'\"‘’“”„±€$@%&¡¿©®"
+//   REP_PUNCTUATION = ",.¡!¿?;:-";
+
+export const C = {
+  EXT_LATIN_TOKENS_LC,
+  REP_NUMBER: '0-9',
+  REP_LETTER_LC: `a-z${EXT_LATIN_TOKENS_LC}`,
+  REP_LETTER_NUMBER_LC: `0-9a-z${EXT_LATIN_TOKENS_LC}`
+};
+
+export const RE_EMAIL = new RegExp(
+  '^(([^<>()[\\]\\.,;:\\s@"]+(.[^<>()[\\]\\.,;:\\s@"]+)*)|(".+"))@((([' +
+    '\\-' +
+    C.REP_LETTER_NUMBER_LC +
+    ']+\\.)+[' +
+    C.REP_LETTER_LC +
+    ']{2,}))$',
+  'i'
+);
+
+// export const RE_URL = << TODO
+
+export const RE_PHONE =
+  /(^\+[0-9]{2}|^\+[0-9]{2}\(0\)|^\(\+[0-9]{2}\)\(0\)|^00[0-9]{2}|^0)([0-9]{9}$|[0-9\-\s]{10}$)/;
+
+export const RE_POSTCODE_DUTCH = /^[1-9]{1}[0-9]{3} ?[A-Za-z]{2}$/;
+
+export const RE_PLACE_DUTCH = new RegExp(
+  "^['`]{0,1}" +
+    `[${C.REP_LETTER_LC}]{0,}` +
+    '[-\\s]{0,1}' +
+    `[${C.REP_LETTER_LC}]{2,}$`,
+  'i'
+);
+
+// export const RE_NAME =
+//   new RegExp( `^[${C.REP_LETTER_LC}\\s-\`']{2,}$`, "i" );
+
+export const RE_NAME = new RegExp(
+  `^[${C.REP_LETTER_LC}]{1}` + `[${C.REP_LETTER_LC}\\s-\`'\\.]{0,}$`,
+  'i'
+);
+
+export const RE_FANTASY_NAME = new RegExp(
+  '^[' +
+    C.REP_LETTER_NUMBER_LC +
+    "\\x20!@#\\$%\\^&\\*\\(\\)-_+=\\|:;'\"'`~<,>.?/\\\\]{2,}$",
+  'i'
+);
+
+export const RE_ADDRESS = new RegExp(
+  '^[' + C.REP_LETTER_NUMBER_LC + '.,°\\s-]{2,}$',
+  'i'
+);
+
+export const RE_HAS_A_LETTER_OR_NUMBER = new RegExp('[a-z0-9]+', 'i');
+
+export const RE_MULTIPLE_SPACES = new RegExp('[\\s]{2,}', 'g');
+// export const RE_MULTIPLE_SPACES = /  +/g
+
+export const RE_LABEL = new RegExp('^[a-z0-9_-]{2,}$');
+
+export const RE_COLLECTION_NAME = new RegExp('^[a-z0-9\\s-_]{1,}$', 'i');
+
+export const RE_URI_COMPONENT = new RegExp(
+  '^[' + C.REP_LETTER_LC + '\\s-_]{1,}$',
+  'i'
+);
+
+//
+// @see https://usefulshortcuts.com/alt-codes/accents-alt-codes.php
+//

package/dist/constants/regexp/text.js

@@ -1,49 +1,49 @@
-/**
- * Text related regexp's
- *
- * Letter (any language): \p{L}
- * Letter latin: \p{Script=Latin}
- *
- * Number (any language): \p{N}
- * Number (exclude letter numbers, e.g. roman): \p{Nd}
- *
- * @example
- * import { Latin_Char_Number as lcn } from './latin.js';
- * export const User_Username = `^[${lcn}]+${lcn}_-]{1,38}[${lcn}]$`;
- *
- * const re = new RegExp('^[${Latin_Number}]', 'u');
- *
- * Emoji:
- *
- * The v flag enables support
- *
- * RGI_Emoji in Unicode is defined as “the subset of all valid emoji
- * (characters and sequences) recommended for general interchange”.
- * With this, we can now match emoji regardless of how many code points
- * they consist of under the hood!
- *
- * @see https://v8.dev/features/regexp-v-flag
- *
- * Punctuation:
- * Puntuation marks are periods, commas, exclamation marks, question marks etc.
- * Astral symbols are emoji
- *
- * @note
- * \p{Punctuation} matches a small subset: !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~
- * \p{IsPunctuation} matches a wide subset, including e.g. «, », ¿, ¡, §,
- * ¶, ‘, ’, “, ”, and ‽.
- *
- * @see https://stackoverflow.com/questions/4328500/
- *      how-can-i-strip-all-punctuation-from-a-string-in-javascript-using-regex
- *
- * @see https://en.wikipedia.org/
- *      wiki/Unicode_character_property#General_Category
- */
-
-export const CHAR = '\\p{Script=Latin}';
-export const NUMBER = '\\p{Nd}';
-export const CHAR_NUMBER = `${CHAR}${NUMBER}`;
-
-export const EMOJI = '\\p{RGI_Emoji}';
-export const PUNCTUATION = '\\p{Punctuation}$+<=>\\^`\\|~';
-export const PUNCT = PUNCTUATION;
+/**
+ * Text related regexp's
+ *
+ * Letter (any language): \p{L}
+ * Letter latin: \p{Script=Latin}
+ *
+ * Number (any language): \p{N}
+ * Number (exclude letter numbers, e.g. roman): \p{Nd}
+ *
+ * @example
+ * import { Latin_Char_Number as lcn } from './latin.js';
+ * export const User_Username = `^[${lcn}]+${lcn}_-]{1,38}[${lcn}]$`;
+ *
+ * const re = new RegExp('^[${Latin_Number}]', 'u');
+ *
+ * Emoji:
+ *
+ * The v flag enables support
+ *
+ * RGI_Emoji in Unicode is defined as “the subset of all valid emoji
+ * (characters and sequences) recommended for general interchange”.
+ * With this, we can now match emoji regardless of how many code points
+ * they consist of under the hood!
+ *
+ * @see https://v8.dev/features/regexp-v-flag
+ *
+ * Punctuation:
+ * Puntuation marks are periods, commas, exclamation marks, question marks etc.
+ * Astral symbols are emoji
+ *
+ * @note
+ * \p{Punctuation} matches a small subset: !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~
+ * \p{IsPunctuation} matches a wide subset, including e.g. «, », ¿, ¡, §,
+ * ¶, ‘, ’, “, ”, and ‽.
+ *
+ * @see https://stackoverflow.com/questions/4328500/
+ *      how-can-i-strip-all-punctuation-from-a-string-in-javascript-using-regex
+ *
+ * @see https://en.wikipedia.org/
+ *      wiki/Unicode_character_property#General_Category
+ */
+
+export const CHAR = '\\p{Script=Latin}';
+export const NUMBER = '\\p{Nd}';
+export const CHAR_NUMBER = `${CHAR}${NUMBER}`;
+
+export const EMOJI = '\\p{RGI_Emoji}';
+export const PUNCTUATION = '\\p{Punctuation}$+<=>\\^`\\|~';
+export const PUNCT = PUNCTUATION;

package/dist/constants/regexp/user.js

@@ -1,33 +1,33 @@
-/**
- * User related regexps
- *
- * Inspired by
- * @see https://ihateregex.io/expr/username/
- * @see https://ihateregex.io/expr/discord-username/
- */
-
-import { NUMBER as N, CHAR, CHAR_NUMBER as CN } from './text.js';
-
-export const RE_NAME = new RegExp(
-  `^[${CHAR}]+(([\\s'\\-\\.]{1}|[\\s]{1}[']{0,1})[${CHAR}]+){0,8}$`, 'v'
-);
-
-export const RE_FULLNAME = new RegExp(
-  `^[${CHAR}]{2,}[\\s][']?[${CHAR}]{1,}([\\s]?['\\-]?[${CHAR}]{1,})*$`, 'v'
-);
-
-export const RE_SURNAME = new RegExp(
-  `^[']?[${CHAR}]{1,}([\\s]?['\\-]?[${CHAR}]{1,})*$`, 'v'
-)
-
-export const RE_USERNAME = new RegExp(
-  `^[${CN}]{2,40}([\\-_\\.][${CN}]{1,40}){0,3}([#][${N}]{1,10}){0,1}$`, 'v'
-);
-
-export const RE_EMAIL = new RegExp(
-  `[^@ \t\r\n]+@[^@ \t\r\n]+\.[^@ \t\r\n]+`, 'v'
-);
-
-export const RE_PHONENUMBER = new RegExp(
-  `^[\\+]?[\\(]?[0-9]{3}[\\)]?[\\-\\s\\.]?[0-9]{3}[\\-\\s\\.]?[0-9]{4,6}$`, 'v'
+/**
+ * User related regexps
+ *
+ * Inspired by
+ * @see https://ihateregex.io/expr/username/
+ * @see https://ihateregex.io/expr/discord-username/
+ */
+
+import { NUMBER as N, CHAR, CHAR_NUMBER as CN } from './text.js';
+
+export const RE_NAME = new RegExp(
+  `^[${CHAR}]+(([\\s'\\-\\.]{1}|[\\s]{1}[']{0,1})[${CHAR}]+){0,8}$`, 'v'
+);
+
+export const RE_FULLNAME = new RegExp(
+  `^[${CHAR}]{2,}[\\s][']?[${CHAR}]{1,}([\\s]?['\\-]?[${CHAR}]{1,})*$`, 'v'
+);
+
+export const RE_SURNAME = new RegExp(
+  `^[']?[${CHAR}]{1,}([\\s]?['\\-]?[${CHAR}]{1,})*$`, 'v'
+)
+
+export const RE_USERNAME = new RegExp(
+  `^[${CN}]{2,40}([\\-_\\.][${CN}]{1,40}){0,3}([#][${N}]{1,10}){0,1}$`, 'v'
+);
+
+export const RE_EMAIL = new RegExp(
+  `[^@ \t\r\n]+@[^@ \t\r\n]+\.[^@ \t\r\n]+`, 'v'
+);
+
+export const RE_PHONENUMBER = new RegExp(
+  `^[\\+]?[\\(]?[0-9]{3}[\\)]?[\\-\\s\\.]?[0-9]{3}[\\-\\s\\.]?[0-9]{4,6}$`, 'v'
 )

package/dist/constants/regexp/web.js

@@ -1,3 +1,3 @@
-import { CHAR_NUMBER as CN } from './text.js';
-
-export const URL_SLUG = `^[${CN}]+([-]{0,1}[${CN}]+)*$`;
+import { CHAR_NUMBER as CN } from './text.js';
+
+export const URL_SLUG = `^[${CN}]+([-]{0,1}[${CN}]+)*$`;

package/dist/constants/state-labels/input-states.js

@@ -1,11 +1,11 @@
-export const PRISTINE = 'pristine';
-export const DIRTY = 'dirty';
-
-export const FOCUSED = 'focused';
-export const UNFOCUSED = 'unfocused';
-
-export const VALID = 'valid';
-export const INVALID = 'invalid';
-
-export const REQUIRED = 'required';
-export const DISABLED = 'disabled';
+export const PRISTINE = 'pristine';
+export const DIRTY = 'dirty';
+
+export const FOCUSED = 'focused';
+export const UNFOCUSED = 'unfocused';
+
+export const VALID = 'valid';
+export const INVALID = 'invalid';
+
+export const REQUIRED = 'required';
+export const DISABLED = 'disabled';

package/dist/constants/state-labels/submit-states.js

@@ -1,4 +1,4 @@
-export const IDLE = 'idle';
-export const SUBMITTING = 'submitting';
-export const SUBMIT_OK = 'submit-ok';
-export const SUBMIT_FAILED = 'submit-failed';
+export const IDLE = 'idle';
+export const SUBMITTING = 'submitting';
+export const SUBMIT_OK = 'submit-ok';
+export const SUBMIT_FAILED = 'submit-failed';

package/dist/constants/time.js

@@ -1,28 +1,28 @@
-// > Units
-
-export const SECOND_MS = 1000;
-export const MINUTE_MS = 60 * SECOND_MS;
-export const HOUR_MS = 60 * MINUTE_MS;
-export const DAY_MS = 24 * HOUR_MS;
-export const WEEK_MS = 7 * DAY_MS;
-
-// > Fixed length intervals
-
-export const HOURLY = 'hourly';
-export const DAILY = 'daily';
-export const WEEKLY = 'weekly';
-export const TWO_WEEKLY = 'two-weekly';
-export const FOUR_WEEKLY = 'four-weekly';
-
-export const INTERVALS_MS = {
-  [HOURLY]: HOUR_MS,
-  [DAILY]: DAY_MS,
-  [WEEKLY]: WEEK_MS,
-  [TWO_WEEKLY]: WEEK_MS * 2,
-  [FOUR_WEEKLY]: WEEK_MS * 4
-};
-
-// > Offsets
-
-export const TIME_2025_01_01 = 1577836800000; // 2020-01-01T00:00:00.000Z
-// export const TIME_2100_01_01 = 4102444800000; // 2100-01-01T00:00:00.000Z
+// > Units
+
+export const SECOND_MS = 1000;
+export const MINUTE_MS = 60 * SECOND_MS;
+export const HOUR_MS = 60 * MINUTE_MS;
+export const DAY_MS = 24 * HOUR_MS;
+export const WEEK_MS = 7 * DAY_MS;
+
+// > Fixed length intervals
+
+export const HOURLY = 'hourly';
+export const DAILY = 'daily';
+export const WEEKLY = 'weekly';
+export const TWO_WEEKLY = 'two-weekly';
+export const FOUR_WEEKLY = 'four-weekly';
+
+export const INTERVALS_MS = {
+  [HOURLY]: HOUR_MS,
+  [DAILY]: DAY_MS,
+  [WEEKLY]: WEEK_MS,
+  [TWO_WEEKLY]: WEEK_MS * 2,
+  [FOUR_WEEKLY]: WEEK_MS * 4
+};
+
+// > Offsets
+
+export const TIME_2025_01_01 = 1577836800000; // 2020-01-01T00:00:00.000Z
+// export const TIME_2100_01_01 = 4102444800000; // 2100-01-01T00:00:00.000Z

package/dist/css/utilities.css

@@ -1,43 +1,43 @@
-/**
- * Common utility CSS classes
- * 
- * Using tailwind layers
- * @see https://tailwindcss.com/docs/functions-and-directives 
- */
-
-@layer utilities {
-  .g-no-select {
-    user-select: none;
-    -webkit-user-select: none; /* ios safari */
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  input[type='text'].g-no-select,
-  textarea.g-no-select {
-    user-select: text !important;
-    cursor: text;
-  }
-
-  .g-no-double-tab-zoom {
-    /* tailwind touch-manipulation */
-    touch-action: manipulation;
-  }
-
-  .g-no-pinch-zoom {
-    touch-action: pan-x pan-y; /* no pinch zoom, but allow scroll  */
-  }
-
-  .g-no-highlights {
-    -webkit-tap-highlight-color: transparent;
-  }
-}
-
-/* .g-grid-layers {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
-
-  & > * {
-    grid-area: 1/1/2/2;
-  }
-} */
+/**
+ * Common utility CSS classes
+ * 
+ * Using tailwind layers
+ * @see https://tailwindcss.com/docs/functions-and-directives 
+ */
+
+@layer utilities {
+  .g-no-select {
+    user-select: none;
+    -webkit-user-select: none; /* ios safari */
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  input[type='text'].g-no-select,
+  textarea.g-no-select {
+    user-select: text !important;
+    cursor: text;
+  }
+
+  .g-no-double-tab-zoom {
+    /* tailwind touch-manipulation */
+    touch-action: manipulation;
+  }
+
+  .g-no-pinch-zoom {
+    touch-action: pan-x pan-y; /* no pinch zoom, but allow scroll  */
+  }
+
+  .g-no-highlights {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+
+/* .g-grid-layers {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+
+  & > * {
+    grid-area: 1/1/2/2;
+  }
+} */